自定义节点为图片时，图片的大小不能拉伸或者缩小 about x-flowchart-vue HOT 8 CLOSED

@bingyuea 请问节点可以用图片吗?可不可以提供下资料,我这边刚好需要这个功能,麻烦了!

from x-flowchart-vue.

@bingyuea 请问节点可以用图片吗?可不可以提供下资料,我这边刚好需要这个功能,麻烦了!

可以的，但是图片拉伸有点问题

from x-flowchart-vue.

@bingyuea 可以给我一个图片节点的例子吗?万分感谢🙇‍

from x-flowchart-vue.

@AmySay 可以给我一个图片节点的例子吗?万分感谢🙇‍

from x-flowchart-vue.

Q：节点/边更新时，没有按照在 nodeDefinition 中自定义实现的 draw 或 drawShape 逻辑更新。例如，有些图形没有被更新，增加了没有在 draw 或 drawShape 方法中定义的图形等。
A：由于继承了 extendedTypeName，且在 nodeDefinition 中没有复写 update 方法，导致节点/边更新时执行了 extendedTypeName 中的 update 方法，从而与自定义的 draw 或 drawShape 有出入。可以通过复写 update 方法为 undefined 解决。当 update 方法为 undefined 时，节点/边的更新将会执行 draw 或 drawShape 进行重绘。

应该是的，现在都是写的draw

from x-flowchart-vue.

@bingyuea 可以给我一个图片节点的例子吗?万分感谢🙇‍

drawShape(cfg, group) {
const shapeType = this.shapeType
const style = this.getShapeStyle(cfg)
const shape = group.addShape(shapeType, {
attrs: style
})
this.shape = shape
this.group = group
this.drawIcon(cfg, group)
return shape
},
drawIcon(cfg, group) {
let width, height;
const size = this.getSize(cfg)
width = size[0]
height = size[1]
console.log(size, '----size')
if (this.options.icon) {
let attrs = {
x: this.options.iconStyle.left,
y: this.options.iconStyle.top,
width,
height
}
group.icon = group.addShape('image', {
attrs: {
img: this.options.icon,
...attrs
},
draggable: true,
name: 'image-shape',
})
}
},

from x-flowchart-vue.

@bingyuea 谢谢🙇‍

from x-flowchart-vue.

@bingyuea 可以给我一个图片节点的例子吗?万分感谢🙇‍

drawShape(cfg, group) {
const shapeType = this.shapeType
const style = this.getShapeStyle(cfg)
const shape = group.addShape(shapeType, {
attrs: style
})
this.shape = shape
this.group = group
this.drawIcon(cfg, group)
return shape
},
drawIcon(cfg, group) {
let width, height;
const size = this.getSize(cfg)
width = size[0]
height = size[1]
console.log(size, '----size')
if (this.options.icon) {
let attrs = {
x: this.options.iconStyle.left,
y: this.options.iconStyle.top,
width,
height
}
group.icon = group.addShape('image', {
attrs: {
img: this.options.icon,
...attrs
},
draggable: true,
name: 'image-shape',
})
}
},

update(cfg, node) { const group = node.getContainer(); // 获取容器 const style = { width:cfg.size[0], height:cfg.size[1], size:cfg.size }; group.icon.attr(style); },

from x-flowchart-vue.