javascriptvue.jskonvavue-konva

konva.js - fillPatternImage not being applied

I'm using konva.js via the vue-konva package. I'm trying to add a fillPatternImage but for some - probably simple reason - it's not being applied.

Here's the code:

// App.vue script
const loadImage = function (imgSrc) {
  return new Promise((resolve, reject) => {
    const image = new window.Image();
    image.src = imgSrc;
    image.onload = () => {
      resolve(image);
    };
    image.onerror = reject;
  });
};

export default {
  data() {
    return {
      showStage: false,
      configKonva: {
        width: window.innerWidth,
        height: window.innerHeight,
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: 'red',
        fillPatternImage: null,
        fillPatternRepeat: 'repeat',
      },
    };
  },

  created() {
    loadImage(
      'https://example.com/image.jpg'
    ).then((img) => {
      this.configCircle.fillPatternImage = img;
      this.showStage = true;
    });
  },
};
<!-- App.vue template -->
<div id="app">
  <v-stage v-if="showStage" :config="configKonva">
    <v-layer>
      <v-circle
        v-if="configCircle.fillPatternImage"
        :config="configCircle"
      ></v-circle>
    </v-layer>
  </v-stage>
</div>

I'm guessing it must be something simple but I can't seem to figure it out.

If you want to fiddle with it, here's a stackblitz link: https://stackblitz.com/edit/vue-y5fzyf?file=src%2FApp.vue,src%2Fmain.js

Solution

  • Apparently, fill overrides the fillPatternImage property. If you remove it you can see the image:

          configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        // fill: 'red', <------ this needs to go
        fillPatternImage: null,
        fillPatternRepeat: 'repeat',
      },

    Alternatively, you can set it to null when you assign the img:

      created() {
    loadImage(...).then((img) => {
      this.configCircle.fill = null // <------ unset fill
      this.configCircle.fillPatternImage = img;
      this.showStage = true;
    });
  },