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

[Feature] graphic can be clipped by path or image #1719

Open
xiaoluoHe opened this issue Feb 10, 2025 · 1 comment
Open

[Feature] graphic can be clipped by path or image #1719

xiaoluoHe opened this issue Feb 10, 2025 · 1 comment
Assignees

Comments

@xiaoluoHe
Copy link
Contributor

xiaoluoHe commented Feb 10, 2025

What problem does this feature solve?

  1. Image 图元,支持路径裁剪:

    • 方案一:Image 支持 clipPath 属性
    • 方案二:与 group 图元的 clip 属性统一
  2. 支持图片蒙版功能(如下图):

  • 方案【待定】: globalCompositeOperation "source-atop" + 指定混合背景层
Image

Image

What does the proposed API look like?

  1. image.clip or image.clipPath

  2. image.compositeSource

@xiaoluoHe
Copy link
Contributor Author

图片蒙版使用 globalComposition: 'source-atop' 方案,可能不行;

  1. 蒙版是二值化后的黑白图片,而非 png;在图云中,并不希望将蒙版绘制到 canvas 上;
  2. target 透明度会受 source 透明度影响,如下图,背景图片 opacity: 0.1, 其余图片 opacity:1
    结果颜色 = (源颜色 × 目标alpha) + (目标颜色 × (1 - 源alpha))
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants