图片节点中的图在缩放过程中始终等比例缩放

[wenhaoxu1]

问题描述

图片节点中的图在缩放过程中始终等比例缩放

重现链接

https://x6.antv.antgroup.com/zh/examples/node/native-node/#image

重现步骤

随便缩放一下

预期行为

我期望它的效果是这样的

平台

• 操作系统: [Windows.]
• 网页浏览器: [Google Chrome.]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @wenhaoxu1

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[NewByVector]

可以考虑使用 rect 节点，然后图片只是背景。

[wenhaoxu1]

可以考虑使用 rect 节点，然后图片只是背景。

尝试过但是并不可以

[zfy171]

我已经解决该问题 我通过手动改变dom样式进行解决
手动给svg画布中的image标签添加属性 preserveAspectRatio

[wh356667852]

我也遇到了同样的问题，但是感觉上面通过定时器的方式不太好，还有其他更好的方式吗？

[zfy171]

我也遇到了同样的问题，但是感觉上面通过定时器的方式不太好，还有其他更好的方式吗？

暂时没有 除非手动去改本地引用的包 我现在写法是监听节点增加 同时为了避免获取不到新增的节点 我才手动加了延时计时器

[NewByVector]

感谢 @zfy171 提供的思路，直接这样就可以了：

graph.addNode({
  shape: 'image',
  x: 320,
  y: 120,
  width: 94,
  height: 28,
  imageUrl:
    'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
  attrs: {
    image: {
      preserveAspectRatio:'none'
    }
  }
})

[wh356667852]

感谢 @zfy171 提供的思路，直接这样就可以了：

graph.addNode({
  shape: 'image',
  x: 320,
  y: 120,
  width: 94,
  height: 28,
  imageUrl:
    'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
  attrs: {
    image: {
      preserveAspectRatio:'none'
    }
  }
})

这个方案可行，我已经测试成功了，成功解决了我的问题。

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.