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/

svg 矩阵转换的更多相关文章

  1. C 语言实例 - 矩阵转换

    C 语言实例 - 矩阵转换 C 语言实例 C 语言实例 矩阵转换. 实例 #include <stdio.h> int main() { ][], transpose[][], r, c, ...

  2. 数组/矩阵转换成Image类

    Python下将数组/矩阵转换成Image类 原创 2017年04月21日 19:21:27 标签: python / 图像处理 3596 先说明一下为什么要将数组转换成Image类.我处理的图像是F ...

  3. OpenGL 坐标与矩阵转换

    1. OpenGL 渲染管线 OpenGL渲染管线分为两大部分,模型观测变换(ModelView Transformation)和投影变换(Projection Transformation).做个比 ...

  4. 字体图标-把SVG图标转换成所需要的字体图标

    小科普: 想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图: 任意缩放,图标不会失真: 可以改变图标颜色: 可以设置图标阴影: 可以设置透明效果: 主流浏览器都支持: 可以快速 ...

  5. POJ 3268 Silver Cow Party 最短路径+矩阵转换

    Silver Cow Party Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) T ...

  6. bytearray与矩阵转换对应关系

    import numpy as npimport osa=bytearray(os.urandom(27))# for i in range(21):# print(a[i])a=np.array(a ...

  7. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  8. SVG 参考手册

    1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set mpath 剪裁模块 clipP ...

  9. 8个实用的SVG工具,20 个有用的 SVG 工具,五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

随机推荐

  1. C#9.0:Records

    概述 在C#9.0下,record是一个关键字,微软官方目前暂时将它翻译为记录类型. 传统面向对象的编程的核心思想是一个对象有着唯一标识,封装着随时可变的状态.C#也是一直这样设计和工作的.但是一些时 ...

  2. cnpm安装依赖时报Error: Cannot find module 'core-js/modules/es6.regexp.constructor'

    解决方案:npm install core-js@2 大致猜测:cnpm掉包所致...

  3. Centos搭建Hive

    Centos搭建Hive 一.Hive简介 二.安装Hive 2.1hive下载 2.2上传解压 2.3配置hive相关的环境变量 三.Mysql 3.1安装mysql connector 3.2 将 ...

  4. Scala安装后,在IDEA中配置

    IDEA中配置Scala 一.设置Module 二.添加Scala的SDK 三.寻找本地scala安装路径 四.测试是否可以新建有Scala Class 五.踩坑填坑记录 5.1:Error:(4, ...

  5. (11)Linux服务器管理维护注意事项

    1.远程服务器关机及重启时的注意事项 为什么远程服务器不能关机?原因很简单,远程服务器没有放置在本地,关机后谁帮你按开机电源键启动服务器?虽然计算机技术曰新月异,但是像插入电源和开机这样的工作还是需要 ...

  6. 烧录失败导致boot无法加载的解决措施,再也不怕烧成砖了

    目录: 1.usb烧录时出现的问题截图 2.重新擦除boot发现失败的情况 3.解决措施 烧录失败导致boot无法加载的解决措施在烧录系统的时候经常会遇到烧录失败的情况,如果能通过再次执行烧录能烧上肯 ...

  7. vulnhub靶机练习-Os-hackNos-1,超详细使用

    第一次写自己总结的文章,之后也会有更新,目前还在初学阶段. 首先介绍一下靶机,靶机是 vulnhub Os-hackNos-1 简介: 难度容易到中, flag 两个 一个是普通用户的user.txt ...

  8. 【洛谷 p3371】模板-单源最短路径(图论)

    题目:给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 解法:spfa算法. 1 #include<cstdio> 2 #include<cstdlib> 3 #in ...

  9. hdu3506 Monkey Party

    Problem Description Far away from our world, there is a banana forest. And many lovely monkeys live ...

  10. JSR-303 实现参数校验

    参考 1. 什么是JSR-303 JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation,官方参考实现是Hibernate Validator. 此实现与 Hib ...