ограничить в треугольнике - PullRequest
Новая
       22

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

3 голосов
/ 21 декабря 2011

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

аналогично этому (/4767435/kak-ogranichit-dvizhenie-v-oblasti-kruga), но треугольнику), а не круг.

Я бы предпочел, чтобы треугольник был определен как рэфильный 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 });

в ожидании решения.

Iхотел бы отметить, что перетаскиваемый элемент также может быть узлом svg, если это проще.

Ответы [ 3 ]

1 голос
/ 21 апреля 2013

См. этот ответ , который показывает, как ограничить jquery, перетаскиваемый произвольным путем.

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

0 голосов
/ 17 сентября 2016

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

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

Эта библиотека 2D-графиков Библиотека 2D-графиков JavaScript предоставляет все инструменты, необходимые для решения этой проблемы. В основном, каждый Shape имеет связанную функцию constrain , которая будет ограничивать Point внутренней областью Shape (включая край ) через LineSegment , который подключается к центроиду Shape . (Также похоже, что вы можете установить центральную точку для Shape в качестве второго аргумента, который пригодится для вогнутых Polygon .) *

Это jsFiddle Ограничение треугольника с помощью 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;
    }
});

Ура! 1034 * *

0 голосов
/ 21 декабря 2011

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

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

...