UniApp实现绘图功能与画板效果的设计与开发指南

<template><view><canvas :canvas-id="canvasId" style="width:100%;height:100%;"></canvas></view></template><script>export default {  data () {    return {      canvasId: 'myCanvas',      startX: 0,      startY: 0,      endX: 0,      endY: 0,      ctx: null    }  },  mounted () {    this.ctx = uni.createCanvasContext(this.canvasId)  },  methods: {    touchStart (e) {      const touches = e.touches[0]      this.startX = touches.x      this.startY = touches.y      this.ctx.moveTo(this.startX, this.startY)    },    touchMove (e) {      const touches = e.touches[0]      this.endX = touches.x      this.endY = touches.y      this.ctx.lineTo(this.endX, this.endY)      this.ctx.stroke()      this.ctx.draw(true)      this.startX = this.endX      this.startY = this.endY    }  }}</script>

<template><view><canvas :canvas-id="canvasId" style="width:100%;height:100%;"></canvas></view></template><script>export default {  data () {    return {      canvasId: 'myCanvas',      x: 0,      y: 0,      ctx: null    }  },  mounted () {    this.ctx = uni.createCanvasContext(this.canvasId)  },  methods: {    touchStart (e) {      const touches = e.touches[0]      this.x = touches.x      this.y = touches.y      this.bucketFill(this.x, this.y)    },    touchMove (e) {      const touches = e.touches[0]      this.x = touches.x      this.y = touches.y      this.bucketFill(this.x, this.y)    },    bucketFill (x, y) {      const ctx = this.ctx      const imageData = ctx.getImageData(0, 0, uni.upx2px(750), uni.upx2px(750))      const width = imageData.width      const height = imageData.height      const data = imageData.data      const index = (y * width + x) * 4      const r = data[index]      const g = data[index + 1]      const b = data[index + 2]      const color = [r, g, b, 255]      const fillColor = [255, 0, 0, 255]      if (this.isSameColor(color, fillColor)) {        return      }      this.fill(x, y, width, height, data, color, fillColor)      ctx.putImageData(imageData, 0, 0)      ctx.draw(true)    },    isSameColor (color1, color2) {      return color1[0] === color2[0] && color1[1] === color2[1] && color1[2] === color2[2] && color1[3] === color2[3]    },    fill (x, y, width, height, data, color, fillColor) {      if (x < 0 || x >= width || y < 0 || y >= height) {        return      }      const index = (y * width + x) * 4      if (!this.isSameColor([data[index], data[index + 1], data[index + 2], data[index + 3]], color)) {        return      }      data[index] = fillColor[0]      data[index + 1] = fillColor[1]      data[index + 2] = fillColor[2]      data[index + 3] = fillColor[3]      this.fill(x - 1, y, width, height, data, color, fillColor)      this.fill(x + 1, y, width, height, data, color, fillColor)      this.fill(x, y - 1, width, height, data, color, fillColor)      this.fill(x, y + 1, width, height, data, color, fillColor)    }  }}</script>