antvis/G6

Circle.js 的icon 的颜色被锁死了 #4695

neolee6053 posted onGitHub

问题描述

group['shapeMap'][iconName] = group.addShape('text', { attrs: __assign({ x: 0, y: 0, fontSize: 12, fill: '#000', 这里应该改为比如 fill : icon.style.fill stroke: '#000', 这里应该改为比如 stroke: icon.style.stroke textBaseline: 'middle', textAlign: 'center' }, icon), className: iconName, name: iconName, draggable: true });

重现链接

https://codesandbox.io/s/g6-p6fq42?file=/index.html:341-378

重现步骤

如上

预期行为

如上

平台

  • 操作系统: [ Windows]
  • 网页浏览器: [Firefox]
  • G6 版本: [4.8.15 ]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


如果暂时没有解决方案,请问怎么样才可以override 呢? 在angular typescript,我尝试

G6.registerNode("extendedCircle", { extendedNodeType: 'circle', // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment drawShape: customDrawCircleShape });

function customDrawCircleShape(cfg, group) { var _a = (this.mergeStyle || this.getOptions(cfg)).icon, defaultIcon = _a === void 0 ? {} : _a; var style = this.getShapeStyle(cfg); var icon = deepMix({}, defaultIcon, cfg.icon); var name = "".concat(this.type, "-keyShape"); var keyShape = group.addShape('circle', { attrs: style, className: name, name: name, draggable: true }); group['shapeMap'][name] = keyShape; var width = icon.width, height = icon.height, show = icon.show, text = icon.text; if (show) { var iconName = "".concat(this.type, "-icon"); if (text) { group['shapeMap'][iconName] = group.addShape('text', { attrs: __assign({ x: 0, y: 0, fontSize: 12, fill: '#000', stroke: '#000', textBaseline: 'middle', textAlign: 'center' }, icon), className: iconName, name: iconName, draggable: true }); } else { group['shapeMap'][iconName] = group.addShape('image', { attrs: __assign({ x: -width / 2, y: -height / 2 }, icon), className: iconName, name: iconName, draggable: true }); } } this.drawLinkPoints(cfg, group); return keyShape; }

但得到 An error occurred: this.getOptions is not a function

**这个override/extend的问题已解决**

posted by neolee6053 almost 2 years ago

你贴的是哪里的代码?那个应该只是默认的兜底样式,后面传入的样式会覆盖它

posted by Yanyan-Wang almost 2 years ago

你贴的是哪里的代码?那个应该只是默认的兜底样式,后面传入的样式会覆盖它

第一个贴的来至circle.js image

第二个是我自己想override 它而写的,主要在 fill: '#000', 这里应该改为比如 fill : icon.style.fill stroke: '#000', 这里应该改为比如 stroke: icon.style.stroke

posted by neolee6053 almost 2 years ago

在你提供的在线 demo 中没有看到你写的这一段,但看你的代码

group['shapeMap'][iconName] = group.addShape('text', { attrs: __assign({ x: 0, y: 0, fontSize: 12, fill: '#000', stroke: '#000', textBaseline: 'middle', textAlign: 'center' }, icon),

这里 __assign 的第三个参数 icon 优先级是最高的,icon 的配置为 { fill: '#f00', stroke: '#f00', ... 其他配置 } 就可以覆盖了。icon 从数据中读取,配置如下,所有图形的样式属性也是平铺在这里面: https://g6.antv.antgroup.com/manual/middle/elements/nodes/built-in/circle#%E5%9B%BE%E6%A0%87-icon

posted by Yanyan-Wang almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests