Vue實現(xiàn)多點涂鴉效果的示例代碼

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

這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)多點涂鴉效果，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以跟隨小編一起學習一下

效果展示

單點效果

多點效果

創(chuàng)建畫布

創(chuàng)建畫布并設置事件處理器

 <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

唯一地識別和觸摸平面接觸的點的值。

這個值在這根手指（或觸摸筆等）所引發(fā)的所有事件中保持一致，直到它離開觸摸平面。

TouchEvent.changedTouches

該屬性返回一個TouchList:

對于 touchstart 事件，這個 TouchList 對象列出在此次事件中新增加的觸點。
對于 touchmove 事件，列出和上一次事件相比較，發(fā)生了變化的觸點。
對于 touchend 事件，changedTouches 是已經(jīng)從觸摸面的離開的觸點的集合（也就是說，手指已經(jīng)離開了屏幕/觸摸面）。

拷貝觸摸點

瀏覽器會復用觸摸點，通過拷貝只記錄差異點和唯一標識符替換引用整個對象的方式進行優(yōu)化

type Point = {
  identifier: number,//觸摸點什么標識
  //觸摸點坐標
  x: number,
  y: number
};

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

查找觸摸點

通過遍歷 activityTouches 數(shù)組來尋找與給定標記相匹配的觸摸點，返回該觸摸點在數(shù)組中的下標。

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

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

跟蹤所有觸摸點以實現(xiàn)多點觸控

//跟蹤當前存在的所有觸摸點
const activityTouches: Point[] = [];

新增觸摸事件

當屏幕上出現(xiàn)新的觸摸點touchstart事件被觸發(fā)，handleStart 函數(shù)被觸發(fā)。此時，要收集記錄觸摸點并在觸摸點處畫圓：

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 事件被觸發(fā)時，從而將調用handleMove() 函數(shù)，此時按照路徑繪制線：

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]));
    }
  }
};

首先遍歷所有發(fā)生移動的觸摸點。通過讀取每個觸摸點的 Touch.identifier 屬性，從緩存中讀取每個觸摸點在變化前的起點。這樣取得每個觸摸點之前位置的坐標，進而進行繪制。

觸摸結束處理

通過調用 handleEnd() 函數(shù)來處理觸摸結束事件：

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 ，首先遍歷所有事件，并讀取緩存。在事件觸發(fā)點畫個圓，然后將對應的觸摸對象從緩存中移除。

其他

移動端和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實現(xiàn)多點涂鴉效果的示例代碼的文章就介紹到這了,更多相關Vue多點涂鴉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue項目中icon亂碼的問題及解決
這篇文章主要介紹了vue項目中icon亂碼的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細,需要的朋友可以參考下
2024-01-01
vue不用window的方式如何刷新當前頁面
這篇文章主要介紹了vue不用window的方式如何刷新當前頁面,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
講解vue-router之什么是嵌套路由
這篇文章主要介紹了講解vue-router之什么是嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue+FormData+axios實現(xiàn)圖片上傳功能
這篇文章主要為大家學習介紹了Vue如何利用FormData和axios實現(xiàn)圖片上傳功能，本文為大家整理了詳細步驟，感興趣的小伙伴可以了解一下
2023-08-08
Vue+abp微信掃碼登錄的實現(xiàn)代碼示例
這篇文章主要介紹了Vue+abp微信掃碼登錄的實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
Vue extend學習示例講解
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-09-09
vue?ElementUI級聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
Vue中比較流行且好用的組件使用示例
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-08-08
Vue3中局部組件和全局組件的使用教程詳解
這篇文章主要為大家學習介紹了Vue3中局部組件和全局組件的使用方法，文中的示例代碼講解詳細，具有一定的借鑒價值，需要的小伙伴可以學習一下
2023-07-07