小程序
小游戏
企业微信
微信支付
扫描小程序码分享
想做一个拼图游戏的小程序，现在我使用了CANVAS来绘制拼图的碎片（比方说分成9个碎片就用了9个CANVAS）。
现在我拖拽碎片到两个相邻的碎片位置拼合时，能不能实现将两个CANVAS拼接到一起，后面点击拖拽这两个碎片中任意一个时，都能一起移动呢？
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
用CANVAS感觉好复杂，之前用其他方法实现过
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
为啥搞9个，你在1个canvas上都画了不就结了
CANVAS够呛，你可以试试下面的，具体参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
wxml：
<movable-area style="height: 200px; width: 200px;"> <movable-view wx:for="{{positions}}" wx:key="id" style="height: 40px; width: 40px; background-color: red;" x="{{item.x}}" y="{{item.y}}" direction="all"> </movable-view> </movable-area>
js：
Page({ data: { positions: [ { x: 0, y: 0, id: 1 }, { x: 40, y: 0, id: 2 }, { x: 80, y: 0, id: 3 }, { x: 0, y: 40, id: 4 }, { x: 40, y: 40, id: 5 }, { x: 80, y: 40, id: 6 }, { x: 0, y: 80, id: 7 }, { x: 40, y: 80, id: 8 }, { x: 80, y: 80, id: 9 } ] } });
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
用CANVAS感觉好复杂，之前用其他方法实现过
为啥搞9个，你在1个canvas上都画了不就结了
CANVAS够呛，你可以试试下面的，具体参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
wxml：
<movable-area style="height: 200px; width: 200px;"> <movable-view wx:for="{{positions}}" wx:key="id" style="height: 40px; width: 40px; background-color: red;" x="{{item.x}}" y="{{item.y}}" direction="all"> </movable-view> </movable-area>js：
Page({ data: { positions: [ { x: 0, y: 0, id: 1 }, { x: 40, y: 0, id: 2 }, { x: 80, y: 0, id: 3 }, { x: 0, y: 40, id: 4 }, { x: 40, y: 40, id: 5 }, { x: 80, y: 40, id: 6 }, { x: 0, y: 80, id: 7 }, { x: 40, y: 80, id: 8 }, { x: 80, y: 80, id: 9 } ] } });