zoukankan      html  css  js  c++  java
  • svg transform 坐标变换方式

    坐标变换的使用方式:

    代码:
    <g transform="...">  <!--other elements>  ...</g>
    1、平移变换(translate)
    平移表达式transform="translate(x,y)",即新坐标系的原点在原坐标系的(x,y)处。坐标轴的方向不变。

    2、旋转变换(rotate)
    transform="rotate(angle cx,cy)"。angle代表旋转角度,缺省单位是“度”,瞬时针为正,逆时针为负。(cx,cy)是旋转中心所在的坐标。若省略旋转中心坐标,则缺省值是(0,0)。

    3、伸缩变换(scale)
    transform="scale(sx,sy)",sx,sy分别代表x轴方向和y方向拉伸或缩小的比例因子。拉伸:大于1;缩小:小于1。若省略sy,即sy=sx,作等比例缩放。

    4、歪斜变换(skew)
    transform="skewX(x-angle)"或transform="skewY(y-angle)",x-angle,y-angle分别代表沿x轴和y轴歪斜的角度。

    5、矩阵变换(matrix)
    transform="matrix(a b c d e f)",这里的六个参数分别是变换矩阵中的六个参数。特点是灵活性大,无论多么复杂的变换,只需进行一次矩阵运算即可。
    二维坐标变换基本公式:
         x a c e x1
    y = b d f * y1
         1 0 0 1  1
    其中 ,x,y是旧坐标,x1,y1是新坐标。

  • 相关阅读:
    坑爹的微信支付v3,其实没有那么坑
    Mysql探究之null与not null
    Mysql的空值与NULL的区别
    Java编程思想(第4版) 中文清晰PDF完整版
    URI和URL的区别
    html 文本输入框效果大汇集
    HTTP状态码大全
    Silverlight ModelView中调用UI进程
    appium部分api
    appium元素定位
  • 原文地址:https://www.cnblogs.com/jenry/p/1903397.html
Copyright © 2011-2022 走看看