Tui.image-editor: After free drawing and rotate the canvas,the drawing don't set to the right position.

[cocoroise]

Version

lastest master

Development Environment

Google Chrome Canary

Current Behavior

1. select draw mode,draw a random line on the canvas.
2. use rotate tool
3. the freedrawing line don't show on the right place,but others position of shape is correct.

Expected Behavior

I want the freedrawing line stay on the right place after rotate.And wonder why only freedrawing mode will cause the problem.Is any different between freedrawing and other line or shape?

[cocoroise]

i add a zoom and pan tool,code put on graphics.js

_onMouseWheel(fEvent) { const delta = fEvent.e.deltaY / 1000; let zoom = this._canvas.getZoom(); zoom = zoom + delta; if (zoom > 5) { zoom = 5; } if (zoom < 1) { zoom = 1; } this._canvas.setZoom(zoom); this._canvas.calcViewportBoundaries(); fEvent.e.preventDefault(); fEvent.e.stopPropagation(); }

[jinwoo-kim-nhn]

All the features were considered along with the zoom feature and not implemented.

There is no specific support plan for the zoom function yet, but we will consider it for further improvement.

Adding it looks nice and positive. This is open source, so you can contribute directly.

thanks

[cocoroise]

All the features were considered along with the zoom feature and not implemented.

There is no specific support plan for the zoom function yet, but we will consider it for further improvement.

Adding it looks nice and positive. This is open source, so you can contribute directly.

thanks

ok,but now i got some problems in free drawing.when I finish my project maybe i will contribute soon.

[cocoroise]

hey,I found the problem lies in a parameter..
In the _onPathCreated() method in graphics.js,
when set
SELECTION_STYLE.originX = 'left'; SELECTION_STYLE.originY = 'top';
will cause rotate problem like above.
if set
SELECTION_STYLE.originX = 'center'; SELECTION_STYLE.originY = 'center';
will cause freedrawing misplaced after painting.
bbbbbbut i dont know how to fix it yet.😥

[jinwoo-kim-nhn]

@cocoroise Yes. The problem occurred after upgrading the dependent fabric version to 3.x.x. We know it and plan to fix it, but still too busy to fix it. Please wait a minute.

Thanks for the hints to fix the bug.

[cocoroise]

@cocoroise Yes. The problem occurred after upgrading the dependent fabric version to 3.x.x. We know it and plan to fix it, but still too busy to fix it. Please wait a minute.

Thanks for the hints to fix the bug.

I found a hack way to fix it, but i dont know whether it will cause other problems.
IN /components/rotation.js ---> _rotateForEachObject()
````
canvas.forEachObject((obj, index) => {
let objCenter = obj.getCenterPoint();

      // if the obj is freedrawing 
      if (obj.type === 'path') {
            // got the right positon 
            objCenter = obj.getPointByOrigin('left', 'top');
        }

        const radian = fabric.util.degreesToRadians(angleDiff);
        const newObjCenter = fabric.util.rotatePoint(objCenter, oldImageCenter, radian);
        obj.set({
            left: newObjCenter.x - centerDiff.x,
            top: newObjCenter.y - centerDiff.y,
            angle: (obj.angle + angleDiff) % 360
        });
        obj.setCoords();
    });

````
If you got other better way to fix it ,please tell me ,thanks😛.

[jinwoo-kim-nhn]

Thank you so much for your help. This is a critical bug and will be fixed as soon as possible.

In my opinion this problem is known as a problem of free curve function which is not related to rotation function. -> #228

But don't worry. I will test it seriously and fix it. soon...

[cocoroise]

Thank you so much for your help. This is a critical bug and will be fixed as soon as possible.

Thank you so much for your help. This is a critical bug and will be fixed as soon as possible.

In my opinion this problem is known as a problem of free curve function which is not related to rotation function. -> #228

But don't worry. I will test it seriously and fix it. soon...

thanks❤

[uttam9300]

After zooming crop is also not working properly.

[cocoroise]

After zooming crop is also not working properly.

yes , before crop you should setZoom(1) .

[uttam9300]

After zooming crop is also not working properly.

yes , before crop you should setZoom(1) .

How can i disable mousewheel when i click on crop button, please help.

[PabloRoldanCRM]

Miss @cocoroise hi, I'm using the example. how to do that on example03-mobile ? any help? thanks. there is not the graphics.js just (tui-image-editor.js,service-mobile.js). thanks.

[cocoroise]

Miss @cocoroise hi, I'm using the example. how to do that on example03-mobile ? any help? thanks. there is not the graphics.js just (tui-image-editor.js,service-mobile.js). thanks.

hi ,maybe you can check to master ,and go to src/js/graphics.js, after change the gra.js ,run npm run bundle，generate the tui-image-editor.js yourself.

[cocoroise]

After zooming crop is also not working properly.

yes , before crop you should setZoom(1) .

How can i disable mousewheel when i click on crop button, please help.

sorry ,i had try,but false...
i add this code in components/cropper.js but didnt work😥
javascript _onFabricMouseWheel(fEvent) { fEvent.e.stopPropagation(); fEvent.e.preventDefault(); }

[mamayadi]

@cocoroise can you share the full code?
Thanks

[cocoroise]

@cocoroise can you share the full code?
Thanks

i make some change ,this is my code😊

[mamayadi]

@cocoroise can you share the full code?
Thanks

i make some change ,this is my code😊

@cocoroise Thank you so much 😊