Documentation de développement de l'applet WeChat
/ 微信小程序API coordinates(Canvas 坐標(biāo)系)
微信小程序API coordinates(Canvas 坐標(biāo)系)
Canvas 坐標(biāo)系
canvas 是在一個二維的網(wǎng)格當(dāng)中。
左上角的坐標(biāo)為(0, 0)
。
在之前的章節(jié),我們用了這個方法 fillRect(0, 0, 150, 75)
。
它的含義為:從左上角(0, 0)
開始,畫一個150 x 75
px 的矩形。
坐標(biāo)系例子:
我們可以在 <canvas/>
中加上一些事件,來觀測它的坐標(biāo)系
<canvas canvas-id="myCanvas" style="margin: 5px; border:1px solid #d3d3d3;" bindtouchstart="start" bindtouchmove="move" bindtouchend="end"/> <view hidden="{{hidden}}"> Coordinates: ({{x}}, {{y}}) </view>
Page({ data: { x: 0, y: 0, hidden: true }, start: function(e) { this.setData({ hidden: false, x: e.touches[0].x, y: e.touches[0].y }) }, move: function(e) { this.setData({ x: e.touches[0].x, y: e.touches[0].y }) }, end: function(e) { this.setData({ hidden: true }) } })
當(dāng)你把手指放到 canvas 中,就會在下邊顯示出觸碰點的坐標(biāo):