#javascript #raphael
#javascript #рафаэль
Вопрос:
Я пытаюсь разместить круг на 50% от ширины бумаги, используя RaphaelJS, возможно ли это без предварительного вычисления (.5 * ширина пикселя)? Я хочу просто иметь возможность размещать элемент на 50% от ширины его контейнера, возможно ли это вообще с текущим API Raphael?
Рафаэль утверждает, что может рисовать векторную графику, и все же кажется, что все в API основано на пикселях. Как вы можете нарисовать векторное изображение, используя пиксели? Это кажется на 100% противоречивым.
Аналогично, насколько я понимаю, векторное изображение сохраняет те же размеры, независимо от фактического размера. Разве это не одна из основных причин использования векторной графики, что не имеет значения, для экрана, печати или чего-то еще, масштаб всегда будет одинаковым? Таким образом, меня еще больше смущает необходимость чего-то вроде ScaleRaphael; просто кажется, что такая функциональность является неотъемлемой частью создания векторной графики. Но, возможно, я просто не понимаю векторную графику?
Просто не похоже, что изображение, созданное с абсолютными размерами в пикселях и не поддающееся изменению размера, изначально квалифицируется как векторное изображение. Это, или я пропускаю здесь очень большую часть API.
Заранее спасибо за любую помощь. Я уже дважды пытался опубликовать это в группе RaphaelJS Google, но, полагаю, они подвергают цензуре по какой-то причине, потому что я ждал его появления с прошлой недели, и до сих пор нет никаких признаков моих сообщений (хотя появляются другие новые сообщения).
Комментарии:
1. Да, Рафаэль рисует векторную графику. Он отображает с использованием SVG или VML, оба из которых являются векторными языками.
2. Использование SVG / VML не означает, что это настоящая векторная графика…
3. И API Raphael действительно включает в себя
.scale()метод.4. Я не думаю, что это удовлетворит мои требования. Масштаб имеет дело только с размером элемента, нет? Например, у меня есть бумага размером 1000 пикселей, поэтому, если мне нужно поместить круг в точке, составляющей 50% ширины бумаги (посередине), тогда это будет 500 пикселей. Если я изменю размер своего браузера по оси x, скажем, на 2000 пикселей, бумага останется того же размера, что и круг. Если я затем изменю размер бумаги до 2000 пикселей, окружность по- прежнему будет иметь размер 500 пикселей. Вызов
.scale()ничего не делает для позиционирования.5. Теперь, может быть, если бы существовал
paper.scale()метод, который автоматически применял бы масштабирование ко всем содержащимся элементам, тогда этого было бы достаточно; но, похоже, такого метода не существует (и, следовательно, причина ScaleRaphael, я полагаю).
Ответ №1:
Использование значений пикселей для определения положений / размеров фигуры не делает ее невекторной. Возьмем, к примеру, Adobe Illustrator — это векторный продукт, и все же вы все равно можете видеть, что свойства для каждого объекта показывают позиции, а размеры — пиксели.
Базовое объяснение векторной графики было бы таким, взяв в качестве примера прямоугольник:
Векторный прямоугольник будет иметь ряд свойств, таких как x, y, ширина и высота. Эти свойства могут быть указаны в пикселях. Разница с вектором (в отличие от растра) заключается в том, что эти свойства пикселей используются только для определения того, как рисуется фигура. Поэтому, когда отображение отображается (обновляется), «система» может перерисовать фигуру, используя те же свойства, не влияя на качество изменения размера.
Однако растровое изображение будет содержать гораздо больше информации (т. Е. Точное значение каждого пикселя, используемого для формирования фигуры / прямоугольника)
Если слово «пиксель» заставляет вас думать, что оно противоречиво, просто помните, что все на экране компьютера отображается в пикселях. Даже векторная графика должна быть преобразована в «растровую» как некоторая точка в графическом конвейере.
Если вы беспокоитесь о необходимости использовать вычисление (0,5 * ширина), то просто помните, что что-то должно выполнять это вычисление, и лично я бы с радостью справился с этим простым шагом сам.
После всего этого вы должны просто рассчитать размер и положение в пикселях на основе размера вашего «бумажного» элемента и передать эти значения в Raphael для создания фигуры.