微信小程式實現的塗鴉功能樣本【附源碼下載】，小程式源碼下載

小程式實現的塗鴉功能樣本【附源碼下載】，小程式源碼下載

本文執行個體講述了小程式實現的塗鴉功能。分享給大家供大家參考，具體如下：

先來看看運行效果：

布局檔案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; }})

附：完整執行個體代碼點擊此處本站下載。

希望本文所述對大家小程式開發有所協助。