Raphaël JS. Резиновая дорожка между двумя формами - PullRequest
Новая
       27

Raphaël JS. Резиновая дорожка между двумя формами

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

У каждого есть пример кода для рисования пути стиля резиновой полосы между двумя фигурами в Рафаэле.

Я видел несколько вопросов, касающихся постепенного рисования траектории на Как постепенно нарисовать векторную траекторию?(Raphael.js)

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

Я попробовал Joint.js http://www.jointjs.com/ с Рафаэлем, но он может рисовать линии, но не в интерактивном режиме.

1 Ответ

1 голос
/ 08 декабря 2011

Вот основной код, с которого можно начать: 

var w = window.innerWidth;
var h = window.innerWidth;
var paper = Raphael(0, 0, w, h);
var nodes = paper.set();

var circle1 = paper.circle(w/8, h/3, w/16)
    .attr({fill: "#000"})
    .click(line);
var circle2 = paper.circle(w - w/8, h/3, w/16).attr({fill: "#000"})
    .attr({fill: "#000"})
    .click(line);


function line() {
  var band = paper.path("M 0 0").attr({"stroke-width": 5})
  band.node.style.pointerEvents = "none";
  dimensions = this.getBBox();
  var x = dimensions.x + dimensions.width/2;
  var y = dimensions.y + dimensions.height/2;
  if (!window.onmousemove) {
    window.onmousemove = function(e){
        band.attr({path: "M " + x + " " + y + "L " + e.x + " " + e.y});
    }
  }
  else {
     window.onmousemove = null;
  }
}

Вы можете посмотреть демо здесь: http://jsfiddle.net/57myn/

...