更改

package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.0",

src/App.vue

@@ -29,12 +29,14 @@
                 :value="item.value"
             />
           </el-select>
-          <el-button>1</el-button><el-button>2</el-button>
+          <el-button style="margin: 0;">1</el-button>
+          <el-button style="margin: 0;">2</el-button>
         </div>
       </div>
-      <AtlasRenderCanvasRegion class="viewer" :debug="true" :premultiplied-alpha="false" :atlas="data" v-if="show"></AtlasRenderCanvasRegion>
+      <AtlasRenderCanvasRegion class="viewer" :debug="true" :premultiplied-alpha="false" :atlas="data"
+                               v-if="show" @edit="onEdit"></AtlasRenderCanvasRegion>
       <div class="layer-right">
-        123
+
       </div>
     </div>
   </div>
@@ -44,8 +46,11 @@
 import AtlasRenderCanvasRegion from "./components/AtlasRenderCanvasRegion.vue";
 import AtlasRenderArgument from "./entities/AtlasRenderArgument.ts";
 import {onMounted, ref} from "vue";
+import {Skeleton} from "@esotericsoftware/spine-webgl";
+import {RenderArgument} from "./entities/RenderArgument.ts";
+
 const show = ref<boolean>(false);
-const data: AtlasRenderArgument[] = [];
+const data = ref<AtlasRenderArgument[]>([]);
 const spineName = ref('ceshi');
 const spineNameList = ref([
   {
@@ -55,16 +60,16 @@ const spineNameList = ref([
   {
     value: 'ceshi1',
     label: '测试1',
-  },{
+  }, {
     value: 'ceshi2',
     label: '测试2',
-  },{
+  }, {
     value: 'ceshi3',
     label: '测试3',
-  },{
+  }, {
     value: 'ceshi4',
     label: '测试4',
-  },{
+  }, {
     value: 'ceshi5',
     label: '测试5',
   },
@@ -74,9 +79,21 @@ onMounted(async () => {
   const jsonBlob = URL.createObjectURL(await json.blob());
   const atlas = await fetch("/nan/nan.atlas");
   const atlasBlob = URL.createObjectURL(await atlas.blob());
-  data.push({skel: jsonBlob, texture: atlasBlob, scale: 1, x: 0, y: 0, animation: "animation", edit: true, textureImage: {"nan.png": "/nan/nan.png"}});
+  data.value.push({
+    skel: jsonBlob,
+    texture: atlasBlob,
+    scale: 2.5,
+    x: 12,
+    y: 92,
+    animation: "animation",
+    edit: true,
+    textureImage: {"nan.png": "/nan/nan.png"}
+  });
   show.value = true;
 })
+const onEdit = (skel: {skel: Skeleton, obj: RenderArgument}) => {
+  console.log(skel.skel.scaleX, skel.skel.x, skel.skel.y);
+}
 </script>
 
 <style scoped>
@@ -84,23 +101,28 @@ onMounted(async () => {
   display: grid;
   grid-template-rows: 2fr 48fr;
 }
+
 .menu {
   background-color: darkgray;
 }
+
 .editor {
   width: 100vw;
   height: 100vh;
   display: grid;
   grid-template-columns: 1.5fr 7fr 1.5fr;
   background: gray;
+  justify-items: center;
 }
+
 .viewer {
   width: 99%;
   height: 99%;
 }
+
 .layer-left {
   width: 100%;
-  height:100%;
+  height: 100%;
   border-right: 2px dotted black;
 }
 
@@ -109,12 +131,14 @@ onMounted(async () => {
   height: 100%;
   border-left: 2px dotted black;
 }
+
 .menu {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
 }
+
 .select {
   display: flex;
   align-items: center;

src/components/AtlasRenderCanvasRegion.vue

@@ -9,25 +9,17 @@ import {
   Shader, ShapeRenderer, Skeleton, SkeletonDebugRenderer, SkeletonJson,
   SkeletonRenderer, Vector2
 } from "@esotericsoftware/spine-webgl";
+import {RenderArgument} from "../entities/RenderArgument.ts";
 
 type Props = {
   atlas: AtlasRenderArgument[],
   premultipliedAlpha: boolean,
   debug: boolean
 }
-type Bound = {
+
-  width: number,
+
-  height: number,
+const props = defineProps<Props>();
-  x: number,
+const emit = defineEmits(['edit']);
-  y: number
-}
-type RenderArgument = {
-  skel: Skeleton,
-  state: AnimationState,
-  setupBound: Bound,
-  edit: boolean
-}
-const props = defineProps<Props>()
 const mainCanvas = ref<HTMLCanvasElement>();
 let mounted = false;
 
@@ -56,7 +48,7 @@ const rendererArguments = computed<RenderArgument[]>(() => {
     const animationStateData = new AnimationStateData(skeletonData);
     const animationState = new AnimationState(animationStateData);
     animationState.setAnimation(0, argument.animation, true);
-    return {skel: skeleton, setupBound, state: animationState, edit: !!argument.edit};
+    return {skel: skeleton, setupBound, state: animationState, edit: !!argument.edit, originalRender: argument};
   })
 })
 let timer = Date.now() / 1000;
@@ -99,7 +91,7 @@ const initializationRender = () => {
   mainCanvas.value.getContext("webgl");
 }
 let viewport: {width: number, height: number} = {width: 0, height: 0};
-let selectSkel: Skeleton | null = null;
+let selectSkel: {skel: Skeleton, obj: RenderArgument} | null = null;
 let isDragging: boolean = false;
 const resize = () => {
   if (!mainCanvas.value){
@@ -241,7 +233,7 @@ const render = () => {
     const yMax = Math.max(renderObj.setupBound.y + renderObj.setupBound.height, renderObj.setupBound.y);
     if (mousePosition.x > xMin && mousePosition.x < xMax && mousePosition.y > yMin && mousePosition.y < yMax) {
       if (!hasTouched){
-        selectSkel = renderObj.skel;
+        selectSkel = {skel: renderObj.skel, obj: renderObj};
         webGlCtx.value.bindBuffer(webGlCtx.value.ARRAY_BUFFER, initBuffers(renderObj.setupBound.x,renderObj.setupBound.y,renderObj.setupBound.width,renderObj.setupBound.height, 0, 0, 0));
         webGlCtx.value.drawArrays(webGlCtx.value.LINE_LOOP, 0, 4);
       }
@@ -279,8 +271,9 @@ const mouseMove = (evt: MouseEvent) => {
     const mX = evt.movementX;
     const mY = evt.movementY;
     if (selectSkel){
-      selectSkel.x += mX * 2;
+      selectSkel.skel.x += mX * 2;
-      selectSkel.y -= mY * 2;
+      selectSkel.skel.y -= mY * 2;
+      emit("edit", selectSkel);
     }
   }
 }
@@ -296,27 +289,28 @@ const wheel = (evt: WheelEvent) => {
     evt.stopPropagation();
     if (selectSkel){
       const deltaScale = -evt.deltaY / 1000;
-      selectSkel.scaleX += deltaScale;
+      selectSkel.skel.scaleX += deltaScale;
-      if (selectSkel.scaleX < 0.1){
+      if (selectSkel.skel.scaleX < 0.1){
-        selectSkel.scaleX = 0.1;
+        selectSkel.skel.scaleX = 0.1;
       }
-      if (selectSkel.scaleX > 10){
+      if (selectSkel.skel.scaleX > 10){
-        selectSkel.scaleX = 10;
+        selectSkel.skel.scaleX = 10;
       }
-      selectSkel.scaleY += deltaScale;
+      selectSkel.skel.scaleY += deltaScale;
-      if (selectSkel.scaleY < 0.1){
+      if (selectSkel.skel.scaleY < 0.1){
-        selectSkel.scaleY = 0.1;
+        selectSkel.skel.scaleY = 0.1;
       }
-      if (selectSkel.scaleY > 10){
+      if (selectSkel.skel.scaleY > 10){
-        selectSkel.scaleY = 10;
+        selectSkel.skel.scaleY = 10;
       }
+      emit("edit", selectSkel);
     }
   }
 }
 </script>
 
 <template>
-  <canvas id="mainCanvas" ref="mainCanvas"></canvas>
+  <canvas id="mainCanvas" ref="mainCanvas" v-once></canvas>
 </template>
 
 <style scoped>

src/entities/Bound.ts

@@ -0,0 +1,6 @@
+interface Bound {
+    width: number,
+    height: number,
+    x: number,
+    y: number
+}

src/entities/RenderArgument.ts

@@ -0,0 +1,10 @@
+import {AnimationState, Skeleton} from "@esotericsoftware/spine-webgl";
+import AtlasRenderArgument from "./AtlasRenderArgument.ts";
+
+export interface RenderArgument {
+    skel: Skeleton,
+    state: AnimationState,
+    setupBound: Bound,
+    edit: boolean,
+    originalRender: AtlasRenderArgument,
+}