How to use Sprite objects/animations in Vue Konva?
up vote
1
down vote
favorite
I'm trying to create a spritesheet animation in Vue with konva.js (utilizing vue-konva).
In pure konva.js, the Sprite object is created this way - in short, the Image object is created at first, and then the Sprite object is created in the onload callback of Image object.
var imageObj = new Image();
imageObj.onload = function() {
var blob = new Konva.Sprite({
x: 50,
y: 50,
image: imageObj,
animation: 'idle',
animations: animations, // object defined earlier
frameRate: 7,
frameIndex: 0
});
// add the shape to the layer
layer.add(blob);
// add the layer to the stage
stage.add(layer);
// start sprite animation
blob.start();
};
imageObj.src = '/assets/blob-sprite.png';
On the other hand, in vue-konva it is possible to create Konva objects as components directly in the <template>
section of the .vue
file, like this:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
My questions are:
- is it possible to create
<v-sprite :config="configSprite"></v-sprite>
component? There are no mentions of this in the documentation. - If so, how should one correctly provide the necessary
image
attribute for theconfigSprite
object? - How can one control the animations of
v-sprite
(starting/stopping)? - If all of this is not possible by using a
v-sprite
component, is it possible to somehow create the Sprite object manually and add it to the necessaryv-layer
?
Thank you!
javascript vue.js konvajs
add a comment |
up vote
1
down vote
favorite
I'm trying to create a spritesheet animation in Vue with konva.js (utilizing vue-konva).
In pure konva.js, the Sprite object is created this way - in short, the Image object is created at first, and then the Sprite object is created in the onload callback of Image object.
var imageObj = new Image();
imageObj.onload = function() {
var blob = new Konva.Sprite({
x: 50,
y: 50,
image: imageObj,
animation: 'idle',
animations: animations, // object defined earlier
frameRate: 7,
frameIndex: 0
});
// add the shape to the layer
layer.add(blob);
// add the layer to the stage
stage.add(layer);
// start sprite animation
blob.start();
};
imageObj.src = '/assets/blob-sprite.png';
On the other hand, in vue-konva it is possible to create Konva objects as components directly in the <template>
section of the .vue
file, like this:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
My questions are:
- is it possible to create
<v-sprite :config="configSprite"></v-sprite>
component? There are no mentions of this in the documentation. - If so, how should one correctly provide the necessary
image
attribute for theconfigSprite
object? - How can one control the animations of
v-sprite
(starting/stopping)? - If all of this is not possible by using a
v-sprite
component, is it possible to somehow create the Sprite object manually and add it to the necessaryv-layer
?
Thank you!
javascript vue.js konvajs
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm trying to create a spritesheet animation in Vue with konva.js (utilizing vue-konva).
In pure konva.js, the Sprite object is created this way - in short, the Image object is created at first, and then the Sprite object is created in the onload callback of Image object.
var imageObj = new Image();
imageObj.onload = function() {
var blob = new Konva.Sprite({
x: 50,
y: 50,
image: imageObj,
animation: 'idle',
animations: animations, // object defined earlier
frameRate: 7,
frameIndex: 0
});
// add the shape to the layer
layer.add(blob);
// add the layer to the stage
stage.add(layer);
// start sprite animation
blob.start();
};
imageObj.src = '/assets/blob-sprite.png';
On the other hand, in vue-konva it is possible to create Konva objects as components directly in the <template>
section of the .vue
file, like this:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
My questions are:
- is it possible to create
<v-sprite :config="configSprite"></v-sprite>
component? There are no mentions of this in the documentation. - If so, how should one correctly provide the necessary
image
attribute for theconfigSprite
object? - How can one control the animations of
v-sprite
(starting/stopping)? - If all of this is not possible by using a
v-sprite
component, is it possible to somehow create the Sprite object manually and add it to the necessaryv-layer
?
Thank you!
javascript vue.js konvajs
I'm trying to create a spritesheet animation in Vue with konva.js (utilizing vue-konva).
In pure konva.js, the Sprite object is created this way - in short, the Image object is created at first, and then the Sprite object is created in the onload callback of Image object.
var imageObj = new Image();
imageObj.onload = function() {
var blob = new Konva.Sprite({
x: 50,
y: 50,
image: imageObj,
animation: 'idle',
animations: animations, // object defined earlier
frameRate: 7,
frameIndex: 0
});
// add the shape to the layer
layer.add(blob);
// add the layer to the stage
stage.add(layer);
// start sprite animation
blob.start();
};
imageObj.src = '/assets/blob-sprite.png';
On the other hand, in vue-konva it is possible to create Konva objects as components directly in the <template>
section of the .vue
file, like this:
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
My questions are:
- is it possible to create
<v-sprite :config="configSprite"></v-sprite>
component? There are no mentions of this in the documentation. - If so, how should one correctly provide the necessary
image
attribute for theconfigSprite
object? - How can one control the animations of
v-sprite
(starting/stopping)? - If all of this is not possible by using a
v-sprite
component, is it possible to somehow create the Sprite object manually and add it to the necessaryv-layer
?
Thank you!
javascript vue.js konvajs
javascript vue.js konvajs
asked Nov 22 at 16:13
Arx
24329
24329
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
The sprite component is very similar to v-image
component. You can take a look into images demos: https://konvajs.github.io/docs/vue/Images.html
To start/pause sprite you have to access native Konva
object and control animation manually. You can do this using references:
<template>
<v-stage ref="stage" :config="stageSize">
<v-layer ref="layer">
<v-sprite
@click="handleClick"
ref="sprite"
:config="{
image: image,
animation: 'idle',
animations: animations,
frameRate: 7,
frameIndex: 0,
animations: {
idle: [
2,
2,
70,
119,
71,
2,
74,
119,
146,
2,
81,
119,
226,
2,
76,
119
],
punch: [2, 138, 74, 122, 76, 138, 84, 122, 346, 138, 120, 122]
}
}"
/>
</v-layer>
</v-stage>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
image: null
};
},
created() {
const image = new window.Image();
image.src = "https://konvajs.github.io/assets/blob-sprite.png";
image.onload = () => {
// set image only when it is loaded
this.image = image;
};
},
methods: {
handleClick() {
const node = this.$refs.sprite.getNode();
if (node.isRunning()) {
node.stop();
} else {
node.start();
}
}
}
};
</script>
Online demo: https://codesandbox.io/s/lxlqzok2m9
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
1
@Arx you demo is not correct.this.image
doesn't exist andimage
is not defined in data (instead it is defined deeply underconfigSprite
). So vue doesn't know it needs to update the component when you usethis.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9
– lavrton
Nov 23 at 14:25
Hmm - but in my example,this.image
in fact exists - it is right underconfigSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved theimage
property higher so that it is clearer. Anyway, the approach in your example (settingthis.configSprite.image
directly) works, thank you for that!
– Arx
Nov 23 at 15:49
That property is here. But later you usethis.image
inconfigSprite
. What it refers to? I think vm instance don't have that property defined whendata
is called. And it will be not automatically redefined when you setthis.image = image
.
– lavrton
Nov 23 at 15:53
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
The sprite component is very similar to v-image
component. You can take a look into images demos: https://konvajs.github.io/docs/vue/Images.html
To start/pause sprite you have to access native Konva
object and control animation manually. You can do this using references:
<template>
<v-stage ref="stage" :config="stageSize">
<v-layer ref="layer">
<v-sprite
@click="handleClick"
ref="sprite"
:config="{
image: image,
animation: 'idle',
animations: animations,
frameRate: 7,
frameIndex: 0,
animations: {
idle: [
2,
2,
70,
119,
71,
2,
74,
119,
146,
2,
81,
119,
226,
2,
76,
119
],
punch: [2, 138, 74, 122, 76, 138, 84, 122, 346, 138, 120, 122]
}
}"
/>
</v-layer>
</v-stage>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
image: null
};
},
created() {
const image = new window.Image();
image.src = "https://konvajs.github.io/assets/blob-sprite.png";
image.onload = () => {
// set image only when it is loaded
this.image = image;
};
},
methods: {
handleClick() {
const node = this.$refs.sprite.getNode();
if (node.isRunning()) {
node.stop();
} else {
node.start();
}
}
}
};
</script>
Online demo: https://codesandbox.io/s/lxlqzok2m9
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
1
@Arx you demo is not correct.this.image
doesn't exist andimage
is not defined in data (instead it is defined deeply underconfigSprite
). So vue doesn't know it needs to update the component when you usethis.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9
– lavrton
Nov 23 at 14:25
Hmm - but in my example,this.image
in fact exists - it is right underconfigSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved theimage
property higher so that it is clearer. Anyway, the approach in your example (settingthis.configSprite.image
directly) works, thank you for that!
– Arx
Nov 23 at 15:49
That property is here. But later you usethis.image
inconfigSprite
. What it refers to? I think vm instance don't have that property defined whendata
is called. And it will be not automatically redefined when you setthis.image = image
.
– lavrton
Nov 23 at 15:53
add a comment |
up vote
2
down vote
accepted
The sprite component is very similar to v-image
component. You can take a look into images demos: https://konvajs.github.io/docs/vue/Images.html
To start/pause sprite you have to access native Konva
object and control animation manually. You can do this using references:
<template>
<v-stage ref="stage" :config="stageSize">
<v-layer ref="layer">
<v-sprite
@click="handleClick"
ref="sprite"
:config="{
image: image,
animation: 'idle',
animations: animations,
frameRate: 7,
frameIndex: 0,
animations: {
idle: [
2,
2,
70,
119,
71,
2,
74,
119,
146,
2,
81,
119,
226,
2,
76,
119
],
punch: [2, 138, 74, 122, 76, 138, 84, 122, 346, 138, 120, 122]
}
}"
/>
</v-layer>
</v-stage>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
image: null
};
},
created() {
const image = new window.Image();
image.src = "https://konvajs.github.io/assets/blob-sprite.png";
image.onload = () => {
// set image only when it is loaded
this.image = image;
};
},
methods: {
handleClick() {
const node = this.$refs.sprite.getNode();
if (node.isRunning()) {
node.stop();
} else {
node.start();
}
}
}
};
</script>
Online demo: https://codesandbox.io/s/lxlqzok2m9
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
1
@Arx you demo is not correct.this.image
doesn't exist andimage
is not defined in data (instead it is defined deeply underconfigSprite
). So vue doesn't know it needs to update the component when you usethis.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9
– lavrton
Nov 23 at 14:25
Hmm - but in my example,this.image
in fact exists - it is right underconfigSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved theimage
property higher so that it is clearer. Anyway, the approach in your example (settingthis.configSprite.image
directly) works, thank you for that!
– Arx
Nov 23 at 15:49
That property is here. But later you usethis.image
inconfigSprite
. What it refers to? I think vm instance don't have that property defined whendata
is called. And it will be not automatically redefined when you setthis.image = image
.
– lavrton
Nov 23 at 15:53
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
The sprite component is very similar to v-image
component. You can take a look into images demos: https://konvajs.github.io/docs/vue/Images.html
To start/pause sprite you have to access native Konva
object and control animation manually. You can do this using references:
<template>
<v-stage ref="stage" :config="stageSize">
<v-layer ref="layer">
<v-sprite
@click="handleClick"
ref="sprite"
:config="{
image: image,
animation: 'idle',
animations: animations,
frameRate: 7,
frameIndex: 0,
animations: {
idle: [
2,
2,
70,
119,
71,
2,
74,
119,
146,
2,
81,
119,
226,
2,
76,
119
],
punch: [2, 138, 74, 122, 76, 138, 84, 122, 346, 138, 120, 122]
}
}"
/>
</v-layer>
</v-stage>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
image: null
};
},
created() {
const image = new window.Image();
image.src = "https://konvajs.github.io/assets/blob-sprite.png";
image.onload = () => {
// set image only when it is loaded
this.image = image;
};
},
methods: {
handleClick() {
const node = this.$refs.sprite.getNode();
if (node.isRunning()) {
node.stop();
} else {
node.start();
}
}
}
};
</script>
Online demo: https://codesandbox.io/s/lxlqzok2m9
The sprite component is very similar to v-image
component. You can take a look into images demos: https://konvajs.github.io/docs/vue/Images.html
To start/pause sprite you have to access native Konva
object and control animation manually. You can do this using references:
<template>
<v-stage ref="stage" :config="stageSize">
<v-layer ref="layer">
<v-sprite
@click="handleClick"
ref="sprite"
:config="{
image: image,
animation: 'idle',
animations: animations,
frameRate: 7,
frameIndex: 0,
animations: {
idle: [
2,
2,
70,
119,
71,
2,
74,
119,
146,
2,
81,
119,
226,
2,
76,
119
],
punch: [2, 138, 74, 122, 76, 138, 84, 122, 346, 138, 120, 122]
}
}"
/>
</v-layer>
</v-stage>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
image: null
};
},
created() {
const image = new window.Image();
image.src = "https://konvajs.github.io/assets/blob-sprite.png";
image.onload = () => {
// set image only when it is loaded
this.image = image;
};
},
methods: {
handleClick() {
const node = this.$refs.sprite.getNode();
if (node.isRunning()) {
node.stop();
} else {
node.start();
}
}
}
};
</script>
Online demo: https://codesandbox.io/s/lxlqzok2m9
answered Nov 22 at 18:32
lavrton
6,64221229
6,64221229
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
1
@Arx you demo is not correct.this.image
doesn't exist andimage
is not defined in data (instead it is defined deeply underconfigSprite
). So vue doesn't know it needs to update the component when you usethis.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9
– lavrton
Nov 23 at 14:25
Hmm - but in my example,this.image
in fact exists - it is right underconfigSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved theimage
property higher so that it is clearer. Anyway, the approach in your example (settingthis.configSprite.image
directly) works, thank you for that!
– Arx
Nov 23 at 15:49
That property is here. But later you usethis.image
inconfigSprite
. What it refers to? I think vm instance don't have that property defined whendata
is called. And it will be not automatically redefined when you setthis.image = image
.
– lavrton
Nov 23 at 15:53
add a comment |
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
1
@Arx you demo is not correct.this.image
doesn't exist andimage
is not defined in data (instead it is defined deeply underconfigSprite
). So vue doesn't know it needs to update the component when you usethis.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9
– lavrton
Nov 23 at 14:25
Hmm - but in my example,this.image
in fact exists - it is right underconfigSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved theimage
property higher so that it is clearer. Anyway, the approach in your example (settingthis.configSprite.image
directly) works, thank you for that!
– Arx
Nov 23 at 15:49
That property is here. But later you usethis.image
inconfigSprite
. What it refers to? I think vm instance don't have that property defined whendata
is called. And it will be not automatically redefined when you setthis.image = image
.
– lavrton
Nov 23 at 15:53
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
Thank you, this works! It should be noted, however, that the config for the sprite must either be directly in the template (as is the case in your example), or it has to be extracted as a computed property - example here. When using the data() for the config, it doesn't work, as the image is loaded after mounting. Example of what I mean (using data, not working)
– Arx
Nov 23 at 14:00
1
1
@Arx you demo is not correct.
this.image
doesn't exist and image
is not defined in data (instead it is defined deeply under configSprite
). So vue doesn't know it needs to update the component when you use this.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9– lavrton
Nov 23 at 14:25
@Arx you demo is not correct.
this.image
doesn't exist and image
is not defined in data (instead it is defined deeply under configSprite
). So vue doesn't know it needs to update the component when you use this.image = image
. Here is fixed version: codesandbox.io/s/llj376q6z9– lavrton
Nov 23 at 14:25
Hmm - but in my example,
this.image
in fact exists - it is right under configSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved the image
property higher so that it is clearer. Anyway, the approach in your example (setting this.configSprite.image
directly) works, thank you for that!– Arx
Nov 23 at 15:49
Hmm - but in my example,
this.image
in fact exists - it is right under configSprite
object, not nested inside it (please check the brackets again). Here is the same example where I moved the image
property higher so that it is clearer. Anyway, the approach in your example (setting this.configSprite.image
directly) works, thank you for that!– Arx
Nov 23 at 15:49
That property is here. But later you use
this.image
in configSprite
. What it refers to? I think vm instance don't have that property defined when data
is called. And it will be not automatically redefined when you set this.image = image
.– lavrton
Nov 23 at 15:53
That property is here. But later you use
this.image
in configSprite
. What it refers to? I think vm instance don't have that property defined when data
is called. And it will be not automatically redefined when you set this.image = image
.– lavrton
Nov 23 at 15:53
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434820%2fhow-to-use-sprite-objects-animations-in-vue-konva%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown