You can refer to the <polygon> element of SVG.

The following example defines a polygon.

const polygon = new Polygon({
    style: {
        points: [
            [0, 0],
            [100, 0],
            [100, 100],
            [0, 100],
        ],
        stroke: '#1890FF',
        lineWidth: 2,
    },
});

Inherited from

Inherits style property from DisplayObject.

anchor

The default value is [0, 0]. For details, see DisplayObject's anchor.

transformOrigin

The default value is left top. For details, see DisplayObject's transformOrigin.

lineWidth

Default value is '1'. See DisplayObject's lineWidth for details.

miterLimit

Default value is '4'. See DisplayObject's miterLimit

Additional Properties

points

The following two writing methods are supported.

• [number, number][] an array of points
• string points are separated by spaces, e.g., '100,10 250,150 200,110'

Thus the following two ways of writing are equivalent.

polygon.style.points = '100,10 250,150 200,110';
polygon.style.points = [
    [100, 10],
    [250, 150],
    [200, 110],
];

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points

markerStart

See markerStart property of Polyline.

But unlike Polyline, since polygons are closed, the positions of the "start" and "end" points coincide exactly, as determined by the first point in points. This is also consistent with the native SVG implementation, and the following figure shows the overlap effect after defining both markerStart and markerEnd.

In this example, we have placed an arrow at the start of the polygon.

const arrowMarker = new Path({
    style: {
        path: 'M 10,10 L -10,0 L 10,-10 Z',
        stroke: '#1890FF',
        anchor: '0.5 0.5',
        transformOrigin: 'center',
    },
});

polygon.style.markerStart = arrowMarker;

markerEnd

See markerEnd property of Polyline.

However, unlike Polyline, since polygons are closed, the positions of the "start point" and "end point" coincide exactly. The "end point" is determined by the first point in points.

In this example, we have placed a picture at the termination point of the polygon.

const imageMarker = new Image({
    style: {
        width: 50,
        height: 50,
        anchor: [0.5, 0.5],
        transformOrigin: 'center',
        transform: 'rotate(90deg)',
        src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
    },
});

polygon.style.markerEnd = imageMarker;

markerMid

You can refer to the attribute of the same name of SVG.

Place markers on each vertex of the polygon except for the "start" and "end" points.

For example, in the following figure, a Circle is placed on each vertex of the polygon except for the beginning and end.

const circleMarker = new Circle({
    style: {
        r: 10,
        stroke: '#1890FF',
    },
});

polygon.style.markerMid = circleMarker;

markerStartOffset

See the markerStartOffset property of Polyline.

Moving the marker graphic in the direction of the first line segment of the polygon will change the shape of the original polygon at the same time.

markerEndOffset

See the markerEndOffset property of Polyline.