JavaScript画布复杂形状碰撞

文章/答案/技术大牛

发布

1回答

javascript、html、canvas、collision-detection

我试图用HTML canvas和JavaScript做一个非常简单的游戏。我发现了许多关于检测画布上基本形状(如矩形和圆形)的碰撞的教程和问题。但我想知道是否有可能检测一个复杂的形状(由许多基本形状组成的形状)是否与另一个形状碰撞，或者是否两个复杂的形状正在碰撞。如果是这样，如何做到这一点？提前感谢！

浏览 10提问于2017-06-28得票数 0

1回答

画布中的PNG碰撞感知？

javascript、html、canvas、html5-canvas

我正在用javascript在HTML5画布上做一个platformer游戏。我需要一种方法来感知绘制在画布上的两个奇怪形状的png图像之间的碰撞。我可以用正方形或圆形来做，但这些都是奇怪的形状图像。两个奇怪形状的物体之间的感官碰撞？

浏览 2提问于2011-07-17得票数 3

2回答

不规则形状的碰撞检测

javascript、jquery、html、canvas、collision-detection

我知道如何检查圆与正方形是否即将发生碰撞，也知道如何检测正方形是否即将与正方形发生碰撞，但如何检测多边形与正方形是否即将发生碰撞？有没有办法获得一个形状占用的像素，以及另一个形状占用的像素，并检查其中是否有相同的像素？我希望有一些解决方案，不需要大量的形状具体计算。我正

浏览 3提问于2012-07-07得票数 10

回答已采纳

1回答

如何将物品的位置限制在画布上？

c#、silverlight、algorithm、canvas

当我谈到将对象限制在画布上时，它更像是鼠标剪辑，但是当我在许多线程上阅读时，SL中并不存在这个特性。所以我搜索了一下所有的论坛，得到了这个。但我不能全部复制出来。顺便说一下，这个项目的父项是一个画布。谢谢你以弗所。

浏览 1提问于2010-09-20得票数 1

回答已采纳

1回答

HTML画布中的基元形状库

html、canvas、primitive、shapes

有没有为基本形状提供一些有限功能的库？我试着尝试使用，虽然它有一些令人惊叹的特性，但基本形状不是其中之一。对形状内部的测试是通过像素测试进行的，与光线测试相比，像素测试的速度非常慢。我想矩形和圆是最常用的，我可以为它们创建碰撞检测，但是多边形会变得更复杂。有没有针对这一点的库呢？我知道JQuery有一个，但它似乎是用于HTML元素，而不是画布

浏览 0提问于2011-05-27得票数 3

回答已采纳

1回答

帆布图像与侧面检测的碰撞

javascript、html5-canvas、collision-detection

我正在制作一个网络游戏，我使用HTML5画布和Javascript来构建我的游戏。 function collide(r1, r2)

浏览 11提问于2017-06-30得票数 0

回答已采纳

2回答

画布获取图像的触摸事件

javascript、android、ios、canvas、touch-event

我设计了一个球作为png，并使用以下方法将其绘制在画布上：现在我的问题是我不知道如何接收这个球的触球事件。我在pngs中使用正确的“技术”来构建画布控件吗?还是有更好/更简单的方法？这是我在所有平台(JS、安卓、iOS)上遇到的典型问题，我不知道最好的解决方法。

浏览 2提问于2013-10-03得票数 1

2回答

计算两个碰撞物体的重叠？

javascript、html、canvas

更新：我找到了解释画布每像素碰撞检测的。另一个注

浏览 4提问于2012-07-29得票数 1

回答已采纳

1回答

有在HTML5画布上模糊形状的方法吗？我知道你可以模糊图像，但你能模糊形状吗(比如用context.lineTo()；绘制三角形/多边形)？我知道您可以很容易地使用SVG元素来模糊元素(在这里，我也可以像多边形一样使用复杂的形状)，但幸运的是，Safari没有显示过滤器(阴影使用的是什么)&我正在创建一个仅用于iPad的the应用程序。最佳解决方案将是原生Javascript HTML5画布解决方案，而不是第三方Javascript库

浏览 5提问于2012-01-23得票数 1

1回答

