G

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

如下示例定义了一条折线，各个端点依次为：

const polyline = new Polyline({
    style: {
        points: [
            [50, 50],
            [100, 50],
            [100, 100],
            [150, 100],
            [150, 150],
            [200, 150],
            [200, 200],
            [250, 200],
            [250, 250],
            [300, 250],
            [300, 300],
            [350, 300],
            [350, 350],
            [400, 350],
            [400, 400],
            [450, 400],
        ],
        stroke: '#1890FF',
        lineWidth: 2,
    },
});

对于折线，默认锚点定义的位置为包围盒左上角顶点，其中各个端点坐标均定义在局部坐标系下。因此如果此时获取上面折线在局部坐标系的坐标，会得到包围盒左上角的坐标，也恰巧是第一个顶点的坐标，即 [50, 50]：

polyline.getLocalPosition(); // [50, 50]

继承自

继承了 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'

因此以下两种写法等价：

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

可以参考 SVG 的同名属性。

markerStart

可以参考 Line 的 markerStart 属性。

“起始点” 由 points 中的第一个点决定。

在该示例中，我们在折线的起始点上放置了一个箭头：

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',
    },
});

polyline.style.markerStart = arrowMarker;

markerEnd

可以参考 Line 的 markerEnd 属性。

“终止点” 由 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',
    },
});

polyline.style.markerEnd = imageMarker;

markerMid

可以参考 SVG 的同名属性。

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

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

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

polyline.style.markerMid = circleMarker;

markerStartOffset

可以参考 Line 的 markerStartOffset 属性。

沿折线的第一个线段方向移动标记图形。需要注意的是，如果偏移距离超过了原始线段的长度，会向反方向延伸：

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

markerEndOffset

可以参考 Line 的 markerEndOffset 属性。

沿折线的最后一个线段方向移动标记图形。需要注意的是，如果偏移距离超过了原始线段的长度，会向反方向延伸。在该示例中，我们使用该属性移动标记图形：

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

isBillboard

3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像。默认值为 false。

方法

getTotalLength

获取折线长度。

https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength

getPoint

根据长度比例（取值范围 [0-1]）获取点。

参数如下：

ratio 必填，长度比例
inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false

其中 Point 的格式为:

export type Point = {
    x: number;
    y: number;
};

getPointAtLength

沿路径返回给定距离的点。

参数如下：

distance 必填，从起点出发的距离值
inWorldSpace 可选，表示是否在世界坐标系下计算。默认值为 false

https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength

polyline.getPointAtLength(100); // Point {x: 300, y: 100}

getStartTangent

获取起点的切向量，形如: [[10, 10], [20, 20]]

getEndTangent

获取终点的切向量，形如: [[10, 10], [20, 20]]

3D Polyline

和 Line 一样，折线也可以定义在三维空间：

const polyline = new Polyline({
    style: {
        stroke: '#1890FF',
        lineWidth: 10,
        lineCap: 'round',
        lineJoin: 'round',
        points: [
            [50, 50, 0],
            [100, 50, 100],
            [100, 100, 0],
            [150, 100, 100],
            [150, 150, 0],
            [200, 150, 0],
            [200, 200, 0],
            [250, 200, 0],
        ],
    },
});

效果如下：

3D polyline

但如果应用了公告牌效果，3D 效果将消失示例。

Polyline 折线

继承自