-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
fix(): gradient transform + rm workarounds #9359
base: master
Are you sure you want to change the base?
Conversation
Build Stats
|
4b804f1
to
a6d4269
Compare
a6d4269
to
7db3da4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
progress
expect( | ||
await createNodeSnapshot( | ||
(canvas, fabric) => render(canvas, fabric, { type }), | ||
{ width: 1000, height: 400 } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Something is buugy with canvas.setDimensions
on node
I tried calling it in the render
method but it doesn't work
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moved canas init to the common method
radial gradients must use a pattern :( |
radial gradients don't support transform? |
not natively |
all gradients do not but I have found a math solution for the linear gradient transform i think |
Correct me if I am wrong but it seems (radial) gradient needs context isolation to be transformed or else if transforming the context text for example will be transformed as well. |
for sure there is a math solution to transorm linear gradients because are just points in a line and we either squeeze the points or change the angle and it will look identical. But for radial gradients when circle becomes ellipses no you need to transform those. |
Motivation
#9355
I was invetigating the bug and saw that the cause was the
_applyPatternGradientTransformText
When I wrote #8263 I tried to fix this thing with a math solution and now I managed to.
Description
Previously in order to apply transform on a pattern/gradient fabric would create a canvas, transform it acoordingly and render a rect.
Then it would use the canvas to create a pattern and set that to the rendering context as fillStyle/strokeStyle.
setTransform
so I used that insteadgradientTransform
is supported only for linear gradients (don't know why but I am fine with it because then my solution is valid) so I applied the transform to the coordsThis is a very good change.
It removes a workaround that was complex, had bugs and was mentioned as a perf hit
Changes
Moved all pattern/gradient transform logic to
toLive
BREAKING:
toLive(ctx) =>
toLive(ctx, target)`_applyPatternGradientTransformText
,_applyPatternGradientTransform
Gist
In Action