G2-JS/feedback

G6-editor flow 自定义图形无法设置fill、stroke等属性

Closed this issue · 0 comments

我的需求/我的问题

在g6-editor中使用带文字的自定义图形,比如矩形、圆形、菱形等图形中间是对应的label

数据以及出现问题的源代码

import G6Editor from '@antv/g6-editor';
const { Flow } = G6Editor;
// 注册输入源基类
Flow.registerNode('model-input', {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const r = 50;
    const x = r / 2;
    const y = r / 2;
    const keyShape = group.addShape('circle', {
      attrs: {
        x,
        y,
        r,
        fill: '#FA8C16',
        stroke: this.stroke_color_type,
      },
    });
    // 名称文本
    const label = model.label ? model.label : this.label;
    group.addShape('text', {
      attrs: {
        text: label,
        x,
        y,
        textAlign: 'center',
        textBaseline: 'middle',
        fill: 'rgba(0, 0, 0, 0.65)',
      },
    });
    return keyShape;
  },
  // 设置锚点
  anchor: [
    [0.5, 1], // 下边边的中点
  ],
});

Flow.registerNode('input-mysql', {
  label: 'MySQL',
  stroke_color_type: '#1890FF',
}, 'model-input');

设置左侧item的data-shape为对应的类型

<li className="getItem" data-shape="input-mysql" data-type="node">
  <span className="panel-type-icon"></span>MySQL输入源
</li>

拖拽左侧item到画布,能够得到对应形状和大小的图形,但是设置的fill、stroke没有生效。

G6-editor 的版本以及使用环境

  • 版本: 1.2.0
  • 使用环境: Windows 10, Chrome 73.0

参考的官方案例

ModelFlowEditor

thx!