小编Pro*_*ter的帖子

如何使用HMTL5 Javascript Canvas获得碰撞的三个形状的交集并删除未碰撞的部分?

我最近在这里专门针对 KonvaJs 发布了一个类似的问题,但是,我没有得到任何答案,并想直接进入 KonvaJs 使用的根源。我想知道是否有使用 HMTL5 Javascript Canvas 解决以下问题的标准方法。

如果给我 3 个圆圈并将它们定位为原色圆圈(3 个圆圈彼此相交),是否有一个功能可以帮助我删除不与任何东西碰撞的部分并只保留相交的部分?

另一个示例可能是以形成三角形的方式绘制三条线。通过删除没有碰撞的部分,我们最终会得到 3 个点(至少在视觉上,不确定我最终是总共得到 3 个还是堆叠起来得到 6 个),它们是前一个三角形的边缘。

根据我搜索的内容,我可以通过使用命中区域来检测碰撞区域,然后以某种方式在碰撞的部分上应用剪辑功能,以仅获得所需的结果。我在这个解决方案中看到的问题是,如果每个形状都是可拖动的,则形状可能会被剪裁,但不会跟随拖动的形状。

我的另一个想法是检测并切割碰撞区域,然后删除没有碰撞的区域,然后将它们组合在一起。(我不知道怎么把它们切成小块……)

我不确定上面提到的任何想法是否是解决它的正确/最佳方法......

html javascript canvas html5-canvas konvajs

4
推荐指数
1
解决办法
117
查看次数

标签 统计

canvas ×1

html ×1

html5-canvas ×1

javascript ×1

konvajs ×1