Question

我有一个div（当然是矩形），背景为三角形图像。我想在三角形内移动一个圆圈的图像。

我选择使用JQuery UI的draggable但我无法限制三角形内的可拖动图像。

我以为我应该将包含选项与数组一起使用，但我无法定义具有两个坐标的三角形。

答案非常好，但它使用了正弦曲线，我不知道如何将三角形定义为使用路径。

任何人都可以帮助我如何限制圆圈移动到三角形？

Answer 1

我的一位朋友提出了一个非常简单而且很好的解决方案：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;

}
});

Answer 2

我认为考虑到它的优雅和简洁，我会发布这个解决方案。

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

此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;
    }
});

干杯！

JQuery UI可在三角形内拖动

2 个答案: