search

antvis / util

utility library for AntV products.
MIT License
74 stars 28 forks source link

path-util 转三次贝塞尔曲线方法有误 #68

Closed xiaoiver closed 2 years ago

xiaoiver commented 3 years ago

为了方便地计算包围盒、路径长度以及后续形变动画，我们会将路径各个命令（L、A、Q）转成 C(三次贝塞尔曲线)。

其中 A 命令转换存在问题，导致绘制效果有误：

截屏2021-09-07 下午4 15 33
xiaoiver commented 3 years ago

fixed in v2.0.12

xiaoiver commented 3 years ago

由于 Z 命令也会转曲（连接起点和终点），但并不会处理接头，导致 g-canvas 在绘制时会有无法闭合（左上角）的效果，在转曲后仍应当保留 Z：

截屏2021-09-09 上午11 13 03

目前我们的做法是在转曲之后，保存一份 Z Command 的索引列表，在 Canvas 绘制时使用。

xiaoiver commented 2 years ago

另外之前的实现参考了 rapheal.js，它的问题是 A 命令无法正确进行转换： https://github.com/DmitryBaranovskiy/raphael/blob/master/dev/raphael.core.js

目前看到一个比较好的实现是 https://github.com/colinmeinke/svg-arc-to-cubic-bezier