G6-editor flow 自定义图形无法设置fill、stroke等属性
Closed this issue · 0 comments
ArronYR commented
我的需求/我的问题
在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
参考的官方案例
thx!