怎么在微信小程序中實現一個涂鴉功能

這篇文章將為大家詳細講解有關怎么在微信小程序中實現一個涂鴉功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

布局文件index.wxml：

<view class="container">
  <!--畫布區域-->
  <view class="canvas_area">
    <!--注意：同一頁面中的 canvas-id 不可重復，如果使用一個已經出現過的 canvas-id，該 canvas 標簽對應的畫布將被隱藏并不再正常工作-->
    <canvas canvas-id="myCanvas" class="myCanvas"
      disable-scroll="false"
      bindtouchstart="touchStart"
      bindtouchmove="touchMove"
      bindtouchend="touchEnd">
    </canvas>
  </view>
  <!--畫布工具區域-->
  <view class="canvas_tools">
    <view class="box box1" bindtap="penSelect" data-param="5"></view>
    <view class="box box2" bindtap="penSelect" data-param="15"></view>
    <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
    <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
    <view class="box box5" bindtap="clearCanvas"></view>
  </view>
</view>

邏輯功能文件index.js：

Page({
 data:{
  pen : 3, //畫筆粗細默認值
  color : '#cc0033' //畫筆顏色默認值
 },
 startX: 0, //保存X坐標軸變量
 startY: 0, //保存X坐標軸變量
 isClear : false, //是否啟用橡皮擦標記
 //手指觸摸動作開始
 touchStart: function (e) {
   //得到觸摸點的坐標
   this.startX = e.changedTouches[0].x
   this.startY = e.changedTouches[0].y
   this.context = wx.createContext()
   if(this.isClear){ //判斷是否啟用的橡皮擦功能 ture表示清除 false表示畫畫
     this.context.setStrokeStyle('#F8F8F8') //設置線條樣式 此處設置為畫布的背景顏色 橡皮擦原理就是：利用擦過的地方被填充為畫布的背景顏色一致 從而達到橡皮擦的效果 
     this.context.setLineCap('round') //設置線條端點的樣式
     this.context.setLineJoin('round') //設置兩線相交處的樣式
     this.context.setLineWidth(20) //設置線條寬度
     this.context.save(); //保存當前坐標軸的縮放、旋轉、平移信息
     this.context.beginPath() //開始一個路徑 
     this.context.arc(this.startX,this.startY,5,0,2*Math.PI,true); //添加一個弧形路徑到當前路徑，順時針繪制 這里總共畫了360度 也就是一個圓形 
     this.context.fill(); //對當前路徑進行填充
     this.context.restore(); //恢復之前保存過的坐標軸的縮放、旋轉、平移信息
   }else{
     this.context.setStrokeStyle(this.data.color)
     this.context.setLineWidth(this.data.pen)
     this.context.setLineCap('round') // 讓線條圓潤 
     this.context.beginPath()
   }
 },
 //手指觸摸后移動
 touchMove: function (e) {
   var startX1 = e.changedTouches[0].x
   var startY1 = e.changedTouches[0].y
   if(this.isClear){ //判斷是否啟用的橡皮擦功能 ture表示清除 false表示畫畫
    this.context.save(); //保存當前坐標軸的縮放、旋轉、平移信息
    this.context.moveTo(this.startX,this.startY); //把路徑移動到畫布中的指定點，但不創建線條
    this.context.lineTo(startX1,startY1); //添加一個新點，然后在畫布中創建從該點到最后指定點的線條
    this.context.stroke(); //對當前路徑進行描邊
    this.context.restore() //恢復之前保存過的坐標軸的縮放、旋轉、平移信息
    this.startX = startX1;
    this.startY = startY1;
   }else{
    this.context.moveTo(this.startX, this.startY)
    this.context.lineTo(startX1, startY1)
    this.context.stroke()
    this.startX = startX1;
    this.startY = startY1;
   }
   //只是一個記錄方法調用的容器，用于生成記錄繪制行為的actions數組。context跟<canvas/>不存在對應關系，一個context生成畫布的繪制動作數組可以應用于多個<canvas/>
   wx.drawCanvas({
     canvasId: 'myCanvas',
     reserve: true,
     actions: this.context.getActions() // 獲取繪圖動作數組
   })
 },
 //手指觸摸動作結束
 touchEnd: function () {
 },
 //啟動橡皮擦方法
 clearCanvas: function(){
   if(this.isClear){
    this.isClear = false;
   }else{
    this.isClear = true;
   }
 },
 penSelect: function(e){ //更改畫筆大小的方法
  console.log(e.currentTarget);
  this.setData({pen:parseInt(e.currentTarget.dataset.param)});
  this.isClear = false;
 },
 colorSelect: function(e){ //更改畫筆顏色的方法
  console.log(e.currentTarget);
  this.setData({color:e.currentTarget.dataset.param});
  this.isClear = false;
 }
})

關于怎么在微信小程序中實現一個涂鴉功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。