blog/src/pages/views/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"
    />
    <label>
      旋转角度º:
      <input type="number">
    </label>
    <n-button
      type="tertiary"
      block
    >
      撤销
    </n-button>
    <n-button
      type="tertiary"
      block
    >
      清空
    </n-button>
    <n-button
      type="info"
      block
    >
      保存
    </n-button>
  </div>
</template>
<script setup lang='ts'>
import { h, onMounted, ref } from 'vue'
import { DrawCanvas } from './assets/js/draw'

const drawCanvas = new DrawCanvas()
const options = [
  {
    label: '边界线',
    icon: './assets/img/0.png',
    value: 0,
    w: 5,
    h: 3
  },
  {
    label: '灰岩',
    icon: './assets/img/1.png',
    value: 1,
    w: 10,
    h: 6
  },
  {
    label: '第四系全新统残坡积',
    icon: './assets/img/2.png',
    value: 2,
    w: 10,
    h: 6
  },
  {
    label: '第四系全新统崩坡积',
    icon: './assets/img/3.png',
    value: 3,
    w: 10,
    h: 6
  },
  {
    label: '震旦系上统灯影组',
    icon: './assets/img/4.png',
    value: 4,
    w: 10,
    h: 6
  },
  {
    label: '志留系中统石门坎组',
    icon: './assets/img/5.png',
    value: 5,
    w: 10,
    h: 6
  },
  {
    label: '寒武系中统西王庙组',
    icon: './assets/img/6.png',
    value: 6,
    w: 10,
    h: 6
  },
  {
    label: '粉砂岩',
    icon: './assets/img/7.png',
    value: 7,
    w: 10,
    h: 6
  },
  {
    label: '页岩',
    icon: './assets/img/8.png',
    value: 8,
    w: 10,
    h: 6
  },
  {
    label: '粉砂质泥岩',
    icon: './assets/img/9.png',
    value: 9,
    w: 10,
    h: 6
  },
  {
    label: '泥岩',
    icon: './assets/img/10.png',
    value: 10,
    w: 10,
    h: 6
  },
  {
    label: '断层破碎带',
    icon: './assets/img/11.png',
    value: 11,
    w: 10,
    h: 6
  },
  {
    label: '块石土',
    icon: './assets/img/12.png',
    value: 12,
    w: 10,
    h: 6
  },
  {
    label: '白云质灰岩',
    icon: './assets/img/13.png',
    value: 13,
    w: 10,
    h: 6
  },
  {
    label: '炭质页岩',
    icon: './assets/img/14.png',
    value: 14,
    w: 10,
    h: 6
  },
  {
    label: '推测地层界线',
    icon: './assets/img/15.png',
    value: 15,
    w: 10,
    h: 6
  },
  {
    label: '推测岩,土层界线',
    icon: './assets/img/16.png',
    value: 16,
    w: 10,
    h: 6
  },
  {
    label: '细砂岩',
    icon: './assets/img/17.png',
    value: 17,
    w: 10,
    h: 6
  },
  {
    label: '花岗闪长岩',
    icon: './assets/img/18.png',
    value: 18,
    w: 10,
    h: 6
  },
  {
    label: '千枚岩',
    icon: './assets/img/19.png',
    value: 19,
    w: 10,
    h: 6
  },
  {
    label: '钙质千枚岩',
    icon: './assets/img/20.png',
    value: 20,
    w: 10,
    h: 6
  },
  {
    label: '碳质板岩',
    icon: './assets/img/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'
}

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

function changeOption(v: null, option: { label: string; icon: string; value: number; w: number; h: number; }) {
  console.log('切换', v, option)
  drawCanvas._executionArr.type = v
}

onMounted(() => {
  document.title = 'H5 canvas画图'
  const canvas = document.getElementById('CANVAS')
  drawCanvas._init({
    canvas,
    dicTypePath: dicTypePath[0],
    callBack: () => {
      changeOption(null, options[check.value])
    }
  })
})
</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;
  }

  .n-button {
    margin-bottom: 10px;
  }

  label {
    display: block;
    font-size: 14px;
    margin: 10px 0;
    border: 1px solid rgba(196, 200, 206, 1);
    padding: 6px 10px;
  }

  label>input {
    border: none;
    outline: none;
  }
}
</style>./assets/js/draw.js