Raphael.js: Как перетащить одну сторону пути в моем случае? - PullRequest
Новая
       11

Raphael.js: Как перетащить одну сторону пути в моем случае?

1 голос
/ 02 августа 2011

Я использую библиотеку Rahael.js .

Если у меня есть путь: 

var mypath = paper.path("M10 10L90 90");

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

Я не уверен, как обновить атрибут пути с помощью функции Raphael drag (). 

var start = function () {

},
move = function (dx, dy) {
    //How to update the attribute of one side of the path here
},
up = function () {

};
mypath.drag(move, start, up);

Ответы [ 2 ]

7 голосов
/ 12 марта 2012

Вам нужен второй элемент, который действует как «дескриптор», сделайте этот элемент перетаскиваемым, а затем обновите свой путь строки: 

var paper = Raphael('canvas', 300, 300);
var path = paper.path("M10 10L90 90");
var pathArray = path.attr("path");
handle = paper.circle(90,90,5).attr({
    fill: "black",
    cursor: "pointer",
    "stroke-width": 10,
    stroke: "transparent"
});

var start = function () {
  this.cx = this.attr("cx"),
  this.cy = this.attr("cy");
},
move = function (dx, dy) {
   var X = this.cx + dx,
       Y = this.cy + dy;
   this.attr({cx: X, cy: Y});
   pathArray[1][1] = X;
   pathArray[1][2] = Y;
   path.attr({path: pathArray});
},
up = function () {
   this.dx = this.dy = 0;
};

handle.drag(move, start, up);

http://jsfiddle.net/TfE2X/

1 голос
/ 02 августа 2011

Маскируйте конец пути прозрачным прямоугольным элементом и анимируйте координаты от текущего x, y до переведенного положения x, y прямоугольного элемента и продолжайте обновлять путь одновременно при перемещении мыши.

...