在画布中用闭合Bezier曲线检测鼠标碰撞

javascript、html、algorithm、canvas、bezier

我的处境：我找到了解决这个问题的两种方法： (1)一种方法是在画布上画两次。第一次，每个形状都会被哈希表中的唯一颜色填充。第二次，形状得到他们的真实的颜色和面具在第一层。要检测鼠标<

浏览 9提问于2013-11-28得票数 1

回答已采纳

2回答

画布:鼠标事件

html、events、canvas、mouse

我知道在画布中为特定的圆圈或矩形添加eventhandlers是不可能的。您可以为每个元素创建一个新的画布区域，并将它们彼此放在一起。通过这种方式，您可以为每个区域提供一个事件处理程序。您只有一个画布区域和一个事件处理程序。通过这种方式，您必须进行复杂的数学计算，以确定是否单击了某个特定元素。如果您只有圆形或矩形，此解决方案可能很简单。但是如果你有很多曲线的路径，这个解决方案是相当困难的。我不想使用这些库。

浏览 0提问于2013-03-23得票数 1

4回答

有没有人知道HTML5 Canvas有没有碰撞检测应用程序接口？

html、canvas、collision-detection

我试着找出是否有任何javascript API用于管理画布中的对象，如图像或形状之间的碰撞检测。我认为编写自己的API不是一个好主意，因为可能会有一些很好的API。任何人对此有线索或一些信息。

浏览 0提问于2010-05-18得票数 6

3回答

将外部描边添加到冲突的画布矩形

javascript、canvas

我在画布中添加了多个可能相互碰撞的矩形。外部笔触应该显示在两个矩形的外部部分，或者矩形形状应该合并到一个产生预期结果的形状。见下图 ? 它必须被剪切，因为它将在画布下显示内容。ctx.clearRect(offsetX-50,offsetY+50, w, h); ctx.strokeRect(offsetX-50, offsetY+50, w, h); 有没有办法在不编写复杂的每条路径计算的情况下实现它，因为矩形的碰撞可能是无意的和多样化的？

浏览 37提问于2019-09-11得票数 0

回答已采纳

1回答

猫鼬子文档与种群之间的DIfference及对数据库模式的质疑

mongodb、mongoose、database-schema、population

数据库模式问题场景:用户可以创建许多画布。每个画布都可以容纳许多形状。每个形状可以有两种类型:简单的，或复杂的。简单的形状可以是正方形，也可以是圆形(物体)。复杂的形状是由一个框架和一个材料组成的。，但可以在画布之间移动，也可以单独生活在画布之外。框架和材料可以独立创建(单独生活)，并添加到一个复杂的形状(每个复杂的形状只能有一个框架和一个材料

浏览 0提问于2013-08-11得票数 2

回答已采纳

3回答

KineticJS Container.getIntersections非常慢

canvas、collision-detection、kineticjs、intersection

我需要检测HTML5画布中的碰撞(我使用的是KineticJS库)，到目前为止，我已经使用自己的方法来检测某个点是否在某个形状内。然而，它似乎非常慢，所以当在画布上移动对象并对每个新位置使用该方法时，它变得不可用。有没有人用过这种方法进行碰撞检测？如果没有，在HTML5画布中是否有关于碰撞检测的提示？

浏览 1提问于2012-11-30得票数 2

回答已采纳

2回答

如何使用HMTL5 Javascript画布获得三个形状的交集，碰撞和删除未碰撞的部分？

javascript、html、canvas、html5-canvas、konvajs

我想知道是否有一种使用HMTL5 Javascript画布解决以下问题的标准方法。通过删除没有碰撞的部分，我们最终会得到3个点(至少在视觉上，不确定我的结果是总共3点还是6点)，这是前一个三角形的边缘。根据我搜索的内容，我可以通过使用来检测碰撞区域，然后以某种方式将应用于碰撞的部分，只得到所需的结果。我在这个解决方案中看到的问题是，如果每个形状都是可拖动的，则形状可能会被裁剪，但不会遵循拖动的形状。我的另一个想法是检测和切割碰撞区域

浏览 8提问于2020-11-05得票数 4

回答已采纳

1回答