antvis/G6

When using registerEdge and update is undefined, how do you draw a custom edge of type cubic-horizontal #6307

ltdys posted onGitHub

Describe the bug / 问题描述

G6.registerEdge('flow-line', { draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; // 计算边的中点
const midPoint = { x: (startPoint.x + endPoint.x) / 2, y: (startPoint.y + endPoint.y) / 2, };

      const { style } = cfg;
      const shape = group.addShape('path', {

        attrs: {
          stroke: style.stroke,
          endArrow: style.endArrow,
          lineDash: cfg.targetNode.getModel().showType === 'D' ? [5] : [0],  // 控制实线还是虚线 sourceNode
          path: [
            ['M', startPoint.x, startPoint.y],
            // ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
            // ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
            ['L', endPoint.x, endPoint.y],
          ],
        },
      });

      const effectValue = self.graph.findById(cfg.target).getModel().effectValue || 100
      if (effectValue !== '' && effectValue !== null && effectValue !== undefined) {
        let effectValueText = ''
        let effectValuefill = ''
        if (Number(effectValue) >= 0) {
          effectValueText = `+${effectValue}%`
          effectValuefill = '#00B85C'
        } else {
          effectValueText = `${effectValue}%`
          effectValuefill = '#FF0000'
        }
        // 在边中间添加label  
        group.addShape('text', {
          attrs: {
            text: effectValueText, // 假设边配置中包含label字段  
            x: midPoint.x,
            y: midPoint.y,
            textAlign: 'center',
            textBaseline: 'middle',
            fill: effectValuefill,
            fontSize: 12,
            visible: false,
            opacity: 1
          },
          name: 'edge-label',
        });
      }

      return shape;

    },
    update: undefined
  }, 'cubic-horizontal');

代码如上,我使用自定义边。将update设置为undefined后,边的类型cubic-horizontal不生效。path怎么写才能跟cubic-horizontal的效果保持一致?还是有别的方法可以全cubic-horizontal生效。如果update不设置undefined,边的效果是生效的,但是添加的label在图形变化时位置会错位,有办法解决这个问题吗?

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

4.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

求解


posted by Aarebecca 8 months ago

Fund this Issue

$0.00
Funded

Pull requests