请在Chrome、Firefox等现代浏览器浏览本站。

旋转 是如何通过倾斜和缩放实现的

css + css3 admin 654℃ 0评论

IMG_20150207_160052

canvas的matrix矩阵中参数(a,b,c,d,e,f),分别对应水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平移动,垂直移动,

先理解倾斜的意思

水平倾斜  及X轴方向倾斜 假设点的坐标(x,y);水平倾斜指的是正切值,,比如水平倾斜为1  则点的坐标为(x+y(tan(45),y))

垂直倾斜  及Y轴方向倾斜

缩放  比如水平缩放a 则点(x,y)变成(xa,y),垂直缩放  b 则点(x,y)变成(x,by)

如果点(x,y)需要旋转45deg则步骤如下

20150207160608

 

B点是通过A点逆时针旋转θ得到

x=r*cosa

y=r*sina

x’=r*cos(a+θ)=x*cosθ-y*sinθ

y’=r*sin(a+θ)=x*sinθ+y*cosθ

矩阵形式表示如下

b_large_8dMu_60a8000097411269

 

相当于先水平倾斜arctan(sinθ),垂直倾斜arctan(-sinθ),然后水平缩放cosθ倍,垂直缩放cosθ倍

 

最后配一张图0150207162329

转载请注明:许得龙博客 » 旋转 是如何通过倾斜和缩放实现的

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址