Question

我正在寻找一个通用的代码片段（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

参见this answer，其中显示了如何将可拖动的jquery约束到任意路径。

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

Answer 2

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

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

Answer 3

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

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

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

这个jsFiddle Triangle Constraint via jQuery UI Draggable使用jQuery UI Draggable drag 回调与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;
    }
});

干杯！

限制在一个三角形内

3 个答案: