Vue Konvaでスプライトオブジェクト/アニメーションを使用するにはどうすればよいですか？

debugcn 投稿 Dev

シーン

konva.jsを使用してVueでスプライトシートアニメーションを作成しようとしています（vue-konvaを利用）。

で純粋konva.js、Spriteオブジェクトが作成され、このように-要するに、Imageオブジェクトが最初に作成され、その後、Spriteオブジェクトは、画像オブジェクトのonloadのコールバックで作成されます。

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オブジェクトを作成できます。

<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ですか？

ありがとうございました！

lavrton

スプライトコンポーネントはコンポーネントと非常によく似てい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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]