手機端寫字板、畫板vue組件

mengera88 發布于2019-08-26 13:27 / 3545人閱讀

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

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

使用

1.引入組件

import draw from "./inDraw/index"

  components: {
    draw,
  },

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

                        
        
        清空

3.自定義清空按鈕，調用組件方法inDeleteCanvas清空畫布

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

開發筆記

1.需要兼容retina屏一倍圖模糊的問題，將畫布大小設置為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.筆觸鋸齒問題，設置陰影

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

3.適應需求在不同位置的畫布，筆觸實際位置為當前坐標減去畫布位置

   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云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108847.html

Canvas畫板---手機上也可以用的畫板

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

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

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

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

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

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

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

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

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

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