手機(jī)端寫字板、畫板vue組件

mengera88 發(fā)布于2019-08-26 13:27 / 3550人閱讀

摘要：一個簡單的寫字板畫板組件由于項(xiàng)目需求目前只提供清空功能代碼及使用引入組件使用組件，可以放在一個自定義樣式的中屏兼容畫布大小放大倍數(shù)，筆觸顏色筆觸寬度，筆觸陰影大小，清空自定義清空按鈕，調(diào)用組件方法清空畫布開發(fā)筆記需要兼容屏一倍圖模糊

一個簡單的canvas寫字板、畫板vue組件,由于項(xiàng)目需求目前只提供清空功能
代碼及demo

使用

1.引入組件

import draw from "./inDraw/index"

  components: {
    draw,
  },

2.使用組件，可以放在一個自定義樣式的div中

                        
        
        清空

3.自定義清空按鈕，調(diào)用組件方法inDeleteCanvas清空畫布

  methods: {
      drawDelete(){
        this.$refs["in-draw"].inDeleteCanvas()
      },
  }

開發(fā)筆記

1.需要兼容retina屏一倍圖模糊的問題，將畫布大小設(shè)置為canvas元素的2或3倍

  //this.inRatio=3;
  let canvasDom=this.$refs["in-draw-canvas"];
  this.inCanvasBound = canvasDom.getBoundingClientRect();
  canvasDom.width=this.inCanvasBound.width*this.inRatio;
  canvasDom.height=this.inCanvasBound.height*this.inRatio;

  this.inCtx.lineWidth=10*this.inRatio;

2.筆觸鋸齒問題，設(shè)置陰影

   this.inCtx.shadowBlur = 5;
   this.inCtx.shadowColor = "#000";

3.適應(yīng)需求在不同位置的畫布，筆觸實(shí)際位置為當(dāng)前坐標(biāo)減去畫布位置

   let x=(e.changedTouches[0].pageX - this.inCanvasBound.left + 0.5)*this.inRatio;
   let y=(e.changedTouches[0].pageY- this.inCanvasBound.top + 0.5)*this.inRatio;

GPU云服務(wù)器云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108847.html

相關(guān)文章

Canvas畫板---手機(jī)上也可以用的畫板

摘要：方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細(xì)的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。我們可以用來監(jiān)聽三種狀態(tài)。學(xué)習(xí)制作畫板之前，我們先來了解一下canvas標(biāo)簽一.canvas標(biāo)簽 1.canvas標(biāo)簽與img標(biāo)簽相似，但是canvas標(biāo)簽是一個閉合標(biāo)簽，并且沒有src alt屬性2.canvas標(biāo)簽有兩個屬性，width，height。我們在頁面上用c...

oogh 2019-08-22 13:51 評論0 收藏0
Canvas畫板---手機(jī)上也可以用的畫板

摘要：方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細(xì)的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。我們可以用來監(jiān)聽三種狀態(tài)。學(xué)習(xí)制作畫板之前，我們先來了解一下canvas標(biāo)簽一.canvas標(biāo)簽 1.canvas標(biāo)簽與img標(biāo)簽相似，但是canvas標(biāo)簽是一個閉合標(biāo)簽，并且沒有src alt屬性2.canvas標(biāo)簽有兩個屬性，width，height。我們在頁面上用c...

ernest.wang 2019-08-29 14:14 評論0 收藏0
vue.js實(shí)現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實(shí)現(xiàn)一個簡單的這樣打字的效果，如下你可以狠狠點(diǎn)擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時(shí)器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。在網(wǎng)上看到一個這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 評論0 收藏0
vue.js實(shí)現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實(shí)現(xiàn)一個簡單的這樣打字的效果，如下你可以狠狠點(diǎn)擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時(shí)器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。在網(wǎng)上看到一個這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 評論0 收藏0
vue.js實(shí)現(xiàn)一個會動的簡歷(包含底部導(dǎo)航功能，編輯功能,添加了用戶自定義寫字速度功能)

摘要：好了，讓我們來實(shí)現(xiàn)一個簡單的這樣打字的效果，如下你可以狠狠點(diǎn)擊此處具體示例查看效果。接下來分析如何暫停動畫和繼續(xù)動畫，很簡單，就是清除定時(shí)器，然后重新調(diào)用即可。如何讓編輯的代碼生效呢，這就需要用到自定義事件事件修飾符，自行查看官網(wǎng)。在網(wǎng)上看到一個這樣的網(wǎng)站，STRML它的效果看著十分有趣,如下圖所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 評論0 收藏0