Vue实现多点涂鸦效果的示例代码

更新时间：2023年03月28日 09:34:29 作者：白瑞德

这篇文章主要为大家详细介绍了如何利用Vue实现多点涂鸦效果，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编一起学习一下

效果展示

单点效果

多点效果

创建画布

创建画布并设置事件处理器

 <canvas
    ref="board"
    style="background-color: #2b2d42"
    width="1000"
    height="1000"
    @touchstart="handleStart"
    @touchmove="handleMove"
    @touchend="handleEnd"
  />

获取画布并初始化画笔信息

onMounted(() => {
  initPointer();
});

const board = ref();
const cxt = ref();
const lineWidth = 4;

const initPointer = () => {
  cxt.value = board.value.getContext('2d');
  window.MeApi?.mainWindowLoaded();
  cxt.value.strokeStyle = 'red';
  cxt.value.fillStyle = 'red';
  cxt.value.lineWidth = lineWidth;
};

触摸事件处理

基础知识

Touch.identifier

唯一地识别和触摸平面接触的点的值。

这个值在这根手指（或触摸笔等）所引发的所有事件中保持一致，直到它离开触摸平面。

TouchEvent.changedTouches

该属性返回一个TouchList:

对于 touchstart 事件，这个 TouchList 对象列出在此次事件中新增加的触点。
对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。
对于 touchend 事件，changedTouches 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。

拷贝触摸点

浏览器会复用触摸点，通过拷贝只记录差异点和唯一标识符替换引用整个对象的方式进行优化

type Point = {
  identifier: number,//触摸点什么标识
  //触摸点坐标
  x: number,
  y: number
};

const copyTouch = (touch: Touch) => {
  return {
    identifier: touch.identifier,
    x: touch.pageX,
    y: touch.pageY
  };
};

查找触摸点

通过遍历 activityTouches 数组来寻找与给定标记相匹配的触摸点，返回该触摸点在数组中的下标。

const activityTouchIndexById = (idToFind: number) => {
  for (let i = 0; i < activityTouches.length; i++) {
    const id = activityTouches[i].identifier;

    if (id === idToFind) {
      return i;
    }
  }
  return -1;
};

跟踪所有触摸点以实现多点触控

//跟踪当前存在的所有触摸点
const activityTouches: Point[] = [];

新增触摸事件

当屏幕上出现新的触摸点touchstart事件被触发，handleStart 函数被触发。此时，要收集记录触摸点并在触摸点处画圆：

const handleStart = (evt: TouchEvent) => {
  //获取所有新增的点
  const touches = evt.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    //收集触摸点
    activityTouches.push(copyTouch(touches[i]));
    //画圆
    cxt.value.beginPath();
    drawCircle(touches[i].clientX, touches[i].clientY)
  }
};

触摸移动时

当 touchmove 事件被触发时，从而将调用handleMove() 函数，此时按照路径绘制线：

const handleMove = (evt: TouchEvent) => {
  evt.preventDefault();
  const touches = evt.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    const indexById = activityTouchIndexById(touches[i].identifier);
    if (indexById >= 0) {
      cxt.value.beginPath();
      cxt.value.moveTo(activityTouches[indexById].x, activityTouches[indexById].y);
      cxt.value.lineTo(touches[i].clientX, touches[i].pageY);
      cxt.value.stroke();
      //更新缓存信息
      activityTouches.splice(indexById, 1, copyTouch(touches[i]));
    }
  }
};

首先遍历所有发生移动的触摸点。通过读取每个触摸点的 Touch.identifier 属性，从缓存中读取每个触摸点在变化前的起点。这样取得每个触摸点之前位置的坐标，进而进行绘制。

触摸结束处理

通过调用 handleEnd() 函数来处理触摸结束事件：

const handleEnd = (evt: TouchEvent) => {
  evt.preventDefault();
  const touches = evt.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    const indexById = activityTouchIndexById(touches[i].identifier);
    if (indexById >= 0) {
      cxt.value.beginPath();
      cxt.value.moveTo(activityTouches[indexById].x, activityTouches[indexById].y);
      cxt.value.lineTo(touches[i].clientX, touches[i].clientY);
      drawCircle(touches[i].clientX, touches[i].clientY)
      //移除缓存
      activityTouches.splice(indexById, 1);
    }
  }
};

类似handleMove ，首先遍历所有事件，并读取缓存。在事件触发点画个圆，然后将对应的触摸对象从缓存中移除。

其他

移动端和PC端所对应的时间不同。详情可见鼠标事件和触摸事件文档。

