@antv/x6 动态的修改attr与prop,以及动态改变节点的大小
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、发现想修改一些属性还是挺容易的,只要在适当的事件中去执行,就可以了。
6、官方的说明:https://x6.antv.antgroup.com/api/model/cell