Fabric.js: Line thickness increasing on re-sizing the object

[Thirumalaimurugan]

Select an object, say rectangle.
Draw a rectangle with stroke
Re-size the rectangle towards outwards
Observe the thickness of the rectangle border while re-sizing outwards.

Observed Defect:
Line thickness increasing while re-sizing the object (rectangle) towards outwards.

[kangax]

It's not clear what you're talking about. Can please you create jsfiddle.

[Thirumalaimurugan]

http://jsfiddle.net/thirumalaimurugan/a99L7/ select that rectangle and resize that while your resize the border(strock) size also increasing, border size should not be increased

[kangax]

This is by design. Border is part of an object. When you scale an object, its border and its contents increase.

[Thirumalaimurugan]

Dear Kangax ,

Actually that border should not increase, I accept you did in design, have you provided any other way to do this work?

On Friday, 6 December 2013, 16:15, Juriy Zaytsev [email protected] wrote:

Closed #1027.
—
Reply to this email directly or view it on GitHub.

[kangax]

You can watch "object:scaling" event and reduce stroke width accordingly

[iiiyx]

@kangax I'm sure nobody expects object's stroke width changing while resizing object.
That was a bad solution to change stroke width.
You must at least make it configurable and keeping stroke width should be a default option.

[asturur]

is in the concept of scaling.
exactly the same thing happen when you scale an svg with stroke.

[iiiyx]

@asturur Ok, it would be better to support resizing, not only scaling. I think most users expect resizing action while dragging the control box, not scaling.
I'm sure nobody expects to see this:
https://yadi.sk/i/yPGaB7Et3Y5MyD
after resizing this:
https://yadi.sk/i/53WUe9Zb3Y5N83

[asturur]

that is what scaling events are there for.

The RECT example is the classic example that makes everything looks logic, but whatever else you try, like a group or a complex path, that may not be true anymore.

[iiiyx]

User creates a shape - stroked rectangle. And user wants to keep working with this shape - stroked rectangle.
Then user decides to resize this shape and it becomes some other shape, but it is definitely not a stroked rectangle. This is not what user expects in case of stroked shapes.

Also I can't find any other tool which breaks stroke width after resizing a shape.

As for resizing SVG, it depends on the way how this SVG is created. The correct SVG with stroked rectangle will act as expected after resizing - it will keep stroke width or at least won't break the stroke line ratio.

[asturur]

if you use the scaling transformation it will behave exactly as fabricJS.
If you change the width and height it won't break. Exactly as fabricJS.

the vector-effect: preserve ( or similar name ) is a svg 2.0 feature, and is not supported by fabric.

Also fabricJS is not a tool for users, is a library for developers to build applications. The scaling events let you modify the behaviour as you want.

[iiiyx]

your library could be better if you'd pay more attention to the stroked shapes. as users of the library asked.
sure, we can implement anything we want, but if we need to bind on scaling events just to keep stroke width, then I think your library is not good enough, imho.

[asturur]

A library can't be just targeted to editors and users, since this would make it an editor SDK.
Also can't hope to support every feature and every edge case that comes from intersecting features between them.

This is an application need and in the application must be implemented.
When controls will be customizable, you can add in a control the ability to change width and height instead of scaling for example.