docs: 补充 arrow 的 tailWidth 配置以及相关 demo

This commit is contained in:
2912401452 2022-04-18 18:57:29 +08:00
parent 4b5e86a009
commit 9a1fc41860
2 changed files with 7 additions and 5 deletions

View File

@ -68,13 +68,14 @@ layer.style({
enable: true, // 是否开启箭头、默认为 false
arrowWidth: 2, // 箭头的宽度、默认值为 2、与线的 size 相关
arrowHeight: 3, // 箭头的高度、默认值为 3、与线的 size 相关
tailWidth: 1, // 配置箭头的时候支持设置线尾部的宽度
},
});
```
[在线案例](/zh/examples/line/path#arrow)
<img width="40%" style="display: block;margin: 0 auto;" alt="参数" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bjjnQp7ZESoAAAAAAAAAAAAAARQnAQ'/>
<img width="40%" style="display: block;margin: 0 auto;" alt="参数" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Muz8TLM2a0kAAAAAAAAAAAAAARQnAQ'/>
为了构造箭头,我们会在处理数据的时候插入多余的节点用于构造节点(为了不增加额外的消耗,普通线不会进行插入操作)。

View File

@ -123,13 +123,14 @@ const lineLayer = new LineLayer({})
]
}
)
.size(1.5)
.size(2)
.shape('line')
.style({
arrow: {
enable: true,
arrowWidth: 4,
arrowHeight: 6
arrowHeight: 4,
tailWidth: 0.4
}
})
.color('#f00');