blog/src/pages/draw/index.vue

<template>
  <div class="draw">
    <canvas
      id="CANVAS"
      class="canvas"
    />
    <n-select
      v-model:value="check"
      :options="options"
      :render-label="renderLabel"
      @update:value="changeOption"
    />
    <n-input-group>
      <n-input-group-label>旋转角度º</n-input-group-label>
      <n-input-number
        v-model:value="angle"
        type="number"
        style="width: 100%;"
        :min="0"
        :max="360"
        @update:value="changeOption(null, options[check])"
      />
    </n-input-group>
    <template
      v-for="(item, index) in btns"
      :key="index"
    >
      <n-button
        :type="item.type"
        block
        @click="item.fn"
      >
        {{ item.name }}
      </n-button>
    </template>
  </div>
</template>
<script setup lang='ts'>
import {
  h, onMounted, onUnmounted, ref
} from 'vue'
import { DrawCanvas } from './assets/js/draw'
import { useRoute } from 'vue-router'

const drawCanvas = new DrawCanvas()
const options = [
  {
    label: '边界线',
    icon: '0.png',
    value: 0,
    w: 5,
    h: 3
  },
  {
    label: '灰岩',
    icon: '1.png',
    value: 1,
    w: 10,
    h: 6
  },
  {
    label: '第四系全新统残坡积',
    icon: '2.png',
    value: 2,
    w: 10,
    h: 6
  },
  {
    label: '第四系全新统崩坡积',
    icon: '3.png',
    value: 3,
    w: 10,
    h: 6
  },
  {
    label: '震旦系上统灯影组',
    icon: '4.png',
    value: 4,
    w: 10,
    h: 6
  },
  {
    label: '志留系中统石门坎组',
    icon: '5.png',
    value: 5,
    w: 10,
    h: 6
  },
  {
    label: '寒武系中统西王庙组',
    icon: '6.png',
    value: 6,
    w: 10,
    h: 6
  },
  {
    label: '粉砂岩',
    icon: '7.png',
    value: 7,
    w: 10,
    h: 6
  },
  {
    label: '页岩',
    icon: '8.png',
    value: 8,
    w: 10,
    h: 6
  },
  {
    label: '粉砂质泥岩',
    icon: '9.png',
    value: 9,
    w: 10,
    h: 6
  },
  {
    label: '泥岩',
    icon: '10.png',
    value: 10,
    w: 10,
    h: 6
  },
  {
    label: '断层破碎带',
    icon: '11.png',
    value: 11,
    w: 10,
    h: 6
  },
  {
    label: '块石土',
    icon: '12.png',
    value: 12,
    w: 10,
    h: 6
  },
  {
    label: '白云质灰岩',
    icon: '13.png',
    value: 13,
    w: 10,
    h: 6
  },
  {
    label: '炭质页岩',
    icon: '14.png',
    value: 14,
    w: 10,
    h: 6
  },
  {
    label: '推测地层界线',
    icon: '15.png',
    value: 15,
    w: 10,
    h: 6
  },
  {
    label: '推测岩,土层界线',
    icon: '16.png',
    value: 16,
    w: 10,
    h: 6
  },
  {
    label: '细砂岩',
    icon: '17.png',
    value: 17,
    w: 10,
    h: 6
  },
  {
    label: '花岗闪长岩',
    icon: '18.png',
    value: 18,
    w: 10,
    h: 6
  },
  {
    label: '千枚岩',
    icon: '19.png',
    value: 19,
    w: 10,
    h: 6
  },
  {
    label: '钙质千枚岩',
    icon: '20.png',
    value: 20,
    w: 10,
    h: 6
  },
  {
    label: '碳质板岩',
    icon: '21.png',
    value: 21,
    w: 10,
    h: 6
  }
]
const check = ref(0)
const dicTypePath = {
  2: 'M174.562965,0.513209692 C221.690071,-0.00711210434 258.74832,14.9447077 286.260378,35.6782336 C324.994127,64.8686054 344.820323,105.514125 347.165866,130.556406 C351.169981,173.306492 350.923005,204.505495 338.863366,216.40901 C332.465594,222.723955 293.34237,247.50004 156.505785,247.50004 C124.380762,247.273198 88.5993566,242.423806 60.1185245,235.625016 C31.7537688,228.853934 10.5049705,220.211836 7.77411598,212.201523 C0.968039201,195.148672 -3.37568328,153.116559 5.40190246,119.570011 C11.4412002,98.8625327 30.5685051,60.0564728 69.9004626,32.3721832 C95.541554,14.3243807 129.772401,1.00773417 174.562965,0.513209692 Z',
  1: 'M69.4545878,34.6718448 C96.0319839,14.5464002 130.907219,-0.146079872 174.56443,0.522007913 C220.382312,1.22316053 255.607386,15.5063115 281.851378,35.1514114 C318.898628,62.8833568 338.052622,101.292047 343.850748,127.226896 C348.964999,150.102793 350.773132,170.630546 348.624737,186.798399 C346.628206,201.8234 341.223483,213.080679 331.813382,218.873688 C331.442887,219.101769 331.054704,219.344664 330.644655,219.601247 C319.902715,226.322867 294.07793,242.444674 177.407992,247.500112 C92.0383303,246.776789 19.7179823,226.018176 9.91797058,212.791135 C-0.632619328,198.551039 -1.84542038,163.783447 3.98419444,129.673937 C7.51590663,109.009626 28.7726098,65.4778309 69.4545878,34.6718448 Z',
  0: 'M175.000036,0.5 C222.664535,0.5 265.865535,21.1909654 297.358963,54.7296453 C328.90593,88.3253418 348.705559,134.812441 349.476653,186.303442 L349.490723,188.280824 L349.5,247.5 L0.5,247.5 L0.5,188.283766 C0.787224943,136.359137 20.4197058,89.3998566 51.9881066,55.4283849 C83.5364037,21.4785471 127.005458,0.5 175.000036,0.5 Z'
}
const dicType = ref(0)
const angle = ref(0)
const btns = [
  { name: '撤销', fn: () => drawCanvas.pathBack(), type: 'tertiary' },
  { name: '清空', fn: () => drawCanvas.pathClear(), type: 'tertiary' },
  {
    name: '保存',
    fn: () => drawCanvas.pathSave((data) => {
      console.log('数据', data)
      // 返回=>小程序web-view bindmessage="getMessage" =>使用wx.getFileSystemManager() 写入临时文件拿到临时路径后进行上传操作
      wx.miniProgram.postMessage({ data })
      wx.miniProgram.navigateBack()
    }),
    type: 'info'
  }
]

