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
[Bug] stop-opacity not supported for Canvas/Webgl renderers #645
Comments
Thanks for posting. Unfortunately, I'm not aware of a command that can be sent to Canvas renderings that can control the opacity of a stop (as can be seen here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop). Further, I don't think you can use var stop = new Two.Stop(0, 'rgba(255, 50, 50, 0.5)'); Would be eager to hear your thoughts on different implementations. |
@jonobr1 didn't have time to do deeper research but came to the same conclusion. Anyway, assuming that's the solution to set alpha for a stop, it would be cool if the renderer had converted hex + opacity value to |
Great points. I definitely should add a caveat to the documentation. I worry that there could be some other bugs or confusion if Two.js tries to handle interpreting the opacity and injecting it into the Three.js already has this type of functionality in |
Okay, the documentation is updated here: https://two.js.org/docs/effects/stop/#opacity |
Describe the bug
I used the built-in SVG interpreter to import my graphics, including linear-gradient strokes. All works well, however, the opacity property available for
Stop
is being totally ignored by renderers other than Svg.To Reproduce
Steps to reproduce the behavior:
Expected behavior
Opacity should be taken into consideration or at least a warning that opacity is not supported for a given renderer should be displayed in console. I believe a good solution would be to convert hex color to RGB values and set the opacity in
rgba
format foraddColorStop
method calls (in the case of the Canvas renderer). My ad hoc solution was setting the color asrgba
string and ignoring the stop-opacity property, but if you use the SVG importer it's very inconvenient as e.g. Figma exports svgs withstop-opacity
.I'd be happy to try to create a PR however there are multiple ways of how to solve this so I'd love to hear from the maintainers what's the preferred solution. IMO keeping colors in a Color object instead of string would be best but would also require quite a huge refactor 😅
The text was updated successfully, but these errors were encountered: