<template>
  <div class="vk relative">
    <div class="absolute right-0 top-0 z-10 w-full h-full text-white" @click="changeSize">
      改变大小{{ canvasSize }}
    </div>
    <PraticleEffect
      imageUrl="/v_logo.png"
      :canvasSize="900"
      :perspective="500"
      :particleSize="0.9"
      :depthRange="depthRange"
      :imageSize="canvasSize"
      :particleStep="2"
      :openChangeAnimation="true"
    />
  </div>
</template>

<script setup lang="ts">
import PraticleEffect from './Component/PraticleEffect.vue';
const canvasSize = ref(450);
const depthRange = ref(50);
const changeSize = () => {
  canvasSize.value = canvasSize.value === 450 ? 200 : 300;
  depthRange.value = depthRange.value === 30 ? 50 : 30;
};
</script>

<style scoped>
.vk {
  width: 100vw;
  height: 100vh;
}
</style>
