У меня есть разные элементы rect
, которые нарисованы внутри слоя svg
, который перекрывает изображение png
.
В другом представлении я вижу нарисованные элементы, но изображение ниже больше и имеет другой коэффициент масштабирования. Если я разделю ширину на высоту для обоих изображений, результаты не будут одинаковыми.
Как я могу изменить масштаб элемента svg внутри изображения с двумя разными масштабными коэффициентами?
Эти изображения могут объяснить, что я собираюсь делать
Изображение с нарисованным прямоугольником:
Изображение, которое я должен масштабировать:
1 ответ
Решил проблему простой функцией. Наши неизвестные - это координаты прямоугольника, которые мы хотим изменить, и его размер, поэтому, если мы обозначим с помощью oldRectX и oldRectY , newRectX и < em> newRectY соответственно как старые и новые координаты прямоугольника и с oldSVGWidth и oldSVGHeight , newSVGWidth и newSVGHeight < / em> соответственно, как старые и новые размеры SVG, которые содержат прямоугольники, применяя это соотношение, мы можем вычислить новое положение и новый размер:
oldRectX : oldSVGWidth = newRectX : newSVGWidth
Итак, я могу вычислить newRectX:
newRectX = (oldRectX * newSVGWidth)/oldSVGWith
Те же рассуждения, что и для вычисления newRectY, с той разницей, что мне нужно заменить ширину на высоту и X на Y:
newRectY = (oldRectY * newSVGHeight)/oldSVGHeight
Наконец-то новые размеры:
newRectWidth = oldRectWidth * (newSVGWidth/oldSVGWidth)
newRectHeight = oldRectWidth * (newSVGHeight/oldSVGHeight)
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.