Fabric.js: Dynamically Manipulate points of Polygon while Dragging

[delian7]

Version

1.7.0

Test Case

http://jsfiddle.net/Da7SP/270/

Steps to reproduce

Drag a green circle on the polygon's corners. At least that's how it worked in version 1.6.7.

Expected Behavior

Dragging a green circle on the polygon should dynamically manipulate the points of a polygon. Like the gif below.

Actual Behavior

Dragging a green circle does not manipulate the points.

NOTE: Uncommenting lines 38-42 in the JSFiddle presents a workaround but I cannot imagine that this is a efficient approach.

[delian7]

This might be related to https://github.com/kangax/fabric.js/issues/2197 that's where I got my workaround from

[asturur]

In your case disabling the cache is the thing to do
http://jsfiddle.net/Da7SP/271/

Consider that modifying the points is not supported by fabric ( YET ) because as you see you had to disable borders to make the polygon do not go outside them.
The points are sort of fixed since creation of shape.
This will change soon or later.

[apgeo]

The initial fiddle in the test case has an error because of broken link to Fabric JS.

Updated initial fiddle: http://jsfiddle.net/Da7SP/532/
Updated fixed fiddle (with cache disabled): http://jsfiddle.net/Da7SP/535/

[chevy07]

@asturur Can we modify the points in polygon now ? Does it change in fabricjs 2.0 ?
As I need to reshape polygon in my project, like gojs did in the link: https://gojs.net/latest/extensions/PolygonDrawing.html
Can I do the same thing in fabricjs?

[asturur]

no you cannot yet.

[garbast]

Is there a estemate on when this will be implemented? For an HTML5 imagemap area editor i need to be able to move the polygon with it's controls and to add/remove/move the controls.

[asturur]

There is a actually a demo of this for fabric 4.0
http://fabricjs.com/custom-controls-polygon

[garbast]

This is of great help. Thank you. Now i only need to figure why once i touch one of the controls the hole polygon slowly drifts in the opposite direction of the control im moving.

[asturur]

oh then the demo could be wrong. Does it happen on our demo too?

[garbast]

Thanks for your fast reply. The problem does not happen in your demo. My modifyed test code is available in https://github.com/evoWeb/imagemap/tree/develop/.Build/Testing and as always in an isolated environment it works fine. But in the application its moving slightly.

Beside that i'm very happy with the 4.0 beta. Thanks for the great work of the developer team.

[asturur]

the difference could be in strokeWidth zoomed canvas.

[garbast]

I fiddled around in my test and as soon as the shape has a strokeWidth if more then 0 the object starts sliding of. It is enough to have a width of 0.1 to make this happening.

@asturur can you please hint if this is fixable and where it needs to be modified? Maybe it could be shown in the demo?

[ceverard9]

Thank you @garbast, I had been trying to figure this one out for hours and it turns out it was because my object had a stroke as well. Did you happen to find a workaround?

[garbast]

No, not realy. I'm working without the border at the moment.

[asturur]

Sorry for the delay, i just updated the demo to work with stroke and canvas viewport transform

[mime490]

@asturur Thank you! The Updated Demo is no longer sliding around in my project, However when I try to bring the control points within the shape itself the point will move correctly but the object itself won't update until the control point is outside the height and width boundaries. Is there any idea as to why this might be happening? Sometimes the Objects left and top value wiggle slightly while moving the point but the polygon never snaps to the point unless the point is expanding outside the original Borders when the point was grabbed. If you drop a control before the shape updates and then grab a new control and drag it out the shape will update all points correctly.

FIXED UPDATE: Disabled Object Caching and it now functions as expected.

[asturur]

either disable object caching OR use .set('dirty', true) when you move the points.

[garbast]

@asturur thank you for your fix in the demo.

With the new polygonBaseSize the polygon doesn't slide anymore if the strokeWidth is higher then 0. With this i can confirm, that reshaping of polygons is workingas expected.

[chylek]

Hi @asturur
thanks for the demo.
Setting .set('strokeUniform', true) on the polygon in your demo results in object drifting when editing the points. Do you have any solution to that?

[asturur]

urgh ok the demo needs then to do better. If the logic becomes too much complex is not great anymore.

[azeemgujjar]

There is a actually a demo of this for fabric 4.0
http://fabricjs.com/custom-controls-polygon

extremely complex, i wasn't expecting that much code with fabricjs.
even the same behavior with vanillajs we can do in half of code and simple to understand

[asturur]

Well the polygon modification is built on top of an api.
You can for sure do it with simple javascript and no library, but once you add the control display logic, the zoom and pan, the stroke size the scale, rotation, skew, how much code you write to handle all that geometry and interactivity?

The demo probably, with some effort can be made terser.