尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

如何用svgpathtools旋转、平移、缩放和反转路径:几何变换方法指南

如何用svgpathtools旋转、平移、缩放和反转路径:几何变换方法指南 如何用svgpathtools旋转、平移、缩放和反转路径几何变换方法指南【免费下载链接】svgpathtoolsA collection of tools for manipulating and analyzing SVG Path objects and Bezier curves.项目地址: https://gitcode.com/gh_mirrors/sv/svgpathtoolssvgpathtools 是一个用于操作和分析 SVG 路径对象与贝塞尔曲线的 Python 工具库。本文带你快速掌握它的核心几何变换方法——路径旋转、平移、缩放与方向反转让贝塞尔曲线随叫随动。4种几何变换方法一览所有变换都以复数坐标x y·1j实部是 X、虚部是 Y为基础支持Line、QuadraticBezier、CubicBezier、Arc四种线段以及它们的组合体Path。变换函数形式方法形式说明旋转rotate(curve, degs, origin).rotated(degs, origin)绕原点逆时针旋转指定角度度平移translate(curve, z0).translated(z0)沿复数向量z0整体移动缩放scale(curve, sx, sy, origin).scaled(sx, sy, origin)绕原点按sx/sy缩放反转—.reversed()翻转路径的起点与终点方向实现代码集中在svgpathtools/path.py中rotate、translate、scale三个核心函数以及各线段类上的同名方法测试用例可参考test/test_path.py。快速开始安装 svgpathtools一条命令即可安装它依赖 numpy可选安装 scipy 提升性能pip install svgpathtools如果要从源码安装克隆仓库后在setup.py所在目录执行python setup.py installgit clone https://gitcode.com/gh_mirrors/sv/svgpathtools最简单的路径创建方式是用parse_path解析 SVG 的 d 字符串from svgpathtools import parse_path path parse_path(M 300 100 C 100 100 200 200 200 300 L 250 350)如何旋转路径.rotated() 逆时针角度与旋转中心调用.rotated(degs, originNone)返回一份绕origin逆时针旋转degs度的副本原路径不会被修改。两个容易踩坑的细节角度单位是度方向是逆时针数学惯例屏幕坐标系下 y 轴向下视觉上可能看起来顺时针。不指定origin时旋转中心默认取curve.point(0.5)曲线参数中点如果是Arc弧则默认取弧的圆心curve.center。官方 README 里有个精彩示例把半椭圆弧旋转 180° 得到另一半再把一条短线段每 30° 旋转一次复制 12 份就得到了一个装饰椭圆top_half Arc(start-1, radius12j, rotation0, large_arc1, sweep1, end1) bottom_half top_half.rotated(180) # 绕弧心旋转180度 ellipse Path(top_half, bottom_half) for k in range(12): ellipse.append(midline.rotated(30 * k)) # 12条30度间隔的装饰线想绕画布原点或其他指定点旋转传入复数即可path.rotated(90, origin0j)。如何平移路径.translated() 复数向量一步到位平移最简单——.translated(z0)把整条曲线沿复数量z0移动满足translated(z0).point(t) point(t) z0。p2 path.translated(300 400j) # 向右移300、向下移400 p3 path.translated(5) # 只向右移5注意z0是位移向量而不是目标坐标它只改变位置不改变形状、方向和长度。如何缩放路径.scaled() 均匀与不均匀缩放.scaled(sx, syNone, origin0j)按对角矩阵[[sx,0],[0,sy]]围绕origin默认坐标原点0j缩放path.scaled(2) # 均匀放大2倍sy 缺省等于 sx path.scaled(1.5, 0.5) # X轴放大1.5倍、Y轴压缩到0.5倍 path.scaled(2, origin100100j) # 绕点 (100,100) 缩放三个实用技巧负数缩放 缩放 180° 旋转例如scaled(-1)等价于关于原点做镜像翻转。不均匀缩放会拉斜贝塞尔曲线但Line缩放后仍是直线段。⚠️Arc弧只支持均匀缩放sx sy传入不同的sx、sy会抛出异常——因为椭圆弧无法在任意斜缩放下保持精确的弧参数。如何反转路径方向.reversed() 一键掉头.reversed()返回方向相反的副本起点与终点互换贝塞尔控制点顺序颠倒对Arc弧内部会将sweep标志取反以保持同一段弧。path_back path.reversed() # 从原终点走回原起点它的妙处在于几何不变、参数翻转曲线本身一模一样只是行进方向相反。因此反转后的切向量、法向量都会指向相反方向这在需要沿路径反向排布箭头、文字或做反向偏移时非常有用。进阶玩法用齐次矩阵做任意复合变换如果旋转、平移、缩放还不够transform(curve, tf)可以接受任意 3×3 齐次变换矩阵一次完成旋转平移缩放错切的组合import numpy as np tf np.array([[0, -1, 100], # 旋转90度 平移(100, 0) [1, 0, 200], [0, 0, 1]]) new_path path.transform(tf) # 或直接 import transform 使用它对Arc的处理也最聪明能自动解出变换后椭圆的新半径、新轴旋转角甚至在退化时把弧变成直线段。4个新手实用要点所有变换都返回新对象非破坏性原路径安然无恙方便 A/B 对比或链式调用path.rotated(90).translated(1000j).scaled(0.5)。坐标一律写复数点 (100, 200) 写作100 200j。多段路径的连接点会保持连续内部transform_segments_together机制保证变换前后路径的接点始终贴合不会出现段与段脱节。变换结果可以直接落盘用wsvg写出 SVG 文件或用disvg自动在浏览器中打开预览效果一目了然。在哪里看源码与更多示例变换函数与类方法svgpathtools/path.pyrotate/translate/scale/transform函数及各段的rotated/translated/scaled/reversed方法SVG 文件读写svgpathtools/paths2svg.pywsvg、disvg、svgpathtools/svg_to_paths.pysvg2pathsd 字符串解析svgpathtools/parser.py变换行为测试test/test_path.py完整使用教程与更多图形示例README.md掌握这 4 个方法加 1 个矩阵函数svgpathtools 的几何变换能力就已经全部解锁——下一站不妨试试用它计算两条路径的交点或偏移曲线【免费下载链接】svgpathtoolsA collection of tools for manipulating and analyzing SVG Path objects and Bezier curves.项目地址: https://gitcode.com/gh_mirrors/sv/svgpathtools创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表