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

Question

将 Konva 与 VueJS 结合使用时，如何将背景图像添加到我的舞台或图层？我尝试在层和舞台上应用 fillPatternImage in config 但没有效果。在文档中找不到任何关于此的内容，除了可能在其中一个图层中添加一个大矩形并填充它。任何想法如何做到这一点？

这是我在单个形状上使用它的一些代码。我可以在 layer/group/stage 级别做类似的事情来设置背景吗？

<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 方法导出 canvas 内容，则此类背景不会导出到图像中）

在此处查看一些演示：https://konvajs.org/docs/sandbox/Canvas_Background.html

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

Using a background image in Konva Layer or Stage

konvajs

konva