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

1. UniApp绘图功能介绍

UniApp作为一款跨平台的开发框架，在绘图功能方面也提供了一些可以使用的接口，例如

uni.createCanvasContext(canvasId,callback)，该接口可以获取到一个传入的canvas组件的绘图上下文对象，该对象提供了许多关于canvas绘图的API，可以通过它们来实现我们期望的绘图功能。

1.1 createCanvasContext(canvasId,callback)接口详解

createCanvasContext(canvasId,callback)作用是获取在wxml中定义的canvas组件的绘图上下文对象。我们在在vue文件中定义一个canvas组件，然后在js文件中通过uni.createCanvasContext(canvasId,callback)获取该组件的绘图上下文对象，然后就可以使用该组件上下文对象提供的API进行绘图了。

// 在vue文件中定义一个Canvas组件
<template>
  <view>
    <canvas canvas-id="myCanvas" style="width:200px;height:200px;background:#f0f0f0;" />
  </view>
</template>
<script>
export default {
  mounted() {
    // 在mounted函数中调用

createCanvasContext(canvasId,callback)函数获取该组件的绘图上下文对象
    const context = uni.createCanvasContext('myCanvas', this);
    // 然后就可以使用context对象提供的API进行绘图了。
  },
};
</script>

1.2 UniApp绘图API介绍

createCanvasContext(canvasId,callback)获取到的绘图上下文提供了许多关于canvas绘图的API，以下为常用的API介绍。

setFillStyle(color)

该函数用来设置填充颜色

      // 将绘图上下文的填充颜色设置为红色
      context.setFillStyle('red');
    

setStrokeStyle(color)

该函数用来设置线条颜色

      // 将绘图上下文的线条颜色设置为红色
      context.setStrokeStyle('red');
    

setLineWidth(width)

该函数用来设置线条宽度

      // 将绘图上下文的线条宽度设置为2
      context.setLineWidth(2);
    

moveTo(x, y)

该函数将绘图起点移到坐标点(x, y)

      // 将绘图起点移动到坐标点(10, 10)
      context.moveTo(10, 10);
    

lineTo(x, y)

该函数从绘图起点绘制一条直线到坐标点(x, y)

      // 从绘图起点绘制一条直线到坐标点(100, 100)
      context.lineTo(100, 100);
    

stroke()

该函数用来绘制已定义的路径

      // 绘制已定义的路径
      context.stroke();
    

fill()

该函数用来填充已定义的路径

      // 填充已定义的路径
      context.fill();
    

2. 画板效果实现

2.1 实现思路

我们可以通过监听用户在画板上的触摸操作来实现画板效果，具体实现思路如下：

监听用户的触摸事件，当用户的手指触碰到屏幕时记录手指坐标

当用户的手指在画布上移动时，获取手指移动的坐标，并使用绘图上下文对象绘制一条连接起点和终点的线段

当用户的手指离开屏幕时，绘制操作结束，保存绘图数据。

2.2 代码实现

以下为基于上述实现思路的代码实现。

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width:350px;height:350px;background:#f0f0f0;" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      startX: 0,   // 起点X坐标
      startY: 0,   // 起点Y坐标
      count: 0,    // 操作计数器
      ctx: null,   // 绘图上下文对象
    };
  },
  mounted() {
    // 获取绘图上下文对象
    this.ctx = uni.createCanvasContext('myCanvas', this);
  },
  methods: {
    // 监听用户touchstart事件
    touchStart(e) {
      // 记录当前操作的起始坐标
      this.startX = e.touches[0].x;
      this.startY = e.touches[0].y;
      // 重新设置计数器
      this.count = 0;
    },
    // 监听用户touchmove事件
    touchMove(e) {
      // 每隔两次记录一次坐标，减轻计算量
      if (++this.count % 2 !== 0) return;
  
      // 获取当前坐标点
      const endX = e.touches[0].x;
      const endY = e.touches[0].y;
  
      // 使用绘图上下文画一条连接起点和终点的线段
      this.ctx.moveTo(this.startX, this.startY);
      this.ctx.lineTo(endX, endY);
      this.ctx.stroke();
      this.ctx.draw(true);
  
      // 记录终点坐标
      this.startX = endX;
      this.startY = endY;
    },
    // 监听用户touchend事件
    touchEnd() {
      // 操作结束，保存绘图数据
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success(res) {
          console.log(res.tempFilePath);
        },
        fail(err) {
          console.log(err);
        },
      }, this.$mp.page);
    },
  },
};
</script>

2.3 结束语

本文通过介绍UniApp提供的绘图功能和使用该功能实现画板效果的实现思路和代码示例，希望能够帮助开发者在UniApp中实现自己的绘图功能。