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