UniApp 中使用 Canvas 进行触摸绘制

在移动端开发中,手势交互是一个常见的需求,尤其是在图形应用中,用户希望能够自由绘制线条并与之交互。本文将介绍如何在 UniApp 中使用 Canvas 进行触摸绘制,实现用户通过触摸屏幕绘制线条,并在最后一个绘制点显示小蓝点,以便继续连接新线条。

需求分析

  1. 用户可以通过手指触摸屏幕绘制线条。
  2. 绘制完成后,终点会出现一个蓝色小点。
  3. 继续绘制时,必须从上一个终点的小蓝点开始,不能随意在画布上绘制。
  4. "清空"按钮可清除所有绘制内容。

代码实现

1. 初始化 Canvas

我们在 Vue 组件 onMounted 生命周期中初始化 Canvas 画布,确保在 DOM 加载完成后正确获取 canvas 上下文。

ini 复制代码
onMounted(() => {
    uni.getSystemInfo({
        success: (res) => {
            windowWidth = res.windowWidth;
            windowHeight = res.windowHeight;
        },
    });

    setTimeout(() => {
        ctx = uni.createCanvasContext('myCanvas');
        clearCanvas();
    }, 200);
});

2. 触摸事件处理

(1) handleTouchStart

  • 如果是第一次绘制,允许用户在任意位置开始。
  • 如果已经绘制了至少一条线,则只能从上一个终点(蓝点)开始新的线条。
ini 复制代码
const handleTouchStart = (e) => {
    if (!ctx) return;
    const touch = e.touches[0];
    
    if (hasFirstLine.value) {
        const lastLine = lines.value[lines.value.length - 1];
        const dx = touch.x - lastLine.x2;
        const dy = touch.y - lastLine.y2;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (distance > pointRadius) {
            isDrawing.value = false;
            return;
        }
    }

    lines.value.push({ x1: touch.x, y1: touch.y, x2: touch.x, y2: touch.y });
    isDrawing.value = true;
};

(2) handleTouchMove

  • 在触摸移动时更新终点,并重绘所有线条。
ini 复制代码
const handleTouchMove = (e) => {
    if (!isDrawing.value || !ctx) return;
    const touch = e.touches[0];
    const lastLine = lines.value[lines.value.length - 1];
    lastLine.x2 = touch.x;
    lastLine.y2 = touch.y;
    drawAllLines();
};

(3) handleTouchEnd

  • 触摸结束时,标记 hasFirstLine 变量,表示至少绘制了一条线,并重绘画布。
ini 复制代码
const handleTouchEnd = () => {
    if (!isDrawing.value || !ctx) return;
    isDrawing.value = false;
    hasFirstLine.value = true;
    drawAllLines();
};

3. 绘制功能

(1) drawAllLines

  • 每次绘制时,先清空画布,再绘制所有的线条。
  • 仅在最新绘制的线条终点显示小蓝点。
ini 复制代码
const drawAllLines = () => {
    if (!ctx) return;
    ctx.setFillStyle('#f8f8f8');
    ctx.fillRect(0, 0, windowWidth, windowHeight);
    ctx.setStrokeStyle('#FF0000');
    ctx.setLineWidth(5);
    
    lines.value.forEach((line, index) => {
        ctx.beginPath();
        ctx.moveTo(line.x1, line.y1);
        ctx.lineTo(line.x2, line.y2);
        ctx.stroke();

        if (index === lines.value.length - 1) {
            drawIcon(line.x2, line.y2);
        }
    });
    ctx.draw(true);
};

(2) drawIcon

  • 绘制一个小蓝点作为连接点。
ini 复制代码
const drawIcon = (x, y) => {
    if (!ctx) return;
    ctx.setFillStyle('#0000FF');
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.draw(true);
};

4. 清空画布

  • 通过 clearCanvas 清除所有的绘制内容,并重置变量。
ini 复制代码
const clearCanvas = () => {
    if (!ctx) return;
    ctx.setFillStyle('#f8f8f8');
    ctx.fillRect(0, 0, windowWidth, windowHeight);
    ctx.draw();
    lines.value = [];
    hasFirstLine.value = false;
};

总结

本次开发的功能点:

  1. 使用 UniApp 的 canvas 实现触摸绘制。
  2. 绘制完成后,在线条终点显示小蓝点。
  3. 仅允许从小蓝点继续绘制新的线条。
  4. 提供"清空"功能,能够重新开始绘制。

这套方案适用于手势绘制、路径规划等场景,并且可扩展性强,比如增加不同颜色的线条、保存绘制结果等。如果你有进一步的需求,可以基于这套逻辑进行优化和拓展。

希望这篇文章对你有所帮助!🚀

相关推荐
用户479492835691513 分钟前
mcp是怎么和大模型进行交互的,有哪些交互方式
前端·人工智能
凤年徐23 分钟前
解锁网页魔法:零基础HTML通关秘籍
前端·javascript·css·前端框架·html·web
PineappleCoder25 分钟前
防抖 vs 节流:高频事件的 “性能优化双雄” 怎么用?
前端·javascript·面试
小old弟26 分钟前
🤔面试官问你:什么是高阶函数?举例说明用到过的...
前端
是你的小橘呀27 分钟前
从小区广场舞群聊,看懂前端 er 必懂的发布订阅模式
前端
margicCode28 分钟前
0-1搭建项目基本配置(eslint+prettier)到release-it发布
前端
ZzMemory30 分钟前
CSS 命名太乱?BEM 规范帮你一键搞定,代码清爽到飞起!
前端·css·面试
大道小路31 分钟前
Vue3 组件数据传输小全
前端·javascript·vue.js
初辰ge31 分钟前
pCameraH5 v2.0:轻量级 H5 相机插件全新升级,支持拍照、录像与自定义水印
前端·javascript
Mr_Swilder32 分钟前
Chapter 8 Light and Color 光与颜色
前端