在一個三角形內可拖動的JQuery UI

我有一個div（它是一個矩形當然），並帶有一個三角形圖像作爲背景。我想在三角形內移動一個圓圈的圖像。在一個三角形內可拖動的JQuery UI

我選擇了JQuery UI的可拖動使用，但我無法設法限制三角形內的可拖動圖像。

我以爲我應該使用收容選項與數組，但我不能定義一個三角形與兩個座標。

後來我發現這個話題：constrain within a triangle

有答案是相當不錯的，但它採用的是正弦曲線和我有不知道如何定義一個三角形使用的路徑。

任何人都可以幫助我如何限制圈子移動到三角形？

來源

2013-07-25 dpb

您忘記鏈接您提到的主題 –

另外，您的瀏覽器支持要求是什麼？ –

哦，這裏的鏈接：http://stackoverflow.com/questions/8583832/constrain-within-a-triangle 我想嵌入到一個iBook項目作爲一個html部件，所以基本上我認爲任何webkit瀏覽器。 – dpb

我的一個朋友想出了一個非常簡單的和很好的解決方案：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; 

} 
});

來源

2013-07-26 07:33:39 dpb

我想我會張貼此解決方案賦予其優雅和簡潔。

我認爲這裏的關鍵不在於關注「三角」方面，更重要的是要認識到三角形是一個多邊形。這使我們可以使用許多與點和多邊形相關的現有算法來正視這個問題。

此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:05:04 Borgboy

在一個三角形內可拖動的JQuery UI

回答

相關問題