小程序模板網

微信小程序canvas組件簡單運用之涂鴉

發(fā)布時間:2018-04-08 10:50 所屬欄目:小程序開發(fā)教程
<view class="container">

    <!--畫布區(qū)域-->

    <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>

    <!--畫布工具區(qū)域-->

    <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>

手指滑動代碼
//手指觸摸動作開始

  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);  //把路徑移動到畫布中的指定點,但不創(chuàng)建線條

        this.context.lineTo(startX1,startY1);  //添加一個新點,然后在畫布中創(chuàng)建從該點到最后指定點的線條

        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() // 獲取繪圖動作數組

      })

  }


以上是一部分代碼展示,下面做核心原理說明:
1、能畫出不同顏色的線條 主要是以下三個方法 setStrokeStyle(畫筆的顏色) moveTo(把路徑移動到畫布中的指定點,但不創(chuàng)建線條) lineTo(添加一個新點,然后在畫布中創(chuàng)建從該點到最后指定點的線條) 這樣就可以從A點坐標到B點坐標 畫出不同顏色的線條啦?。?!
2、橡皮擦的原理:之所以能擦掉畫布上的圖像就是通過把要擦掉的區(qū)域繪制成與畫布一樣的顏色 這樣就可以”欺騙”自己的眼睛 達到橡皮擦的效果啦?。?!
e7407830490746f6ae16b3418f2f7710.gif


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23133.html 復制鏈接 如需定制請聯系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