Рафаэль рисует путь мышью

Question

Я использую библиотеку Raphael Javascript, и я хотел бы нарисовать прямую линию с помощью мыши.Я бы хотел, чтобы пользователь щелкнул где-то, поместил одну точку пути, а затем проследил, чтобы линия следовала за мышью до тех пор, пока он снова не щелкнет, после чего линия будет постоянно размещена на холсте.

Прямо сейчас единственный способ сделать это, кажется, состоит в том, чтобы создать путь, когда они щелкают, постоянно удалять и перерисовывать его, когда они перемещают мышь, и затем создавать его еще раз, когда они щелкают снова, отслеживая режим рисования все время j.Хотя это работает, это немного запутанно и грязно (особенно создание строк 'Mx yLx y' для определения нового пути), и мне было интересно, есть ли лучший способ сделать это.Документация Raphael по пути оставляет желать лучшего.

Спасибо!

Answer 1

На самом деле есть лучший способ сделать это, используя path.attr('path'). path - это массив массивов частей пути, например,

[
  ['M', 100, 100],
  ['L', 150, 150],
  ['L', 200, 150],
  ['Z']
]

Если вы обновите его, вам не нужно каждый раз рисовать путь с нуля.

Raphael.el.addPart = function (point) {
  var pathParts = this.attr('path') || [];
  pathParts.push(point);
  this.attr('path', pathParts);
};

var path = paper.path();
path.addPart(['M', 100, 100]); //moveto 100, 100
path.addPart(['L', 150, 150]); //lineto 150, 150
path.addPart(['L', 200, 150]); //lineto 200, 150
path.addPart(['Z']);           //closepath

Answer 2

Из того, что я могу сказать, вы делаете все правильно.Единственное, что я буду рекламировать, это то, что вы могли бы анимировать один путь на другой вместо замены старого и установить максимальную частоту кадров (скажем, не более 5 обновлений пути в секунду, но вам нужно попробовать и посмотреть, что работаетдля тебя).

Что касается документации по пути, я не думаю, что можно сказать что-то еще.Метод принимает строку пути SVG и рисует ее.Что вам нужно прочитать, так это документация SVG для path.

Как анимировать путь:

p = canvas.path("M0 0L100 0");
p.animate({path: [["M", 0, 0], ["L", 0, 100]]}, 4000);