Enhancements to Polygon Editing

[koooee]

I have a few additional functionality requests to the following example: http://fabricjs.com/custom-controls-polygon

Editing polygons is an incredibly useful example, however, to get additional common functionality like append, delete, edit appears to be possible but non trivial to implement with the current library. If there was a way to easily:

1. Append a vertex into the existing polygon object
2. Delete a vertex from the polygon object
3. Gracefully handle tight corners and adjacent corners with smoothing effects

I think these enhancements would be a great addition to this library.

[asturur]

Hi Nick, just a follow up that i have been busy but i did not forget about this.

[asturur]

@koooee i have been out and busy. How are you doing with your project? i plan to look at this demo monday/tuesday.

[koooee]

All good, things are going well. Still blocked on getting this figured out so any help you can provide would be appreciated.

[koooee]

@asturur did you get a chance to check this out?

[ShaMan123]

This is something that might be relevant https://codesandbox.io/s/jovial-kilby-qt4eq4

[biggestdickus]

4/15/2024 : Here's an excellent work around that can be drawn, resized, moved, rotated, edited on a single or multiple polygons. http://codepen.io/Rstewart/details/VwNBZwJ

[pixobe]

Whoever coming here for editable polygon with controls, the latest version makes it easier

  const points = [
      { x: 250, y: 250 },
      { x: 500, y: 250 },
      { x: 600, y: 350 },
      { x: 500, y: 500 },
      { x: 250, y: 500 },
    ];

    const room = new Polygon(points, {
      left: 50,
      top: 50,
      fill: '#f1f1f1',
      strokeWidth: 4,
      stroke: 'green',
      objectCaching: false,
    });

    room.controls = controlsUtils.createPolyControls(5);
    room.hasBorders = false;
    room.cornerColor = 'green';
    room.cornerStyle = 'circle';

    this.fabricCanvas.add(room);
    this.fabricCanvas.requestRenderAll();