约束在一个三角形内

我正在寻找一个通用的代码（JavaScript），这将与jQuery UI的工作，约束一个三角形内的div的移动（拖动）。约束在一个三角形内

类似于这个（但是一个三角形，而不是一个圆圈）。

我宁愿被定义为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节点。

来源

2011-12-21 lukemh

我不认为jQuery UI的遏制允许除正方形之外的任何东西。 – Duopixel 2011-12-21 15:01:01

@Duopixel实际上这可以通过使用'拖'事件。我会在下面给出答案。 – 2013-04-21 15:29:53

参见this answer其示出了如何以限制可拖动到任意路径一个jquery。

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

来源

2013-04-21 15:30:59

此链接是关于确定点是否位于三角形内的文章，它包括您可以插入事件的示例代码。

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

来源

2011-12-21 00:53:24 CBusBus

这是通用的，但我想不解释如何测试与拉斐尔svg三角形的边界。 – lukemh 2011-12-21 01:09:12

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

我认为这里的关键不在于关注“三角”方面，更重要的是要认识到三角形是一个多边形。这使我们可以使用许多与点和多边形相关的现有算法来正视这个问题。

这个2D图库JavaScript 2D Graph Library提供了我们需要的所有工具来解决这个问题。主要地，每个式样具有相关联的功能约束这将经由线段一个连接到形状的重心约束一个点方式的形状的内部区域（边缘包括）。（它也像你可以设置中心点为形状因为这将证明得心应手凹多边形的第二个参数。）

本的jsfiddle Triangle Constraint via jQuery UI Draggable使用jQuery UI的可拖动阻力回调与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; 
    } 
});

干杯！

来源

2016-09-17 16:02:36 Borgboy

约束在一个三角形内

回答

相关问题