1、项目中的左侧是一个导航,里面有待选择的节点,但是这个节点拖动到了canvas中需要根据情况动态改变的。
2、一般我们增加一个节点的代码如下:
let node1 = graph.addNode({
x: 100,
y: 60,
width: 500,
height: 400,
label: "节点1",
id: "node1",
attrs: {
body: {
fill: "#fff",
stroke: "#000000",
},
label: {
text: "节点",
fill: "#FFFFFF",
fontSize: fontSize,
},
},
});
那么我们要如何修改比如text呢?
官方提供了attr方法:
rect.attr('label/text', 'hello')
// 等同于
rect.attr('label', {
text: 'hello',
})
// 等同于
rect.attr({
label: {
text: 'hello',
},
})
只要将上面的rect换成node1,我们就可以轻松的修改成功。
3、比如说要修改x,y的值?
node.setProp('position', { x: 600, y: 30 });
以上是修改位置的,发现很好用吧。
4、当然尺寸也是一样:
node.setProp('size', { width: 600, height: 30 });
我们也可以resize来修改:
node.resize(100,100)
5、发现想修改一些属性还是挺容易的,只要在适当的事件中去执行,就可以了。