大佬们，这种切割加拼图的功能该怎么实现啊

[tangshuaibo]

类似这种：[https://www.jigsawexplorer.com/online-jigsaw-puzzle-player.html?puzzle_id=christmas-peace]

图片该怎么按照拼图图块的形状切割？然后两个图块组合后是怎么变成一体的？

fabricjs 能满足要求吗？求推荐下，能实现这类需求，简单好用的 canvas 库……

我只做过些 h5 小程序这类的，完全没有 canvas 经验……

[tangshuaibo]

大佬大佬求出现，给个思路就好🙏

[misdake]

## 画每一片：

参考链接：
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 画图片本体

## 变成一体
这个没什么特别的吧，判断组合然后依次画上去就行了
在松鼠标的时候，判断一下原图中周围的块是不是真的在旁边，如果在就用并查集连在一起。再拖动的时候，这个集合的块全部一起移动，松开的时候，全部判断新的组合

[tangshuaibo]

@misdake 好的，谢谢大佬

[jaxer]

成功划水 17min，完成后下面的欢呼人，以为是丧尸

[fengmumu]

我想到的实现的话思路大概是这样
每一个拼图都是由核心区域加四周的拼接的接口组成
然后我把图片使用 cavas 分割成多个小块，每个小块之间是有位置关系的，
然后我是不想用 canvas 的，我是想用图片或者 span 来做，毕竟有图片了，有关系了，剩下就是渲染了
然后是否拼接的话 只需要判断 两个拼图的位置关系就行了，
所谓组的关系，其实也就是移动的时候统一移动，给每一个元素都添加就行

不知道说清楚没有，感觉重点在图片的切分，和是否拼好的判断这
你要是要用 canvs 可以用 konva,他有幕布和组的概念。拼好的放到一个组就行了，这个其实你也可以自己做的

ps: canvas 想要玩的好，线性代数跑不了

[yzqtdu]

楼主可以看看这篇文章，基本能解决你的问题
https://www.codeproject.com/Articles/395453/Html5-Jigsaw-Puzzle

[jorneyr]

图片都是矩形的，看到不规则的形状是因为颜色透明的原因。
给每种图片一个类型，上下左右能衔接的图片的类型也是固定匹配的。

[tangshuaibo]

@jaxer 什么意思？

[tangshuaibo]

@fengmumu 谢谢大佬

[tangshuaibo]

@yzqtdu 谢谢大佬

[tangshuaibo]

@jorneyr 谢谢大佬

[M3oM3oBug]

用 Canvas 完全可以做，楼上也说了 konva 和解决思路，我也有一套自己的解决方案有点类似 konva 也可以做，不过话说考虑外包给我吗哈哈