限制在一个三角形内

我正在寻找一个通用的代码片段（javascript），它可以与jquery UI一起使用来约束三角形内div的移动（拖动）。

与此类似（http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle）但是是三角形，而不是圆形。

我更喜欢将三角形定义为像这样的rapheal svg ……

(function() { Raphael.fn.triangle = function (cx, cy, r) { r *= 1.75; return this.path("M".concat(cx, ",", cy, "m0-", r * .58, "l", r * .5, ",", r * .87, "-", r, ",0z")); }; var paper = Raphael(document.getElementById("triangle"), "100%", "100%"); var triangle = paper.triangle(100,100,90); triangle.attr("fill", "#444444"); triangle.attr("stroke", "#444444"); $( "#draggable" ).draggable({ containment: "#triangle svgnode", scroll: false }); 

期待解决方案。

我想要指出，如果更容易，可拖动元素也可以是svg节点。

Answer 1

请参阅此答案 ，其中显示了如何将可拖动的jquery约束到任意路径。

诀窍是改变drag事件中的ui.position变量，以约束移动。

Answer 2

此链接是关于确定点是否在三角形内的主题的文章，它包括您将能够插入事件的示例代码。

http://www.blackpawn.com/texts/pointinpoly/default.html

Answer 3

由于没有给出的答案实际上显示如何将可拖动的约束限制为三角形区域，我想我会分享这个jsfiddle，它演示了一个实际的工作示例。

我认为这里的关键不是如此关注“三角”方面，更重要的是要实现三角形是一个多边形。 这使我们能够使用许多与点和多边形相关的现有算法来正面解决问题。

这个2D图形库JavaScript 2D图形库提供了解决此问题所需的所有工具。 主要地，每个Shape具有相关的函数约束 ，其将通过连接到Shape的质心的LineSegment将Point约束到Shape的内部区域（包括边缘）。 （看起来你也可以将Shape的中心点设置为第二个参数，这对于凹入的Polygon来说非常方便。）

这个jsFiddle Triangle Constraint通过jQuery UI Draggable使用jQuery UI Draggable 拖动回调和Graph库来进行约束。 它实际上使用SVG多边形的坐标来构造图形多边形，仅反转y轴以在屏幕和笛卡尔坐标之间切换。

在文档就绪中进行的设置非常简单：

 var points = $('polygon').attr('points').trim().split(' ').map(function(vertex) { var coordinates = vertex.split(','); return new aw.Graph.Point(Number(coordinates[0]), Number(-coordinates[1])); }), triangle = new aw.Graph.Polygon(points); $('.map-selector').draggable({ containment: '.map', drag: function (event, ui) { var left = ui.position.left, top = -ui.position.top; var constrained = triangle.constrain(new aw.Graph.Point(left, top)); ui.position.left = constrained.x; ui.position.top = -constrained.y; } }); 

干杯!