Кумулятивный Raphael против абсолютного масштабирования/вращения/перевода?

Я пытаюсь нарисовать интерактивную карту на Javascript, используя Рафаэля для выполнения тяжелой работы.

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

К сожалению, меня несколько смущают примитивы преобразования Рафаэля: они ведут себя не так, как я ожидал. Если я вызову scale(), масштабирование будет применяться к исходному размеру элемента рисунка; но translate() является кумулятивным, поэтому применяется к предыдущему переводу. rotate() может быть любым, так как у него есть опция, которую я могу установить...

Можно ли сделать абсолютный перевод? То есть иметь возможность указать абсолютные координаты нового центра моих объектов (которые обычно являются путями)? В противном случае, отслеживает ли я старое местоположение, чтобы я мог применить дельту, когда я хочу переместить его в новое место, разумный способ сделать это?

Или мне было бы лучше просто перерисовывать все это в каждом кадре? (Я вижу предположения, что Рафаэль не хорош в преобразованиях сложных рисунков, так как большая часть этого делается в Javascript; глядя на создаваемый SVG, я вижу, что перевод, похоже, возвращается в данные пути, что терпеть это...)

(Кстати, для всего этого я использую интерфейс GWT Raphael.)


person David Given    schedule 05.03.2011    source источник
comment
Если пользователь не взаимодействует с фоновой картой, можете ли вы заменить ее статичным растровым изображением? Очевидно, что это должно быть достаточно высокое разрешение, чтобы справиться с вашим наиболее увеличенным состоянием (которое может быть слишком большим, чтобы обслуживать и манипулировать в браузере). В некоторых ситуациях это может работать лучше, чем когда клиентский движок рендеринга пытается рисовать сложные векторные пути. Я уверен, что есть предостережения, которые я не учел...   -  person peteorpeter    schedule 04.05.2011
comment
К сожалению, пользователь действительно взаимодействует с ним, и мне нужно обновлять его на лету. Фактически, то, что я делаю, состоит в том, чтобы иметь стопку из трех слоев: два холста и фоновый растр. Я больше не использую SVG, так как он кажется слишком медленным; вопреки интуиции, холсты и перерисовка карты в каждом кадре кажутся быстрее. (Два холста нужны для того, чтобы я мог разделить карту на элементы, которые нужно часто обновлять, и элементы, которые не нужно часто обновлять, и это работает достаточно хорошо.)   -  person David Given    schedule 24.05.2011


Ответы (2)


Вы можете использовать Element.attr, чтобы установить абсолютные позиции. Просто измените свойства x и y:

myElement.attr("x", myX);
myElement.attr("y", myY);
person Rafa de Castro    schedule 06.06.2012

Я успешно использовал плагин raphael-zpd. Я не уверен, что это подключится к GWT - вы можете проверить их исходный код и адаптировать его к вашему варианту использования.

person peteorpeter    schedule 05.05.2011