Fabric.js: Pattern streched on scaled SVG (feature request ?)

[ncou]

Hi,

I have a SVG with default width/height = 32pix (it's a square).
I scale this object, and I once the scale is finish i want to apply a pattern image.

The pattern seems to be first applied on the 32x32 size svg then stretched after (the result is a big pattern stretched on all the square).

I think the normal behaviour should be to put the pattern on the shape with the scaled width and height.

I don't know if this could be a possible feature request, somethink somethink like a parameter "applyAfterScale = true" on the pattern object to always have a pattern scale = 1.0 even if the object si scaled X times (even if you strech the object, the pattern size will not change).

Not sure if i am enought clear.

Here is a fiddle with on the left the scaled square, and on the right a scare without scale only width/height

UPDATE 22/07/2017 :
Broken with v2.0 : http://jsfiddle.net/QT3pa/154/
Here new fiddle for 2.0 : http://jsfiddle.net/QT3pa/211/

What are you thinking about this ?

[asturur]

patterns need more advanced functions to not be scaled and to be rotated properly. is something relatively easy to be done that i will probably do.

need to finish other stuff before.

[ncou]

great news. thank you. can't wait to test this new feature. have a good night.

[ncou]

Hi,

Thank you for the modification, does those changes will be included in the next version ?
Have a good day.

[asturur]

i would.
1.7.4 will not have it.
but then i should merge it. i m uncertain how to handle the new parameters and what parameters to add.

[ncou]

Thank you for the answer, and for your efforts.
Have a good day.

[McMalloc]

Are there any additional insights on this one? I noticed that this behaviour is also present when dealing with image patterns, reproduceable in the Dynamic Patterns demo: When you increase the size of the polygon by dragging the scale handle of the object and then decrease the size of the source image by using the Pattern image width slider the pattern gets blurred.

[asturur]

no, no progress on new patterns.

[Ramyakutralam]

Hi , i m using fabric 2.2.3. I 'm trying to apply pattern for the selected objects like rect and circle. but the problem is while scaling the rectange image is also being stretched. Is there any way i can restrict it?

Thanks in advance

[lonelydatum]

I just upgraded to "fabric": "3.3.2" and I'm also getting the same results. When scaling the shape is it possible to preserve the Pattern so it doesn't scale up/down when the shape changes? I'm releasing a feature for my app and I'd really like to resolve this so I can push this feature out with my app. Thanks for the great library.

[asturur]

is not directly supported.
But the pattern has a property called patternTrasnsform.
You could set that transform to a scale matrix that does the inverse of the shape scaling.
Example: fill.patternTransform = [1/scaleX, 0 ,0, 1/scaleY,0,0];

This could do it, even if is not a fabricJS direct feature.

[lonelydatum]

@asturur Amazing. I'll try that. Thanks so much for the help.

[asturur]

remember to invalidate the object cache when you set the transform.
Changing the transform of the pattern will not automatically invalidate the cache.

[lonelydatum]

Yep. Thanks for the heads up.

[lonelydatum]

Thanks it works like a charm. I just have to apply the transformation when onScale I guess.