function renderLabel(option: { icon: string | URL; label: string; }) {
  return h('div', {
    style: {
      display: 'flex',
      alignItems: 'center'
    }
  }, [
    h('img', {
      src: new URL(`./assets/img/${option.icon}`, import.meta.url).href,
      style: {
        width: '20px',
        height: '20px',
        marginRight: '5px'
      }
    }),
    h('div', {
      style: {
        fontSize: '14px'
      }
    }, { default: () => option.label })
  ])
}

function changeOption(_: null, option: { label: string; icon: string; value: number; w: number; h: number; }) {
  drawCanvas.changeBrush({ ...option, url: new URL(`./assets/img/${option.icon}`, import.meta.url).href, angle: angle.value })
}

onMounted(() => {
  document.title = 'H5 canvas画图'
  const route = useRoute()
  const { query } = route
  if (query.type) {
    dicType.value = +query.type
  }
  const canvas = document.getElementById('CANVAS')
  drawCanvas._init({
    canvas,
    dicTypePath: dicTypePath[dicType.value],
    callBack: () => {
      changeOption(null, options[check.value])
    }
  })
})

onUnmounted(() => drawCanvas.destory())
</script>
<style lang="scss">
.draw {
  max-width: 800px;
  min-width: 370px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;

  .canvas {
    display: block;
    margin: 10px auto;
    width: 350px;
    height: 248px;
  }

  &>div {
    margin-bottom: 10px;
  }

  &>button:not(:last-child) {
    margin-bottom: 10px;
  }
}
</style>