svg 矩阵转换

svg 矩阵转换

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

这个方法，应用到多边形，理论上也是可行的吧

/*
在平面内,已知一个矩形的四个角坐标,将矩形绕中心点转动一个角度,求旋转后的角坐标.
也就是已知半径,求每个点旋转后的坐标.

把旋转前和旋转后的点加上中心点看成一个等腰三角形就好解决了,不用扇形公式,而是用三角形公式.

假设矩形的左上角为（left, top),右下角为（right, bottom),
则矩形上任意点（x0, y0）绕其中心（xcenter,ycenter)逆时针旋转angle角度后,新的坐标位置（x′, y′）的计算公式为：

xcenter = (right － left ＋ 1) ／ 2 ＋ left;
ycenter = (bottom － top ＋ 1) ／ 2 ＋ top;

x′ = (x0 － xcenter) cosθ － (y0 － ycenter) sinθ ＋ xcenter;
y′ = (x0 － xcenter) sinθ ＋ (y0 － ycenter) cosθ ＋ ycenter;

*/
// θ 弧度/角度

https://www.cnblogs.com/zhoug2020/p/5797070.html

https://repl.it/@xgqfrms/svg-matrix-transform

//  θ  arc/ rad / angle

const svgMatrixConvert = (polygon,  angle = 0) => {
    const poly = document.querySelector(`[id="${polygon}"]`);
    // const {
    //   x,
    //   y,
    //   width,
    //   height,
    // } = poly.getBBox();
    // let cx = x + .5 * width
    // let cy = y + .5 * height;
    const {
      x,
      y,
      width,
      height,
      // top,
      // bottom,
      left,
      right,
    } = poly.getBoundingClientRect();
    console.log(`testing`);
    const cx = (right - left + 1) / 2 + left;
    const cy = (bottom - top + 1) / 2 + top;
    // const px = (x0 - xcenter) cosθ - (y0 - ycenter) sinθ + xcenter;
    // const py = (x0 - xcenter) sinθ + (y0 - ycenter) cosθ + ycenter;
    // polygon points
    const points = [];
    [...poly.points].forEach(point => {
        // SVGPoint
        // points.push(point.x + x, point.y + y);
        const {
          x,
          y,
        } = point;
        // const px = (x - cx) * cosθ - (y - cy) * sinθ + cx;
        // const py = (x - cx) * sinθ + (y - cy) * cosθ + cy;
        const px = (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx;
        const py = (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy;
        points.push(px, py);
    });
    poly.setAttribute(`points`, points.join(` `));
    return ;
};

设置旋转的 origin，为 polygon 的中心

默认 SVG, 左上角 0,0

// 设置旋转的 origin，为 polygon 的中心
// 偏移量
getCenter = () => {
    // let [top, left, right, bottom] = [];
    let [top, left, right, bottom] = ["", "", "", ""];
    [...this.poly.points].forEach(({x, y}, i) => {
      if (i === 0) {
        top = y;
        bottom = y;
        left = x;
        right = x;
      } else {
        top = Math.min(top, y);
        bottom = Math.max(bottom, y);
        left = Math.min(left, x);
        right = Math.max(right, x);
      }
    });
    return [(left + right) / 2, (top + bottom) / 2];
  }

---

matrix

http://cn.voidcc.com/question/p-fbljwwvs-zm.html

https://blog.csdn.net/atgwwx/article/details/8305842

svg to Map

https://www.codenong.com/38155854/

等比例缩

https://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/