intro
画布首先要有基本的画布组件:
WXML 中创建下面的组件
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>
js 中开始作画,如:
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
fillRect(a, b, c, d)其中 a、b 代表 x,y 坐标的位置,c、d 表示长宽
坐标系例子:
<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) {
console.log(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
})
}
})
在 start 中打印出 e,如下结果
可以发现坐标存在 touches 中,而绑定的数据仍然可以从 target 的 dataset 中获取
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于