uni-app 想做一个画画的小程序

当然，开发一个画画小程序在uni-app中是一个有趣且富有挑战性的项目。以下是一个基本的代码案例，展示了如何使用uni-app创建一个简单的画布（canvas）应用，允许用户在上面涂鸦。

首先，确保你的uni-app项目已经创建好，然后在pages目录下新建一个页面，比如draw/draw.vue。

draw/draw.vue

<template>
  <view class="container">
    <canvas
      canvas-id="myCanvas"
      style="width: 100%; height: 100%;"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="endDrawing"
    ></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      context: null,
      startX: 0,
      startY: 0,
      isDrawing: false,
    };
  },
  onLoad() {
    this.context = uni.createCanvasContext('myCanvas');
    this.context.setFillStyle('white');
    this.context.fillRect(0, 0, 375, 667); // 设置画布初始为白色，并假定画布大小为375x667
    this.context.draw();
  },
  methods: {
    startDrawing(e) {
      this.startX = e.touches[0].x;
      this.startY = e.touches[0].y;
      this.isDrawing = true;
    },
    draw(e) {
      if (!this.isDrawing) return;
      const touch = e.touches[0];
      this.context.beginPath();
      this.context.moveTo(this.startX, this.startY);
      this.context.lineTo(touch.x, touch.y);
      this.context.setStrokeStyle('#000000');
      this.context.setLineWidth(5);
      this.context.stroke();
      this.context.draw(true); // 参数true表示在之前的绘制上继续绘制
      this.startX = touch.x;
      this.startY = touch.y;
    },
    endDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

说明

1. Canvas 初始化：在onLoad生命周期函数中，通过uni.createCanvasContext获取canvas的绘图上下文，并设置初始画布颜色为白色。

2. 触摸事件处理：

   • touchstart：记录起始触摸点。
   • touchmove：在画布上绘制线条。
   • touchend：结束绘制。

3. 绘图逻辑：

   • 使用beginPath和moveTo方法设置起始点。
   • 使用lineTo方法绘制到当前触摸点。
   • 设置线条颜色和宽度，并调用stroke方法绘制线条。
   • 使用draw(true)在之前的绘制上继续绘制，以避免清屏。

这个示例是一个基本的起点，你可以根据需要添加更多功能，比如颜色选择器、橡皮擦、撤销和重做等。希望这个示例能帮助你开始你的画画小程序开发！