移动端的触摸点信息被封装在Touch中，通过Touch.clientX 和Touch.clientX 读取当前坐标

移动端的触摸点信息被封装在MouseEvent中

完整代码

<template>
  <canvas
    ref="board"
    style="background-color: #2b2d42"
    width="1000"
    height="1000"
    @touchstart="handleStart"
    @touchmove="handleMove"
    @touchend="handleEnd"
  ></canvas>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
const board = ref();
const cxt = ref();
const lineWidth = 4;


onMounted(() => {
  initPointer();
});

const initPointer = () => {
  cxt.value = board.value.getContext('2d');
  window.MeApi?.mainWindowLoaded();
  cxt.value.strokeStyle = 'red';
  cxt.value.fillStyle = 'red';
  cxt.value.lineWidth = lineWidth;
};

type Point = {
  identifier: number,
  x: number,
  y: number
};

const activityTouches: Point[] = [];

const copyTouch = (touch: Touch) => {
  return {
    identifier: touch.identifier,
    x: touch.pageX,
    y: touch.pageY
  };
};

const activityTouchIndexById = (idToFind: number) => {
  for (let i = 0; i < activityTouches.length; i++) {
    const id = activityTouches[i].identifier;

    if (id === idToFind) {
      return i;
    }
  }
  return -1;
};

const handleStart = (evt: TouchEvent) => {
  const touches = evt.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    activityTouches.push(copyTouch(touches[i]));
    cxt.value.beginPath();
    drawCircle(touches[i].clientX, touches[i].clientY)
  }
};

const handleMove = (evt: TouchEvent) => {
  evt.preventDefault();
  const touches = evt.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    const indexById = activityTouchIndexById(touches[i].identifier);
    if (indexById >= 0) {
      cxt.value.beginPath();
      cxt.value.moveTo(activityTouches[indexById].x, activityTouches[indexById].y);
      cxt.value.lineTo(touches[i].clientX, touches[i].pageY);
      cxt.value.stroke();
      activityTouches.splice(indexById, 1, copyTouch(touches[i]));
    }
  }
};

const handleEnd = (evt: TouchEvent) => {
  evt.preventDefault();
  const touches = evt.changedTouches;
  for (let i = 0; i < touches.length; i++) {
    const indexById = activityTouchIndexById(touches[i].identifier);
    if (indexById >= 0) {
      cxt.value.beginPath();
      cxt.value.moveTo(activityTouches[indexById].x, activityTouches[indexById].y);
      cxt.value.lineTo(touches[i].clientX, touches[i].clientY);
      drawCircle(touches[i].clientX, touches[i].clientY)
      activityTouches.splice(indexById, 1);
    }
  }
};

const drawCircle = (x:number,y:number) => {
  cxt.value.arc(x, y, lineWidth / 2, 0, 2 * Math.PI, false);
  cxt.value.fill();
}

</script>

到此这篇关于Vue实现多点涂鸦效果的示例代码的文章就介绍到这了,更多相关Vue多点涂鸦内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue 实现列表动态添加和删除的两种方法小结
今天小编就为大家分享一篇Vue 实现列表动态添加和删除的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3中的createGlobalState用法及示例详解
createGlobalState 是 Vue 3 中一种管理全局状态的简便方式,通常用于管理多个组件间共享的状态,由 @vueuse/core 提供的,允许创建一个响应式的全局状态,本文给大家介绍了Vue3中的createGlobalState用法及示例,需要的朋友可以参考下
2024-10-10
vue3封装轮播图组件功能的完整步骤
我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下
2022-11-11
vue如何实现Json格式数据展示
这篇文章主要介绍了vue如何实现Json格式数据展示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue模拟响应式原理底层代码实现的示例
最近去面试的人都会有这个体会,去年面试官只问我怎么用vue,今年开始问我vue响应式原理，本文就详细的介绍一下
2021-08-08
Vue3警告:Failed to resolve component:XXX的详细解决办法
最近在一个vue3项目中遇到了报错,整理了些解决办法,这篇文章主要给大家介绍了关于Vue3警告:Failed to resolve component:XXX的详细解决办法,文中介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue项目实现自定义滑块过渡效果
这篇文章主要介绍了vue项目实现自定义滑块过渡效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue里如何主动销毁keep-alive缓存的组件
这篇文章主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vxe-table中vxe-grid(高级表格)的使用方法举例
vxe-table是一个基于vue的表格组件,下面这篇文章主要给大家介绍了关于vxe-table中vxe-grid(高级表格)的使用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-05-05
详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法，对此知识点有需要的朋友可以跟着学习下。
2018-05-05