<template>
  <div class="page">
    <div class="canvasBox">
      <canvas class="canvas" id="canvas" width="960" height="540">
        <!-- 背景图 -->
        <!-- <div class="bjImg">
          <img src="../../assets/img/lake.jpg" alt="" />
        </div> -->
        <!-- 数字人 -->
        <!-- <div class="people"></div> -->
        <!-- 素材 -->
        <!-- <div class="other"></div> -->
      </canvas>
      <img
        style="display: none; width: 200px; height: 200px"
        id="bjImg"
        src="../../assets/img/star.png"
        alt=""
      />
    </div>
    <div class="container">
      <div class="box red"></div>
      <div class="box white"></div>
      <div class="box green"></div>
    </div>
  </div>
</template>

<script setup>
//#region 导入
// import { fabric } from "fabric";

//#endregion ---------------------------

//#region 画布交互
// let canvas = new fabric.Canvas("canvas");

//#endregion ---------------------------

// onMounted(() => {
// let canvas = new fabric.Canvas("canvas");
// let imgElement = document.getElementById("bjImg"); //声明我们的图片
// let imgInstance = new fabric.Image(imgElement, {
//设置图片位置和样子
// left: 100,
// top: 100,
// width: 400,
// height: 200,
// angle: 30, //设置图形顺时针旋转角度
// });
// console.log(imgInstance);
// canvas.add(imgInstance);
// canvas.on("mouse:up", function (options) {
//   console.log(options.e.clientX, options.e.clientY);
// });
// });
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  padding: 10px;
}
.canvasBox {
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%);
  width: 100%;
  height: 100%;
  .canvas-container {
  }
  background-color: green;
  .canvas {
    background-color: skyblue;
    .bjImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      z-index: 999;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .people {
    }
    .other {
    }
  }
}
</style>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80px;
  height: 20px;
  perspective: 500px;
  transition: transform 0.5s;
}

.box {
  width: 20px;
  height: 20px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.red {
  background-color: red;
}

.white {
  background-color: white;
  transform: translateZ(20px);
}

.green {
  background-color: green;
  transform: translateZ(-20px);
}

.container:hover .box {
  transform: rotateY(180deg);
}
</style>
