zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    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/

  • 相关阅读:
    jquery02
    jquery01
    oracle04_plsql
    oracle03
    oracle02
    oracle01
    selenium
    爬取京东商品信息并保存到MongoDB
    python pymongo操作之增删改查
    MongoDB 数据库表删除
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/12302370.html
Copyright © 2011-2022 走看看