• G6Editor 边的参数配置


      ⚠️ 注意: 当边太细交互不易命中时,请设置 lineAppendWidth 属性值。

    属性:

    属性名含义备注
    path 线条路径 可以是 String 形式,也可以是线段的数组。
    startArrow 起始端的箭头 为 true 时在边的结束端绘制默认箭头,为 false 时不绘制结束端箭头。也可以是一个通过 path 自定义的箭头
    endArrow 末尾端的箭头 为 true 时在边的开始端绘制默认箭头,为 false 时不绘制开始端箭头。也可以是一个通过 path 自定义的箭头
    lineAppendWidth 边的击中范围 提升边的击中范围,扩展响应范围,数值越大,响应范围越广
    lineCap 设置线条的结束端点样式  
    lineJoin 设置两条线相交时,所创建的拐角形状  
    lineWidth 设置当前的线条宽度  
    miterLimit 设置最大斜接长度  
    lineDash 设置线的虚线样式,可以指定一个数组 一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

    用法:

     1 group.addShape('path', {
     2   attrs: {
     3     startArrow: {
     4       // 自定义箭头指向(0, 0),尾部朝向 x 轴正方向的 path
     5       path: 'M 0,0 L 20,10 L 20,-10 Z',
     6       // 箭头的偏移量,负值代表向 x 轴正方向移动
     7       // d: -10,
     8     },
     9     endArrow: {
    10       // 自定义箭头指向(0, 0),尾部朝向 x 轴正方向的 path
    11       path: 'M 0,0 L 20,10 L 20,-10 Z',
    12       // 箭头的偏移量,负值代表向 x 轴正方向移动
    13       // d: -10,
    14     },
    15     path: [
    16       ['M', 100, 100],
    17       ['L', 200, 200],
    18     ],
    19     stroke: '#000',
    20     lineWidth: 8,
    21     lineAppendWidth: 5,
    22   },
    23   // must be assigned in G6 3.3 and later versions. it can be any value you want
    24   name: 'path-shape',
    25 });

    附:G6最新文档:https://g6.antv.vision/zh/docs/manual/introduction

     

  • 相关阅读:
    七层协议&网络配置
    解决跨域问题
    拖拽 ‘vue-grid-layout’ 插件了解下
    详解vuex
    在腾讯出差的日子
    对象的解构赋值应用
    MQTT项目请求设置
    五分钟搞定Go.js
    Chrome使用video无法正常播放MP4视频的解决方案
    微信小程序地图开发总结
  • 原文地址:https://www.cnblogs.com/minjh/p/15266642.html
Copyright © 2020-2023  润新知