Comments (1)
已解决代码如下
function transform(point){
return [point.x,point.y]
}
G6.registerEdge('customEdge',{
draw(item){
console.log(item);
let source=item.source.getAnchorPoints();
let target=item.target.getAnchorPoints();
console.log(source,target);
const group = item.getGraphicGroup();
let p1=transform(source[0]);
let p4=transform(target[0]);
let p2=[p1[0],p1[1]-20];
let p3=[p4[0],p2[1]];
console.log(p1,p2,p3,p4);
group.addShape('polyline', {
attrs: {
points: [p1,p2,p3,p4],
stroke: 'red'
}
});
return group;
}
})
G6.registerNode('customNode', {
anchor: {
type: 'circle',
points: [
[0.5, 0],
[1, 0.5],
[0.5, 1],
[0, 0.5]
]
},
draw(item) {
let x = 0,
y = 0,
width = 100,
height = 100,
r = 6;
const group = item.getGraphicGroup();
group.addShape('image', {
attrs: {
x: x + 5,
y: x + 5,
width: width - 10,
height: width - 10,
img: './ecs.svg'
}
});
//激活状态
if (item.model.status === 'active') {
group.addShape('rect', {
attrs: {
x: x,
y: y,
width: width,
height: width,
stroke: 'black'
}
}),
//上
group.addShape('circle', {
attrs: {
x: (width - r) / 2,
y: y,
r: r,
fill: '#91d5ff'
}
});
//右
group.addShape('circle', {
attrs: {
x: width,
y: (height - r) / 2,
r: r,
fill: '#91d5ff'
}
});
//下
group.addShape('circle', {
attrs: {
x: (width - r) / 2,
y: height,
r: r,
fill: '#91d5ff'
}
});
//左
group.addShape('circle', {
attrs: {
x: x,
y: (height - y) / 2,
r: r,
fill: '#91d5ff'
}
});
}
return group;
}
});
const graph = new G6.Graph({
container: 'app',
fitView: 'cc',
width: window.innerWidth,
height: window.innerHeight
});
graph.on('node:click', function (target) {
//点击node,改变model
graph.update(target.item, {
status: 'active'
})
});
graph.add('node', {
id: 'a',
x: 100,
y: 100,
shape: 'customNode'
});
graph.add('node', {
id: 'b',
x: 300,
y: 300,
shape: 'customNode',
stroke: 'blue'
});
graph.add('edge', {
source: 'a',
target: 'b',
size: 3,
shape:'customEdge'
});
//处理拖动
let node = 0;
let dx = 0;
let dy = 0;
graph.on('node:dragstart', function (ev) {
let item = ev.item;
let model = item.getModel();
node = item;
dx = model.x - ev.x;
dy = model.y - ev.y;
});
graph.on('node:drag', function (ev) {
node && graph.update(node, {
x: ev.x + dx,
y: ev.y + dy
});
});
from g6-editor.
Related Issues (20)
- wiki is not found HOT 1
- G6-editor文档怎么404了 HOT 11
- 如何在shape里面使用带动画的svg HOT 6
- 太过分了。。。连安装包都不见了
- 节点如何用html去实现
- 节点的 label 内容太长会溢出,有木有解决办法 HOT 5
- 给边加锚点 HOT 1
- 有没有,未压缩过的源码~! HOT 3
- g6 3.0.4版本 事件监听无法监听到节点 HOT 2
- 如何自定义 edge 的样式,去掉箭头呢 HOT 2
- 通过npm安装的包 添加anchor为菱形不生效? HOT 1
- 从左边拖动到画布怎么能阻断显示 HOT 3
- 关于节点动画,想在节点上加上linedash,可以显示运动动画,g6文档中有提及,但是在g6-editor中不生效
- Request: Please open source the g6-editor code. HOT 3
- 请问一下什么时候提供开源版本?
- 流程图添加自定义命令在右键菜单下,请问在执行正向命令时如何获取到当前节点的所有信息?
- 需要比较完善的文档的童鞋看过来
- 链接锚点的时候,想根据箭头坐标获取最近的锚点,然后直接连线,不需要非得拖到target,应该如何实现
- 请问如何设置Mind组件的isRoot?
- 仓库治理
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g6-editor.