小程序模板網(wǎng)

微信小程序小技巧系列《十一》canvas中的save和restore,view使用bindtap傳值 ...

發(fā)布時間:2018-02-06 16:45 所屬欄目:小程序開發(fā)教程
 
一:canvas中的save和restore
 

一直以來沒有特別明白canvas中的save()和restore()函數(shù),這次終于通過微信小程序中使用此函數(shù)的時候弄明白了,以下代碼可以運行在微信小程序中~~

看效果:

代碼:

const ctx = wx.createCanvasContext('canvas')
ctx.save() 
ctx.setFillStyle('red') 
ctx.scale(2, 2)
ctx.fillRect(10, 10, 150, 100)  // 紅色矩形一
ctx.restore()
ctx.fillRect(50, 50, 150, 100)  // 黑色矩形二
ctx.draw()

通過以上代碼,發(fā)現(xiàn)兩個疑點:

  • 明明寫了填充red,為什么對黑色矩形二沒有影響?
  • 明明scale為兩倍,為什么對黑色矩形二沒有放大?

通過這個現(xiàn)象可以得出結(jié)論:

  • save表示保存save函數(shù)之前的狀態(tài),restore表示獲取save保存的狀態(tài)
  • save保存的是:scale默認(rèn)是1,fullstyle默認(rèn)是黑色;而scale為2和fullstyle為red并不屬于save了,因為它們是save函數(shù)之后發(fā)生的改變
  • save和restore之間寫了很多狀態(tài)改變,但是僅對紅色矩形一有作用,而對于矩形二,由于它寫在restore函數(shù)后面,所以它使用的是save保存的狀態(tài)

 

二:view使用bindtap傳值問題

分享者:王慧永

如圖,view標(biāo)簽 加 bindtap事件,用data-name傳值,如果view中只有文字,點擊整個view區(qū)域都可以接收到data-name的值,如果view里面加一個lable標(biāo)簽,那么點擊lable包裹的區(qū)域,data-name取不到值。  解決方法:把取值方式  由e.target.dataset.carrierName  修改為e.currentTarget.dataset.carrierName即可



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