constrain внутри треугольника

Question

Я ищу общий код (javascript), который будет работать с пользовательским интерфейсом jquery для ограничения перемещения (перетаскивания) div в треугольнике.

похоже на это (http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle), но треугольник, а не круг.

Я предпочел бы треугольник быть определен как 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, если это проще.

Answer 1

См this answer, который показывает, как сдержать JQuery перемещаемой к произвольному пути.

Хитрость заключается в изменении переменных ui.position в пределах события drag, чтобы ограничить движение.

Answer 2

Эта ссылка посвящена теме определения того, находится ли точка в треугольнике, она содержит пример кода, который вы сможете подключить к событию.

http://www.blackpawn.com/texts/pointinpoly/default.html

Answer 3

Поскольку ни один из приведенных ответов не показывает, как ограничить перетаскивание в треугольную область, я думал, что поделюсь этим jsfiddle, который демонстрирует фактический рабочий пример.

Я думаю, что ключ здесь не столько сосредоточиться на аспекте «треугольника», но еще более важно реализовать треугольник - это многоугольник. Это позволяет нам решить проблему с использованием многих существующих алгоритмов, связанных с точкой и полигоном.

Эта библиотека 2D-графиков JavaScript 2D Graph Library предоставляет все инструменты, необходимые для решения этой проблемы. В основном, каждый Формы имеет связанную с функцией сдерживать которая будет сдерживать точки к внутренней площади Shape (край включено) через LineSegment, который подключается к центроиду Shape , (Это также выглядит, как вы можете установить центральную точку для Shape в качестве второго аргумента, который бы оказаться удобным для вогнутой Polygon «s.)

Этого jsFiddle Triangle Constraint via jQuery UI Draggable использует JQuery UI Draggable перетащить обратный вызов в в сочетании с библиотекой Graph, чтобы выполнить ограничение. Он фактически использует координаты SVG Polygon для построения полигона Graph, только инвертируя ось 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; 
    } 
}); 

Ура!