search

thx / resvg-js

A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
https://resvg-js.vercel.app/
Mozilla Public License 2.0
1.57k stars 57 forks source link

feat: rewrite color picker and add alpha picker #337

Closed yisibl closed 6 months ago

yisibl commented 6 months ago

We've combined input range and input color into one to keep it aesthetically pleasing and harmonious on the UI.

Here are a few tips:

  1. Bind a click event to the input range to call color.showPicker().
  2. input range is responsible for changing the alpha, and then color-mix() mixes the color and alpha to get the new color.
  3. The color format obtained through getComputedStyle is color(), need to be converted to rgba() by convertColorToRGBA(), because resvg-js doesn't support color().
  4. Use anchor positioning to make the color picker's popover follow the slider thumb.

Currently only Chrome is supported.

Closes: https://github.com/yisibl/resvg-js/issues/336

https://github.com/yisibl/resvg-js/assets/2784308/5d107eef-29c5-4ef8-986d-4055c19843aa

vercel[bot] commented 6 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
resvg-js ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 28, 2024 3:44pm