Closed Carlo-C2 closed 2 months ago
Sorry for the delay on this. As of v0.7.13
the default unit space for gradients changed from screen space to object space. This means that all values are written in 0 - 1 notation as a percentage instead of projected world space pixels. So your demo would need to be like this instead:
// Create a radial gradient with reverse colors
const cx = 0.5; // where 0 is the left side of the object and 1 is the right most
const cy = 0.5; // where 0 is the top side of the object and 1 is the bottom
const r = 0.5; // where 0 is nothing and 1 is the minimum of the width or height of the object
const gradient = two.makeRadialGradient(
0.5, 0.5, 0.5, // x, y, radius
new Two.Stop(0, 'grey'),
new Two.Stop(1, 'white')
);
This being said, there was a discrepancy between how the percentage of gradients were applied between SVG and Canvas renderers. I just patched this so they operate the same.
Alternatively, you can switch the unit space that the gradient is applied in like so:
gradient.units = 'userSpaceOnUse'; // Now all values are read as pixels
Thanks for the thorough reply, no worries for the delay. I'll evaluate what fits best, but I'll close this issue regardless since you both patched it and provided a solution with the previous version
Describe the bug A RadialGradient assigned to Path.fill no longer works correctly since 0.8.0 version. A circle with a solid color will be displayed instead of a radial gradient with fade out.
To Reproduce Steps to reproduce the behavior:
Copy-Paste the following code in a
test.html
file (or copy paste the contents of thescript
section)test.html
in any browserscript src
(line 15) from0.8.3
to0.7.9
Expected behavior It should appear a Circle with a radial fade out instead of a solid grey
Screenshots 0.8.3![image](https://github.com/jonobr1/two.js/assets/171780607/d2063f17-006f-4a61-bc9a-57be622ff7d0)
0.7.9![image](https://github.com/jonobr1/two.js/assets/171780607/12c1b8d4-7c03-4674-9643-723d57231114)
Desktop:
EDIT: I admit I've quickly read the changelog and the release notes, which could be the reason why I didn't read anything that should have broken this functionality. TypeScript claims Path.fill can accept string|Gradient|Texture but if that's not the case, please point me in the right direction. Thanks in advance.