mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>节点背景使用图片</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script>
|
||
/**
|
||
* 本示例演示以下功能：
|
||
* 1、如何使用图片作为节点背景；
|
||
* 2、点击切换节点背景图片。
|
||
*
|
||
*/
|
||
const img = new Image();
|
||
img.src =
|
||
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg';
|
||
|
||
// 点击图片节点，切换背景图片
|
||
const img2 = new Image();
|
||
img2.src = 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg';
|
||
const data = {
|
||
nodes: [
|
||
{
|
||
x: 400,
|
||
y: 100,
|
||
shape: 'image',
|
||
id: 'node2',
|
||
img: img.src,
|
||
label: '头像',
|
||
style: {
|
||
cursor: 'pointer',
|
||
},
|
||
labelCfg: {
|
||
position: 'bottom',
|
||
},
|
||
},
|
||
],
|
||
edges: [],
|
||
};
|
||
// 避免拖动过程中闪烁：使用加载已经LOAD好的图片
|
||
img.onload = function() {
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
width: 1000,
|
||
height: 600,
|
||
defaultEdge: {
|
||
color: '#bae7ff',
|
||
},
|
||
modes: {
|
||
default: ['drag-node'],
|
||
},
|
||
});
|
||
graph.data(data);
|
||
graph.render();
|
||
|
||
graph.on('node:click', evt => {
|
||
const { target } = evt;
|
||
const type = target.get('type');
|
||
const hasChangeBg = target.get('hasChangeBg');
|
||
if (type === 'image') {
|
||
if (!hasChangeBg) {
|
||
// 点击图片节点时，切换背景图片
|
||
target.attr('img', img2);
|
||
target.attr('imgSrc', 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg');
|
||
target.set('hasChangeBg', true);
|
||
} else {
|
||
target.attr('img', img);
|
||
target.attr(
|
||
'imgSrc',
|
||
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566553535233&di=b0b17eeea7bd7356a6f42ebfd48e9441&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F64%2F29%2F01300543361379145388299988437_s.jpg',
|
||
);
|
||
target.set('hasChangeBg', false);
|
||
}
|
||
graph.paint();
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|