uni-app canvas 涂鸦功能有偿

发布于 1周前 作者 vueper 来自 Uni-App

uni-app canvas 涂鸦功能有偿

Harmonyos Next教程
4 回复

要什么功能


在画布宽高里画出限定的横纵个数的像素点（镂空正方形），然后再上面画图填充（填满镂空正方形），画布需要缩放，历史回撤，图形快速生成，镜像绘画，整体移动，最后得出数据结果

还需要吗，有没有演示案例可以参考

当然，我可以为你提供一个基于uni-app实现canvas涂鸦功能的代码示例。以下是一个简化的实现，用于在uni-app中创建一个基本的涂鸦板。

首先，确保你的uni-app项目已经创建并配置好。然后，你可以按照以下步骤进行实现。

  1. 页面结构 (pages/index/index.vue):
<template>
  <view class="container">
    <canvas canvas-id="drawCanvas" style="width: 100%; height: 100%;" />
    <view class="controls">
      <button @click="clearCanvas">清除</button>
      <button @click="saveCanvas">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      startX: 0,
      startY: 0,
      isDrawing: false,
    };
  },
  onLoad() {
    this.ctx = uni.createCanvasContext('drawCanvas');
    this.ctx.setFillStyle('white');
    this.ctx.fillRect(0, 0, 375, 667); // 假设屏幕尺寸为375x667
    this.ctx.draw();
  },
  methods: {
    // 省略了触摸事件监听和处理逻辑，为了简洁，这里直接给出核心部分
    // 触摸开始
    onTouchStart(e) {
      this.startX = e.touches[0].x;
      this.startY = e.touches[0].y;
      this.isDrawing = true;
    },
    // 触摸移动
    onTouchMove(e) {
      if (!this.isDrawing) return;
      const ctx = this.ctx;
      ctx.beginPath();
      ctx.moveTo(this.startX, this.startY);
      ctx.lineTo(e.touches[0].x, e.touches[0].y);
      ctx.setStrokeStyle('black');
      ctx.setLineWidth(5);
      ctx.setLineCap('round');
      ctx.stroke();
      this.startX = e.touches[0].x;
      this.startY = e.touches[0].y;
      ctx.draw(true); // 这里使用true参数来保持之前的绘制内容
    },
    // 触摸结束
    onTouchEnd() {
      this.isDrawing = false;
    },
    clearCanvas() {
      this.ctx.setFillStyle('white');
      this.ctx.fillRect(0, 0, 375, 667);
      this.ctx.draw();
    },
    saveCanvas() {
      uni.canvasToTempFilePath({
        canvasId: 'drawCanvas',
        success: res => {
          console.log('保存路径:', res.tempFilePath);
          // 这里可以进一步处理保存路径，比如上传到服务器
        },
      }, this);
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

请注意，上述代码省略了详细的触摸事件绑定部分（例如在onLoad或mounted钩子中绑定touchstart、touchmove和touchend事件）。你需要根据uni-app的事件绑定机制，将这些事件绑定到页面元素上。

这个示例提供了一个基本的涂鸦功能，包括绘制线条、清除画布和保存画布内容。你可以根据需要进一步扩展功能，比如添加颜色选择、线条粗细调整等。希望这个示例能帮助你快速上手uni-app中的canvas涂鸦功能。

回到顶部