G

可以参考 SVG 的 <polygon> 元素。

如下示例定义了一个多边形：

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

继承自

继承了 DisplayObject 的样式属性。

anchor

默认值为 [0, 0]。详见 DisplayObject anchor

transformOrigin

默认值为 left top。详见 DisplayObject transformOrigin

lineWidth

默认值为 '1'。详见 DisplayObject lineWidth

miterLimit

默认值 4。详见 DisplayObject miterLimit

额外属性

points

支持以下两种写法：

[number, number][] 点数组
string 点之间使用空格分隔，形如：'100,10 250,150 200,110'

因此以下两种写法等价：

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

可以参考 Polyline 的 markerStart 属性。

但和 Polyline 不同的是，由于多边形是闭合的，因此 “起始点” 和 “终止点” 的位置是完全重合的，由 points 中的第一个点决定。这也与 SVG 原生实现保持一致，下图展示了同时定义 markerStart 和 markerEnd 后的重合效果：

在该示例中，我们在多边形的“起始点”上放置了一个箭头：

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

可以参考 Polyline 的 markerEnd 属性。

但和 Polyline 不同的是，由于多边形是闭合的，因此 “起始点” 和 “终止点” 的位置是完全重合的。“终止点” 由 points 中的第一个点决定。

在该示例中，我们在多边形的终止点上放置了一个图片：

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

可以参考 SVG 的同名属性。

在多边形除了 “起始点” / “终止点” 之外的每一个顶点上放置标记图形。

例如下图中在多边形上除首尾的每个顶点上都放置了一个 Circle：

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

polygon.style.markerMid = circleMarker;

markerStartOffset

可以参考 Polyline 的 markerStartOffset 属性。

沿多边形的第一个线段方向移动标记图形，同时会改变原始多边形的形状。

初始值	适用元素	是否可继承	是否支持动画	计算值
'0'	-	否	是	<length>

markerEndOffset

可以参考 Polyline 的 markerEndOffset 属性。

初始值	适用元素	是否可继承	是否支持动画	计算值
'0'	-	否	是	<length>

Polygon 多边形

继承自