svg 地图 matrix 旋转90 ,计算公式?

发布于 2022-09-01 22:48:45 字数 286 浏览 10 评论 0

图片描述

图片描述

问一下,把matrix 以坐标点1090,870 旋转90度, 计算公式?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

情话墙 2022-09-08 22:48:45

你可以通过CSS3的样式去变换你的地图

如果想使用矩阵变换函数,结果如下
矩阵变换公式, 当然如果要达到以某个点旋转多少度的公式,这个你就得自己推导了。

 matrix(1,0,0,1,0,0)
 matrix(a,b,c,d,e,f)

 //矩阵实现位移(disX和disY为偏移量)
 x位移: e = e + disX;
 y位移: f = f + disY;

 //矩阵实现缩放(x,y为缩放倍数)
 x轴缩放: a = x*a; c=x*c;  e=x*e;
 y轴缩放: b = y*b; d=y*d;  f=y*f;

 //矩阵实现扭曲(xDeg,yDeg为扭曲角度)
 c = Math.tan(xDeg/180*Math.PI);
 b = Math.tan(yDeg/180*Math.PI);

 //矩阵实现旋转(deg为旋转角度)
 a = Math.cos(deg/180*Math.PI);
 b = Math.sin(deg/180*Math.PI);
 c = -Math.sin(deg/180*Math.PI);
 d = Math.cos(deg/180*Math.PI);
transform: matrix(Math.cos(90/180*Math.PI),Math.sin(90/180*Math.PI),-Math.sin(90/180*Math.PI),Math.cos(90/180*Math.PI),0,0);
transform-origin: 1090px, 870px;

如果使用rotate函数写法比较简单(推荐这个吧)

transform: rotate(90deg);
transform-origin: 1090px, 870px;

关于CSS3的transform
http://jsfiddle.net/hjzheng/UjuT5/2/

更多资料
http://get-set.cn/CUF_PPTs/CSS3-2D-Transform.html#/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文