我有一个带有三角形图像作为背景的 div（当然是矩形）。我想在三角形内移动一个圆圈的图像。
我选择使用 JQuery UI 的可拖动，但我无法将可拖动图像限制在三角形内。
我认为我应该将 containment 选项与数组一起使用，但我无法定义具有两个坐标的三角形。
然后我发现了这个话题：constrain within a triangle
答案很好，但它使用的是正弦曲线，我不知道如何将三角形定义为使用路径。
任何人都可以帮助我如何将圆的运动限制在三角形上？
【问题讨论】：
我的一个朋友想出了一个非常简单又不错的解决方案：see it
$( "#circle" ).draggable({
drag: function(e, ui) {
var width = $('#triangle').width();
var height = $('#triangle').height();
var x = ui.position.left + $(this).width() / 2;
var y = ui.position.top + $(this).height() / 2;
var difference = Math.abs( x - width / 2 );
var min_y = height * ( difference / (width / 2) );
if ( y < min_y ) y = min_y;
if ( x < 0 ) x = 0;
if ( y < 0 ) y = 0;
if ( x > width ) x = width;
if ( y > height ) y = height;
ui.position.top = y - $(this).height() / 2;
ui.position.left = x - $(this).width() / 2;
}
});
【讨论】：
考虑到它的优雅和简单，我想我会发布这个解决方案。
我认为这里的关键不是过多地关注“三角形”方面，更重要的是要意识到三角形是多边形。这使我们能够使用许多与点和多边形相关的现有算法来正面解决问题。
这个二维图形库JavaScript 2D Graph Library 提供了解决这个问题所需的所有工具。主要是，每个Shape都有一个关联的函数constrain，它将一个Point约束到Shape的内部区域（包括边缘）通过连接到 Shape 质心的 LineSegment。 （看起来您也可以将 Shape 的中心点设置为第二个参数，这对于凹形 Polygon 很方便。）
这个 jsFiddle Triangle Constraint via jQuery UI Draggable 使用 jQuery UI Draggable drag 回调结合 Graph 库来做约束。它实际上是使用 SVG Polygon 的坐标来构造 Graph Polygon，只是将 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;
}
});
干杯！
【讨论】：