uniapp canvas工程图对点进行编辑 存储属性，插入图标代码实现

好的，下面是一个简单的示例代码，展示如何在UniApp中使用uniCanvas组件编辑Canvas图像，并使用uni-icons组件插入图标，以及使用uniStorage API存储和检索数据的方式。

<template>
  <view>
    <uni-canvas :canvas-id="canvasId" :size="canvasSize" @click="handleCanvasClick"></uni-canvas>
    <uni-icons type="add" size="40" color="#000" @click="handleIconClick"></uni-icons>
  </view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
  components: {
    uniIcons
  },
  data() {
    return {
      canvasId: 'my-canvas',
      canvasSize: {
        width: '100%',
        height: '400px'
      },
      points: []
    };
  },
  mounted() {
    this.drawPoints();
  },
  methods: {
    drawPoints() {
      const ctx = uni.createCanvasContext(this.canvasId);
      ctx.setFillStyle('#000');
      this.points.forEach((point) => {
        ctx.beginPath();
        ctx.arc(point.x, point.y, 10, 0, 2 * Math.PI);
        ctx.fill();
      });
      ctx.draw();
    },
    handleCanvasClick(event) {
      const x = event.detail.x;
      const y = event.detail.y;
      this.points.push({
        x,
        y
      });
      this.drawPoints();
      uni.setStorageSync('points', this.points);
    },
    handleIconClick() {
      this.points = uni.getStorageSync('points') || [];
      this.drawPoints();
    }
  }
};
</script>

在这个示例代码中，我们使用了uniCanvas组件来创建一个Canvas元素，并在其中绘制了一个点（使用uni.createCanvasContext API）。我们还使用了uni-icons组件来插入一个加号图标。

当单击Canvas时，会触发handleCanvasClick方法，在其中添加一个新点，并将其绘制到Canvas中。我们还使用uniStorage API将所有点存储在本地存储中。

当单击加号图标时，会触发handleIconClick方法，在其中从本地存储中检索所有点，并将它们绘制到Canvas中。

这只是一个简单的示例，但希望它可以帮助您了解如何在UniApp中编辑Canvas图像，存储属性以及插入图标。