在Konva图层或舞台中使用背景图像

Question

[将Konva与VueJS一起使用时，如何在背景或图层中添加背景图像？我尝试在层和阶段的fillPatternImage中都应用config，但没有任何效果。不能在文档中找到任何东西，除了可能在其中一层中添加一个大矩形并填充它。任何想法如何做到这一点？

这里有一些代码，可以在单个形状上使用它。我可以在图层/组/舞台级别上做类似的事情来设置背景吗？

<v-stage
  ref="stage"
  :config="configKonva"
>
  <v-layer v-if="image" ref="layer">
    <v-regular-polygon
      v-for="item in list"
      :key="item.id"
      :config="{
        x: item.x,
        y: item.y,
        sides: 6,
        rotation: item.rotation,
        id: item.id,
        numPoints: 5,
        radius: 30,
        outerRadius: 50,
        opacity: 0.8,
        fillPatternImage: image,
        fillPatternRepeat: 'no-repeat',
        fillPatternOffset: {
...

Answer 1

stage，layer和group不具有fillPatternImage属性。只有形状具有该属性：https://konvajs.org/api/Konva.Shape.html#fillPatternImage

这就是为什么建议添加背景矩形形状的原因。

此外，您可以将带有CSS的背景图像添加到舞台容器中（但是，如果您尝试使用Konva方法导出画布内容，则不会将背景图像导出到图像中]