docs: 新增线图层的箭头文档

This commit is contained in:
2912401452 2022-04-13 17:22:00 +08:00
parent e387ffcd6e
commit ade88c0960
1 changed files with 29 additions and 0 deletions

View File

@ -57,6 +57,35 @@ layer.size('height', []);
[在线案例](/zh/examples/line/isoline#ele)
#### arrow: IArrowOption
线图层支持配置箭头
```javascript
// 配置箭头 IArrowOption
layer.style({
arrow: {
enable: true, // 是否开启箭头、默认为 false
arrowWidth: 2, // 箭头的宽度、默认值为 2、与线的 size 相关
arrowHeight: 3, // 箭头的高度、默认值为 3、与线的 size 相关
},
})
```
[在线案例](/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*FL4mT4RCfIgAAAAAAAAAAAAAARQnAQ'/>
如上图所示,对于配置箭头的线,我们插入额外的顶点用于构建箭头,同时我们会在顶点着色器中对新插入的顶点以及原有的顶点进行一定的偏移,让构建我们需要的箭头形状。
✨ 由于线图层在配置箭头/不配置箭头的这两种情况对顶点的处理不同,因此我们在切换这两种情况的时候需要重构线图层对象。
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
`markdown:docs/api/line_layer/features/linear.zh.md`