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

• 主 資深大佬 : 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 也可以做，不过话说考虑外包给我吗哈哈