邃芒慧影、口播(PC) https://neuver.metavatar.cc/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

160 строки
3.8 KiB

  1. <template>
  2. <div class="myPage">
  3. <!-- 主要显示 -->
  4. <div
  5. :class="props.videoType == 1 ? 'content1' : 'content2'"
  6. id="content"
  7. :style="bgStyle"
  8. ref="fatherBox"
  9. >
  10. <!-- 数字人的图片 -->
  11. <div
  12. class="virtual"
  13. :class="showBorderActive == materialList.virtual.id ? 'border' : ''"
  14. @mousedown="handleDrag(materialList.virtual.id, $event)"
  15. :style="virtualStyle"
  16. >
  17. <img id="virtualImg" :src="materialList.virtual.material" alt="" />
  18. <div class="stretchBox box1"></div>
  19. <div class="stretchBox box2"></div>
  20. <div class="stretchBox box3"></div>
  21. <div class="stretchBox box4"></div>
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26. <script setup>
  27. //#region 父组件传参
  28. const props = defineProps({
  29. // isLoading: {
  30. // required: true, //是否必传
  31. // },
  32. materialList: {
  33. required: true,
  34. },
  35. videoType: {
  36. required: true,
  37. },
  38. proportion: {
  39. required: true,
  40. },
  41. });
  42. //#endregion --------------------------
  43. //#region 大盒子样式
  44. const bgStyle = computed(() => {
  45. return {
  46. // width: '1080px',
  47. // height: '1920px',
  48. // transform: 'scale(0.2)',
  49. backgroundImage: `url(${props.materialList.BGI.material})`,
  50. backgroundSize: "cover",
  51. backgroundPosition: "center",
  52. };
  53. });
  54. //#endregion --------------------------
  55. //#region 数字人逻辑
  56. // 计算属性来计算盒子位置和大小
  57. const virtualStyle = computed(() => {
  58. return {
  59. top: props.materialList.virtual.y + "px",
  60. left: props.materialList.virtual.x + "px",
  61. transform:
  62. "scale(" + props.materialList.virtual.w / props.proportion + ") ",
  63. transformOrigin: "top left",
  64. };
  65. });
  66. // 拖动盒子
  67. const showBorderActive = ref(null); //判断显示边框
  68. const fatherBox = ref(null);
  69. const handleDrag = (id, event) => {
  70. showBorderActive.value = id;
  71. event.preventDefault();
  72. const imageElement = fatherBox.value;
  73. const startX = event.clientX; //保存初始值,避免闪烁
  74. const startY = event.clientY;
  75. const startLeft = props.materialList.virtual.x;
  76. const startTop = props.materialList.virtual.y;
  77. // 鼠标移动
  78. const onMouseMove = (event) => {
  79. const deltaX = event.clientX - startX;
  80. const deltaY = event.clientY - startY;
  81. props.materialList.virtual.x = startLeft + deltaX;
  82. props.materialList.virtual.y = startTop + deltaY;
  83. };
  84. // 鼠标抬起
  85. const onMouseUp = () => {
  86. document.removeEventListener("mousemove", onMouseMove);
  87. document.removeEventListener("mouseup", onMouseUp);
  88. };
  89. document.addEventListener("mousemove", onMouseMove);
  90. document.addEventListener("mouseup", onMouseUp);
  91. };
  92. //#endregion --------------------------
  93. //#region
  94. //#endregion --------------------------
  95. </script>
  96. <style lang="scss" scoped>
  97. .myPage {
  98. // height: 768px;
  99. // width: 432px;
  100. }
  101. .content1 {
  102. position: relative;
  103. height: 768px;
  104. width: 432px;
  105. overflow: hidden;
  106. }
  107. .content2 {
  108. position: relative;
  109. height: 432px;
  110. width: 768px;
  111. overflow: hidden;
  112. }
  113. .virtual {
  114. position: absolute;
  115. user-select: none;
  116. border: rgba(0, 0, 0, 0) 5px solid;
  117. }
  118. .border {
  119. border: 5px solid #00ff00;
  120. .stretchBox {
  121. opacity: 1;
  122. position: absolute;
  123. width: 20px;
  124. height: 20px;
  125. background-color: #7264f5;
  126. }
  127. .box1 {
  128. top: -10px;
  129. left: -10px;
  130. cursor: nwse-resize;
  131. }
  132. .box2 {
  133. top: -10px;
  134. left: 100%;
  135. transform: translateX(-10px);
  136. cursor: nesw-resize;
  137. }
  138. .box3 {
  139. top: 100%;
  140. left: -10px;
  141. transform: translateY(-10px);
  142. cursor: nesw-resize;
  143. }
  144. .box4 {
  145. top: 100%;
  146. left: 100%;
  147. transform: translate(-10px, -10px);
  148. cursor: nwse-resize;
  149. }
  150. }
  151. </style>