0

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

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

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

然后我发现了这个话题：约束在一个三角形内

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

任何人都可以帮助我应该如何将圆圈的运动限制在三角形上？

4

2 回答 2

0

我的一个朋友想出了一个非常简单而好的解决方案：看看

$( "#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;

}
});
于 2013-07-26T07:33:39.087 回答
0

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

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

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

这个通过 jQuery UI Draggable 实现的 jsFiddle Triangle Constraint使用 jQuery UI Draggable拖动回调和 Graph 库来做约束。它实际上是使用 SVG Polygon 的坐标来构建 Graph Polygon，只是将 y 轴倒置以在屏幕坐标和笛卡尔坐标之间切换。

在 document ready 中进行的设置相当简单：

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-17T16:05:04.727 回答