<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: 100px"
        id="bjImg"
        src="../../assets/img/lake.jpg"
        alt=""
      />
    </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 rect = new fabric.Rect({
  //   left: 0, //距离画布左侧的距离，单位是像素
  //   top: 0, //距离画布上边的距离
  //   fill: "red", //填充的颜色
  //   width: 50, //方形的宽度
  //   height: 50, //方形的高度
  // });
  // canvas.add(rect);
  let imgElement = document.getElementById("bjImg"); //声明我们的图片
  let imgInstance = new fabric.Image(imgElement, {
    //设置图片位置和样子
    left: 100,
    top: 100,
    width: 200,
    height: 100,
    angle: 30, //设置图形顺时针旋转角度
  });
  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>
