Tui.image-editor: Draw tool issue #1 - strokes change its position by itself

[onadein]

Version

3.5.3 and 3.6.0

Development Environment

Chrome, Windows

Current Behavior

1. Go to http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi/
2. Select Draw tool.
3. Draw first stoke.
4. When starting to draw second stroke - first stroke moved.
5. When starting to draw third stroke - second stroke moved.
   etc.
   See screen capture attached.
   
   draw_tool_issue_1.zip

Expected Behavior

Previous strokes shouldn't change its position when drawing some more ones.

[ThierryNapspirit]

Same issue on Linux: Chrome and Firefox.

[ThierryNapspirit]

May be a bug / regression from fabric.js
I have found this similar issue: https://github.com/fabricjs/fabric.js/issues/5705

But it should be fixed now on frabric.js ....

[shreyanshsheth26]

I am facing same issue in angular 8 version,
i have installed fabric "fabric": "^3.3.0-browser",

[jiyangmax]

How can I fix it?

[junghwan-park]

I checked this issue very briefly, I think fabric.js and ImageEditor's canvas dimension is not synchronized. Fabric.js re-render already rendered free drawing lines when new line has to first render. Already rendered free drawing line's position was slightly mismatched.

I'll dig down this issue and find out what's the exact reason of free drawing line jumping.

[treztreiz]

Hey, is there a fix for this bug ? Thank you.

[aldrashan]

Hey, is there a fix for this bug ? Thank you.

Or can anyone tell us what the latest compatible versions that don't have bugs are?

[treztreiz]

Hey, is there a fix for this bug ? Thank you.

Or can anyone tell us what the latest compatible versions that don't have bugs are?

Using the 1.6.7 version of fabric.js seems to prevent this bug.
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js

[sphildreth]

Hey, is there a fix for this bug ? Thank you.

Or can anyone tell us what the latest compatible versions that don't have bugs are?

Using the 1.6.7 version of fabric.js seems to prevent this bug.
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js

Be aware with this 1.6.7 fabric version several of the filters (Greytone, Sepia, Vintage, etc.) don't seem to work the same (invalid parameter exceptions get thrown) as current fabric version.

[aldrashan]

Hey, is there a fix for this bug ? Thank you.

Or can anyone tell us what the latest compatible versions that don't have bugs are?

Using the 1.6.7 version of fabric.js seems to prevent this bug.
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js

Be aware with this 1.6.7 fabric version several of the filters (Greytone, Sepia, Vintage, etc.) don't seem to work the same (invalid parameter exceptions get thrown) as current fabric version.

For some reason the drawing on mobile isn't working properly there either. Touch coordinates seem to "lag behind" i.e. touch coordinate starts at the correct position but starts to be incorrect when moving your finger around. Don't think it's getting scaled to the correct position properly when the canvas is larger than the screen size. Probably fixed in a later version but alas...

[Mater1996]

I think it was caused by originX and originY being incorrectly set

in graphics.js

_onPathCreated(obj) {

        var SELECTION_STYLE = Object.assign({},consts.fObjectOptions.SELECTION_STYLE)
        SELECTION_STYLE.originX = 'left'
        SELECTION_STYLE.originY = 'top'
        obj.path.set(SELECTION_STYLE);
        const params = this.createObjectProperties(obj.path);

        this.fire(events.ADD_OBJECT, params);
 }

this is right

[rainbowcatcher]

Is there a plan to fix this bug?

[aborja79]

Is there any fix?

[ViniciusGularte]

Any fix to this?

[jinwoo-kim-nhn]

280

[jinwoo-kim-nhn]

resolved at 3.7.1