約束在一個三角形內

我正在尋找一個通用的代碼（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

約束在一個三角形內

回答

相關問題