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/
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12302370.html
未经授权禁止转载,违者必究!