Polygon

Delineate object contours more precisely with editable polygons.

Try our demo below !

The demo shows how to easily embed and customize a polygon annotation element in a web-based application.
To create a polygon, enter creation mode, and click polygon vertices, then close it by pressing Enter or double-clicking.
Edition mode: resize or edit vertices (click twice on the polygon).

Easily write your own annotation application in Javascript using the rectangle element:

Copy to Clipboard

import { css, html, LitElement} from 'lit-element';
import '@pixano/graphics-2d';

const colors = [
  'blue', 'green', 'purple',
  'yellow', 'pink', 'orange', 'tan'
];

class MyDemoPolygon extends LitElement {

onCreate(evt) {
    // listening to the create event dispatched
    // by the element to assign a nice color to
    // the new rectangle.
    const newObj = evt.detail;
    newObj.color = colors[this.element.shapes.size % colors.length];
    this.element.mode = 'update';
  }

get element() {
    // Utility getter of the element
    return this.shadowRoot.querySelector('pxn-polygon');
  }

render() {
    // Render the template with the polygon element
    // enriched with some buttons to interact with it.
    return html`
    <pxn-polygon image="image.jpg" @create=${this.onCreate}></pxn-polygon>
    <div>
        <button @click=${() => this.element.mode = 'create'}>Add</button>
        <button @click=${() => this.element.viewControls.zoomIn()}>+</button>
        <button @click=${() => this.element.viewControls.zoomOut()}>-</button>
    </div>`;
  }
}

customElements.define('my-demo-polygon', MyDemoPolygon);

Browse the complete code on GitHub

Third party