useImage hook

[lavrton]

I just released a new version with a little useImage hook. Usage:

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-image :config="imageConfig" />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useImage } from 'vue-konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const [image] = useImage('https://konvajs.org/assets/darth-vader.jpg');
const imageConfig = ref({
  x: 50,
  y: 50,
  image,
  width: 100,
  height: 100
});
</script>

If you read this, and interested in vue-konva. Try it. Let me know how it works for you.

[rsaleri]

Tried on nuxt:

It doesn't like it...

[lavrton]

Is it the last version of vue-konva?

[rsaleri]

Yes, 3.2.0, I made sure to update before trying it.
It's strange, because Webstorm recognize it, but then nuxt die badly.

Oh, well, I finished working for today, I'll try again on monday.
Have a nice weekend ;)

[rsaleri]

Apparently, after a couple of restart, the problem solved itself and now it's working.
Good job! (y)

[rsaleri]

Hi, still me, sorry to bother, but is it possible to use it for dynamicly changing images?
I can't seem to wrap my head around it...

[lavrton]

Like this:

<template>
  <div>
    <!-- Toggle Button -->
    <button @click="toggleImage">Toggle Image</button>

    <!-- Konva Stage -->
    <v-stage :config="stageSize">
      <v-layer>
        <!-- Display the Image -->
        <v-image
          v-if="currentImage"
          :config="{
            x: 100,
            y: 100,
            image: currentImage,
            width: 200,
            height: 200,
          }"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useImage } from "vue-konva";

// Define stage size
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight,
};

// Image URLs
const imageUrls = [
  "https://konvajs.org/assets/yoda.jpg",
  "https://konvajs.org/assets/darth-vader.jpg",
];

// Reactive current URL
const currentUrl = ref(imageUrls[0]);

// useImage hook: Reactively use currentUrl
const [currentImage] = useImage(currentUrl);

// Toggle Image Function
const toggleImage = () => {
  currentUrl.value =
    currentUrl.value === imageUrls[0] ? imageUrls[1] : imageUrls[0];
};
</script>

You can also get url as property of a component.

https://codesandbox.io/p/sandbox/vue3-forked-zkfk4n?file=%2Fsrc%2FApp.vue%3A10%2C17

[rsaleri]

Yep, my bad, I was passing ref.value instead of ref.

To avoid importing it everywhere in nuxt, I created composables/useImage.ts with this content

export { useImage } from 'vue-konva'