推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 1442 天前的主题，其中的信息可能已经有所发展或是发生改变。
类似这种：[https://www.jigsawexplorer.com/online-jigsaw-puzzle-player.html?puzzle_id=christmas-peace]
图片该怎么按照拼图图块的形状切割？然后两个图块组合后是怎么变成一体的？
fabricjs 能满足要求吗？求推荐下，能实现这类需求，简单好用的 canvas 库……
我只做过些 h5 小程序这类的，完全没有 canvas 经验……
 |
1
tangshuaibo OP 大佬大佬求出现，给个思路就好🙏
|
 |
2
misdake 2020-12-14 14:55:14 +08:00
## 画每一片：
参考链接： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing https://stackoverflow.com/a/18387192/2244973 如果每一片形状的数量是有限的，或者形状是无规律的： 1. drawImage 画 mask(即描述形状的图片) 2. globalCompositeOperation = 'source-in'; 设置为只允许画在 mask 上 3. drawImage 画图片本体 注意调整画图的 src 位置和 dest 位置 如果每一片形状的数量是非常多且有规律的： 1. 画一个 path，作为形状 2. context.clip(); 设置为只能在范围内画 3. context.drawImage 画图片本体 ## 变成一体 这个没什么特别的吧，判断组合然后依次画上去就行了 在松鼠标的时候，判断一下原图中周围的块是不是真的在旁边，如果在就用并查集连在一起。再拖动的时候，这个集合的块全部一起移动，松开的时候，全部判断新的组合 |
|
3
tangshuaibo OP @misdake 好的，谢谢大佬
|
 |
4
jaxer 2020-12-14 16:14:34 +08:00
成功划水 17min，完成后下面的欢呼人，以为是丧尸
|
 |
5
fengmumu 2020-12-14 16:55:13 +08:00
我想到的实现的话思路大概是这样
每一个拼图都是由核心区域加四周的拼接的接口组成 然后我把图片使用 cavas 分割成多个小块，每个小块之间是有位置关系的， 然后我是不想用 canvas 的，我是想用图片或者 span 来做，毕竟有图片了，有关系了，剩下就是渲染了 然后是否拼接的话 只需要判断 两个拼图的位置关系就行了， 所谓组的关系，其实也就是移动的时候统一移动，给每一个元素都添加就行 不知道说清楚没有，感觉重点在图片的切分，和是否拼好的判断这 你要是要用 canvs 可以用 konva,他有幕布和组的概念。拼好的放到一个组就行了，这个其实你也可以自己做的 ps: canvas 想要玩的好，线性代数跑不了 |
 |
6
yzqtdu 2020-12-14 17:30:13 +08:00  1
楼主可以看看这篇文章，基本能解决你的问题
https://www.codeproject.com/Articles/395453/Html5-Jigsaw-Puzzle |
 |
7
jorneyr 2020-12-14 18:29:33 +08:00
图片都是矩形的，看到不规则的形状是因为颜色透明的原因。
给每种图片一个类型，上下左右能衔接的图片的类型也是固定匹配的。 |
|
8
tangshuaibo OP @jaxer 什么意思？
|
|
9
tangshuaibo OP @fengmumu 谢谢大佬
|
|
10
tangshuaibo OP @yzqtdu 谢谢大佬
|
|
11
tangshuaibo OP @jorneyr 谢谢大佬
|
 |
12
M3oM3oBug 2020-12-14 21:09:25 +08:00 via iPhone
用 Canvas 完全可以做，楼上也说了 konva 和解决思路，我也有一套自己的解决方案有点类似 konva 也可以做，不过话说考虑外包给我吗哈哈
|
Select Language