邃芒慧影、口播(PC) https://neuver.metavatar.cc/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

96 lines
2.1 KiB

  1. <template>
  2. <div class="page">
  3. <div class="canvasBox">
  4. <canvas class="canvas" id="canvas" width="960" height="540">
  5. <!-- 背景图 -->
  6. <!-- <div class="bjImg">
  7. <img src="../../assets/img/lake.jpg" alt="" />
  8. </div> -->
  9. <!-- 数字人 -->
  10. <!-- <div class="people"></div> -->
  11. <!-- 素材 -->
  12. <!-- <div class="other"></div> -->
  13. </canvas>
  14. <img
  15. style="display: none; width: 200px; height: 100px"
  16. id="bjImg"
  17. src="../../assets/img/lake.jpg"
  18. alt=""
  19. />
  20. </div>
  21. </div>
  22. </template>
  23. <script setup>
  24. //#region 导入
  25. import { fabric } from "fabric";
  26. //#endregion ---------------------------
  27. //#region 画布交互
  28. let canvas = new fabric.Canvas("canvas");
  29. //#endregion ---------------------------
  30. onMounted(() => {
  31. let canvas = new fabric.Canvas("canvas");
  32. // let rect = new fabric.Rect({
  33. // left: 0, //距离画布左侧的距离,单位是像素
  34. // top: 0, //距离画布上边的距离
  35. // fill: "red", //填充的颜色
  36. // width: 50, //方形的宽度
  37. // height: 50, //方形的高度
  38. // });
  39. // canvas.add(rect);
  40. let imgElement = document.getElementById("bjImg"); //声明我们的图片
  41. let imgInstance = new fabric.Image(imgElement, {
  42. //设置图片位置和样子
  43. left: 100,
  44. top: 100,
  45. width: 200,
  46. height: 100,
  47. angle: 30, //设置图形顺时针旋转角度
  48. });
  49. canvas.add(imgInstance);
  50. // canvas.on("mouse:up", function (options) {
  51. // console.log(options.e.clientX, options.e.clientY);
  52. // });
  53. });
  54. </script>
  55. <style lang="scss" scoped>
  56. .page {
  57. position: relative;
  58. padding: 10px;
  59. }
  60. .canvasBox {
  61. // position: absolute;
  62. // top: 50%;
  63. // left: 50%;
  64. // transform: translate(-50%);
  65. width: 100%;
  66. height: 100%;
  67. .canvas-container {
  68. }
  69. background-color: green;
  70. .canvas {
  71. background-color: skyblue;
  72. .bjImg {
  73. position: absolute;
  74. top: 0;
  75. left: 0;
  76. width: 100px;
  77. height: 100px;
  78. z-index: 999;
  79. img {
  80. width: 100px;
  81. height: 100px;
  82. }
  83. }
  84. .people {
  85. }
  86. .other {
  87. }
  88. }
  89. }
  90. </style>