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

debugcn 发表于 Dev

认真思考

将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: {
...

薰衣草

stage，layer并且group没有fillPatternImage财产。只有形状才具有该属性：https : //konvajs.org/api/Konva.Shape.html#fillPatternImage

因此，建议添加背景矩形形状。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。