Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[g-canvas] 贝塞尔曲线拾取效率很低 #1193

Closed
xiaoiver opened this issue Oct 31, 2022 · 1 comment
Closed

[g-canvas] 贝塞尔曲线拾取效率很低 #1193

xiaoiver opened this issue Oct 31, 2022 · 1 comment
Assignees
Labels

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Oct 31, 2022

目前在 g-plugin-canvas-picker 中使用的判定点是否在曲线上的方法效率比较低,这也是切换到 SVG 不卡的原因(使用原生 DOM API):

截屏2022-10-31 上午11 15 49

参考 4.0 的实现优化如下:

  • 在初始化阶段为 Path 的每个 Segment 生成单独的包围盒
  • 拾取时优先根据各个 Segment 的包围盒快速判断,再做精确拾取计算,可以显著提升效率

Snap.svg 的实现:
https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js#L409-L413

由此引发的另一个问题是,在 Path 初始化阶段是否有必要统一转化成三阶贝塞尔曲线。这一步的本意是:

  1. 在做 Morph 形变动画时,利用三阶贝塞尔曲线易于分割的特性,可以直接对任意两个 Path 插值
  2. 在渲染器、拾取器中对 Path 需要处理的情况显著减少,可以认为仅包含 M C Z 三种命令

但问题就在于这一步 path2Curve 会有一定的开销。理想的做法应该是推迟转换的时机。

@xiaoiver xiaoiver added the bug label Oct 31, 2022
@xiaoiver xiaoiver self-assigned this Oct 31, 2022
@xiaoiver
Copy link
Contributor Author

优化后效果如下,会流畅非常多:

Oct-31-2022 14-07-24

xiaoiver added a commit that referenced this issue Nov 1, 2022
…1193 (#1194)

* chore: remove prepublish build script

* fix(g-lottie-player): both canvas and mounted display object can be used as container of lottie

* fix(g-svg): use curved path when marker applied #1191

* chore: fix test case for marker

* fix: preprocess path and generate bbox of each segment for later use #1193

* chore: add test case for clippath

* fix(g-canvaskit): support clippath

* chore: update test case for path

* Publish

 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
 - @antv/[email protected]
@xiaoiver xiaoiver closed this as completed Nov 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant