好的，关于
antV
G6引入本地
图片的问题，您可以使用
G6提供的
image节点来插入本地
图片。例如：
```
import
G6 from '@
antv/
g6';
const data = {
/* 节点数据 */
nodes: [
{
id: 'node',
x: 100,
y: 100,
label: '
图片节点',
labelCfg: {
position: 'bottom'
},
/* 自定义节点 */
type: '
image-node',
/* 自定义节点属性 */
subtype: 'normal',
/* 自定义节点样式 */
style: {
width: 80,
height: 80,
img: 'https://gw.alipayobjects.com/mdn/rms/afts/img/A*KfYTQIobizcAAAAAAAAAAABjAQAAAQ/original',
cursor: 'move',
stroke: '#eee',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, .2)',
shadowBlur: 10
}
}
],
/* 边数据 */
edges: []
};
G6.registerNode('
image-node', {
/* 绘制节点 */
draw(cfg, group) {
const { style: { img, ...style } } = cfg;
const keyShape = group.addShape('
image', {
attrs: {
x: 0,
y: 0,
width: 80,
height: 80,
img
}
});
/* 添加锚点 */
keyShape.addAnchor([
[0.5, 0],
[1, 0.5],
[0.5, 1],
[0, 0.5]
]);
return keyShape;
}
});
const graph = new
G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
/* 支持
图片节点 */
supportCSSTransform: true,
/* 拓扑图配置 */
layout: {
type: 'dagre',
rankdir: 'LR',
align: 'DL',
nodesep: 40,
ranksep: 40
},
defaultNode: {
type: '
image-node',
subtype: 'normal'
},
modes: {
default: [
{
type: 'drag-canvas',
enableOptimize: true,
optimizeZoom: 3
},
{
type: 'zoom-canvas',
enableOptimize: true,
optimizeZoom: 3
},
'click-select',
{
type: 'tooltip',
formatText: function formatText(model) {
return "<div class=\"tooltip-title\">".concat(model.label, "</div>");
},
offset: 10,
shouldUpdate: function shouldUpdate(e) {
return e.item.getType() !== 'edge';
}
},
{
type: 'brush-select'
}
]
},
/* 数据 */
data
});
graph.render();
```
在节点的style中，可以通过img属性引入本地
图片，例如img: require('./
images/icon.png')。
希望我的回答对您有所帮助。
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
