SVG 中的曲线编码方法
[参考] SVG中的曲线(或路径)有直线与曲线两种,其中曲线有三种:弧线,二阶贝塞尔曲线和三阶贝塞尔曲线。在给定上一个点时,到下一个点的路径除下一个点的坐标外,对于不同的曲线还由以下元素决定:
弧线:椭圆 x 方向半轴长、y 方向半轴长、旋转角度、优弧/劣弧标志、绘制方向;
二阶贝塞尔曲线:锚点位置;
三阶贝塞尔曲线:两个锚点的位置。
1. 贝塞尔曲线
[参考] 贝塞尔曲线通过控制点生成平滑的曲线,在对曲线进行拟合时可以大大节省数据量。
1.1 贝塞尔曲线的绘制
对于给定的一系列点,考虑每两个点之间都有一个中间点,匀速由第一个点向下一个点移动,在 t=0 时出发,t=1 时到达。如果获得的中间点多余一个,则以这些中间点生成一组新的中间点,直到最后只剩一个中间点。生成中间点的层数称为贝塞尔曲线的阶,最后一组中间点的轨迹记为对应阶的贝塞尔曲线。除第一个点和最后一个点外的其他点称为锚点,因为曲线并不经过这些点,而是只对结果起到锚定的作用。
1.2 贝塞尔曲线的举例
一阶贝塞尔曲线包含两个点,绘制结果为直线。
二阶贝塞尔曲线包含三个点,一个例子如下图左图。
三阶贝塞尔曲线包含四个点,一个例子如下图右图。
1.3 贝塞尔曲线的应用
在实际应用中,常用多段三阶贝塞尔曲线进行曲线的拟合,如 Photoshop 中的钢笔工具,在绘制曲线时会为每个点伴随两个锚点,分别用作以其为终点、起点的前后两端曲线的绘制。如上图所示,在钢笔工具中,A、D 为起点和终点,B、C 分别为 A 和 D 的锚点。
如果以 D 点开始继续绘制下一段曲线,则 D 将产生第二个锚点。对于没有锚点的点,则认为其锚点与自身重合。
[参考] 在 SVG 编码中的贝塞尔曲线路径,则包含二阶、三阶贝塞尔曲线两种模式。以三阶贝塞尔曲线为例,每段曲线除起始点和终点之外,也将对应两个锚点。如果是由 n 和点确定的 n-1 段曲线,则需要用 3n-2 个点的二维坐标对其进行编码。特殊的,如果一个点的两个锚点关于自身对称,则在进行编码时可以省略下一个锚点。解码时则根据上一个锚点对称地计算出下一个锚点,从而进行绘制。
2 曲线拟合
SVG 中的曲线编码方法相关推荐
- SVG中的坐标系统和坐标变换
视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...
- 使用SVG中的Symbol元素制作Icon
前言 随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果.我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给 ...
- 关于在SVG中如何实现gif动画的问题?
关于在SVG中如何实现gif动画的问题? 由于svg不支持动画,我做了个替代方法如下 step 1:先把多帧gif分成单帧并透明化 <image id="gif0" widt ...
- 关于添加图片到svg中,rails下使用js, 用parseFloat来调整force.on时的位置
注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %& ...
- [翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink=& ...
- Positional Encodings in ViTs 近期各视觉Transformer中的位置编码方法总结及代码解析 1
Positional Encodings in ViTs 近期各视觉Transformer中的位置编码方法总结及代码解析 最近CV领域的Vision Transformer将在NLP领域的Transo ...
- 【转】CSS和SVG中的剪切——clip-path属性和clipPath元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
- MySql中设置utf8编码方法
MySql中设置utf8编码方法 创建数据库,标明编码格式 CREATE DATABASE kg_movie default character set utf8; 查看数据库编码 show vari ...
- svg中元素的层级关系
svg,许多css属性并不适用与svg,其中就包含z-index: svg中的元素只会按照生成顺序层叠,后来者居上.可以使用回调强加顺序,来实现对于顺序的控制. 第二段代码在第一段之后执行,直接按照顺 ...
最新文章
- 清华学长带你从宏观角度看递归
- mysql 1236_Mysql主从同步Last_IO_Errno:1236错误解决方法
- 如何在vscode运行php代码_如何提高 PHP 代码的质量?
- [ NOIP 2008 ] TG
- 安装memcached服务和PECL关于memcache的两个PHP扩展
- 请给你的短信验证码接口加上SSL双向验证
- MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established
- 基于html的日历系统_企业信息化—APS系统(5)选型评估实战 Z 产品
- C++中menset用法
- AOP jdk动态代理
- 商务图表案例——仿经济学人分组漏斗图~
- 6.深入分布式缓存:从原理到实践 --- Memcached 周边技术
- 常用9款在线作图工具,总有一款适合你!
- DOS命令行界面打开文件
- W3C官网查找资源教程
- MinIO-linux-amd64下载
- 交换机最多可以接几个_【技术】详解一个交换机能带动多少个网络监控摄像头?...
- STM32CubeMx开发之路—使用SysTick实现微妙延时函数delay_us()
- 关于参加大数据培训机构有没有用的一些想法
- 游戏服务器架构设计的一些整理