G6 3.1 线条的属性

在节点内画出线条(同样适用于画出边)

const line = group.addShape('path', {
   attrs: {
     path: [
            [ 'M', 0, -height / 2 - 12 ],
            [ 'L', 0, -200 ]
     ],
     lineDash: [3, 5],// 虚线
     stroke: '#000',// 线的颜色
     lineWidth: 2 ,//线的宽度
     shadowColor: '#fff', // 阴影颜色
     shadowBlur: 1, // 阴影模糊
   }
 })

通用属性

fill

设置用于填充绘画的颜色、渐变或模式
对应canvas属性fillStyle

stroke

设置用于笔触的颜色、渐变或模式
对应canvas属性strokeStyle

shadowColor

设置用于阴影的颜色

shadowBlur

设置用于阴影的模糊级别
数值越大,越模糊

shadowOffsetX

设置阴影距形状的水平距离

shadowOffsetY

设置阴影距形状的垂直距离

opacity

设置绘图的当前 alpha 或透明值
对应canvas属性globalAlpha


线条 Path属性

path

线条路径
可以是String形式,也可以是线段的数组。

startArrow

起始端的箭头
为true时为默认的箭头效果,也可以是一个自定义箭头

endArrow

末尾端的箭头
为true时为默认的箭头效果,也可以是一个自定义箭头

lineAppendWidth

边的击中范围
提升边的击中范围,扩展响应范围,数值越大,响应范围越广

lineCap

设置线条的结束端点样式

lineJoin

设置两条线相交时,所创建的拐角形状

lineWidth

设置当前的线条宽度

miterLimit

设置最大斜接长度

lineDash

设置线的虚线样式,可以指定一个数组 一组描述交替绘制线段和间距(坐标空间单位)长度的数字。
如果数组元素的数量是奇数, 数组的元素会被复制并重复。
例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
如果想要连续的虚线,(类似css的虚线) 需要设置一个长度为2的数组 如 [1,3]或者[3,5]

具体样式如下

在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值