Я пытаюсь нарисовать интерактивную карту на Javascript, используя Рафаэля для выполнения тяжелой работы.
Фон карты — это довольно сложная вещь, содержащая сетку, элементы карты, метки и т. д. Кроме того, я собираюсь нарисовать то, с чем на самом деле работает пользователь. Поскольку фон сложный, я не хочу перерисовывать его каждый кадр. Итак, после рисования я хотел бы повторно использовать эти элементы рисования, просто изменив перевод, вращение, масштабирование фона при панорамировании, масштабировании и т. Д.
К сожалению, меня несколько смущают примитивы преобразования Рафаэля: они ведут себя не так, как я ожидал. Если я вызову scale()
, масштабирование будет применяться к исходному размеру элемента рисунка; но translate()
является кумулятивным, поэтому применяется к предыдущему переводу. rotate()
может быть любым, так как у него есть опция, которую я могу установить...
Можно ли сделать абсолютный перевод? То есть иметь возможность указать абсолютные координаты нового центра моих объектов (которые обычно являются путями)? В противном случае, отслеживает ли я старое местоположение, чтобы я мог применить дельту, когда я хочу переместить его в новое место, разумный способ сделать это?
Или мне было бы лучше просто перерисовывать все это в каждом кадре? (Я вижу предположения, что Рафаэль не хорош в преобразованиях сложных рисунков, так как большая часть этого делается в Javascript; глядя на создаваемый SVG, я вижу, что перевод, похоже, возвращается в данные пути, что терпеть это...)
(Кстати, для всего этого я использую интерфейс GWT Raphael.)