Question

我正在尝试使用konva.js在Vue中创建一个Spritesheet动画（利用vue-konva）。

在纯konva.js 中，创建了this way Sprite对象-简而言之，首先创建Image对象，然后在以下对象的onload回调中创建Sprite对象。图像对象。

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';

另一方面，在 vue-konva 中，可以直接在<template>文件的.vue部分中将Konva对象作为组件创建，如下所示：< / p>

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

我的问题是：

是否可以创建<v-sprite :config="configSprite"></v-sprite>组件？在文档中没有提及这一点。
如果是这样，应该如何为image对象正确提供必要的configSprite属性？
如何控制v-sprite的动画（开始/停止）？
如果使用v-sprite组件无法完成所有这些操作，是否可以手动创建Sprite对象并将其添加到必要的v-layer中？

谢谢！

Answer 1

sprite组件与v-image组件非常相似。您可以看一下图像演示：https://konvajs.github.io/docs/vue/Images.html

要启动/暂停精灵，您必须访问本机Konva对象并手动控制动画。您可以使用引用进行此操作：

<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>

在线演示：https://codesandbox.io/s/lxlqzok2m9

如何在Vue Konva中使用Sprite对象/动画？

1 个答案: