-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
fix(): gradient transform + rm workarounds #9359
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
base: master
Are you sure you want to change the base?
Conversation
|
Build Stats
|
4b804f1 to
a6d4269
Compare
a6d4269 to
7db3da4
Compare
ShaMan123
left a comment
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
_applyPatternGradientTransformTextWhen 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.
setTransformso I used that insteadgradientTransformis 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
toLiveBREAKING:
toLive(ctx) =>toLive(ctx, target)`_applyPatternGradientTransformText,_applyPatternGradientTransformGist
In Action