小程序画布之撤销、播放操作

前端

2024-01-09 13:16:23

在小程序画布中，撤销和播放操作是增强用户交互体验的重要功能。本文将深入探讨如何实现这些操作，赋予你的小程序画布更多便利和乐趣。

撤销操作

撤销操作允许用户撤销最近一次或多次绘制的动作。实现撤销功能的关键在于记录绘制操作的历史记录。

记录绘制历史： 在touchmove事件处理程序中，将每次绘制的点坐标保存到数组中。这个数组将作为历史记录。
撤销最后一步： 当用户触发撤销操作时，从历史记录数组中移除最后一条记录。然后，使用wx.drawCanvas()方法重新绘制画布，但跳过最后一步。
多次撤销： 为了支持多次撤销，在历史记录数组中引入一个指针。每次撤销操作都会将指针后移一步。

播放操作

播放操作允许用户播放绘制过程的动画。要实现播放功能，需要将历史记录中的点坐标逐一重现。

设置播放帧率： 通过setInterval()函数设置播放帧率。例如，每100毫秒播放一帧。
逐帧播放： 在每个播放帧中，从历史记录数组中获取当前帧的点坐标，并使用wx.drawCanvas()方法绘制到画布上。
控制播放进度： 使用进度条或按钮等控件来控制播放进度，允许用户暂停、快进或快退。

实例代码

const app = getApp();

let canvasWidth, canvasHeight;

let points = [];
let playing = false;
let playbackIndex = 0;

function touchmove(e) {
  if (!playing) {
    points.push({ x: e.detail.x, y: e.detail.y });
  }
}

function undo() {
  if (points.length > 0) {
    points.pop();
    drawCanvas();
  }
}

function play() {
  playing = true;

  const playbackInterval = setInterval(() => {
    if (playbackIndex >= points.length) {
      clearInterval(playbackInterval);
      playing = false;
    } else {
      const point = points[playbackIndex];
      wx.drawCanvas({
        canvasId: 'canvas',
        actions: [
          {
            type: 'line',
            x: point.x,
            y: point.y,
          },
        ],
      });
      playbackIndex++;
    }
  }, 100);
}

function drawCanvas() {
  wx.drawCanvas({
    canvasId: 'canvas',
    actions: points,
  });
}