变换后的矩形坐标

编程入门 行业动态 更新时间:2024-10-26 09:30:55
本文介绍了变换后的矩形坐标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我目前正在用他的父元素(g)绘制一个矩形。 产生的svg是这个;

< svg version =1.1width =1055height = 381\" > < g transform =rotate(120)> 现在我试着动态地检索其中一个 rects 的坐标,但使用getBBox不会返回正确的结果。任何人都可以告诉我如何获得其中一个rects的正确的x,y,width和height属性?

我自己的解决方案;

var matrix = shape.getCTM(); //使用变换矩阵变换一个点 var position = svg.createSVGPoint(); position.x = $(shape).attr(x); position.y = $(shape).attr(y); position = position.matrixTransform(matrix);

I am currently drawing a rectangle with a transformation on his parent element (g). The resulting svg is this;

<svg version="1.1" width="1055" height="381"> <g transform="rotate(120)"> <rect x="0" y="0" width="100" height="100" rx="10" ry="0" stroke-width="0" style="stroke:rgb(0,0,0)" id="rect-0"></rect> <rect x="100" y="0" width="100" height="100" rx="10" ry="0" stroke-width="0" style="stroke:rgb(0,0,0)" id="rect-1"></rect> </g> </svg>

Now I am trying to retrieve the coordinates of one of the rects dynamically, but using getBBox does not return the correct result. Can anyone tell me how to get the correct x, y, width and height properties of one of the rects?

解决方案

I found the solution myself;

var matrix = shape.getCTM(); // transform a point using the transformed matrix var position = svg.createSVGPoint(); position.x = $(shape).attr("x"); position.y = $(shape).attr("y"); position = position.matrixTransform(matrix);

更多推荐

变换后的矩形坐标

本文发布于:2023-11-12 01:14:49,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1580092.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:矩形   坐标

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!