add translate/rotate/scale

app.py

@@ -53,6 +53,7 @@ with gr.Blocks() as demo:
       height = gr.Slider(label="Height", mininmum=512, maximum=1024, step=64, value=512, key="Height", interactive=True)
       startBtn = gr.Button(value="Start edit")
     with gr.Column(scale=2):
+      gr.HTML("<ul><li>ctrl + drag to scale</li><li>alt + drag to translate</li><li>shift + drag to rotate(move right first, then up or down)</li></ul>")
       html = gr.HTML(html_text)
       saveBtn = gr.Button(value="Save")
 

static/poseEditor.js

@@ -109,8 +109,9 @@ function getNearestCandidateIndex(x, y) {
 // ドラッグ中に座標を保持するための変数
 let isDragging = false;
 let dragIndex = -1;
-let dragOffsetX = 0;
-let dragOffsetY = 0;
+let dragStartX = 0;
+let dragStartY = 0;
+let draggingCandidate = null;
 
 function getCanvasPosition(event) {
   const rect = canvas.getBoundingClientRect();
@@ -125,11 +126,12 @@ function handleMouseDown(event) {
   const index = getNearestCandidateIndex(x, y);
 
   // ドラッグ処理の開始
-  if (0 <= index) {
+  if (0 <= index || event.altKey || event.ctrlKey || event.shiftKey) {
     isDragging = true;
     dragIndex = index;
-    dragOffsetX = x - candidate[index][0];
-    dragOffsetY = y - candidate[index][1];
+    dragStartX = x;
+    dragStartY = y;
+    draggingCandidate = JSON.parse(JSON.stringify(candidate))
   }
 }
 
@@ -141,9 +143,38 @@ function handleMouseMove(event) {
 
   const [x, y] = getCanvasPosition(event);
 
-  // candidateの座標を更新
-  candidate[dragIndex][0] = x - dragOffsetX;
-  candidate[dragIndex][1] = y - dragOffsetY;
+  const dragOffsetX = x - dragStartX;
+  const dragOffsetY = y - dragStartY;
+
+
+  if (event.ctrlKey) {
+    let xScale = 1 + dragOffsetX / canvas.width;
+    let yScale = 1 + dragOffsetY / canvas.height;
+    for (let i = 0 ; i < candidate.length; i++) {
+      candidate[i][0] = (draggingCandidate[i][0] - dragStartX) * xScale + dragStartX;
+      candidate[i][1] = (draggingCandidate[i][1] - dragStartY) * yScale + dragStartY;
+    }
+  } else if (event.shiftKey) {
+    // rotate
+    let angle = Math.atan2(dragOffsetY, dragOffsetX);
+    for (let i = 0 ; i < candidate.length; i++) {
+      let x = draggingCandidate[i][0] - dragStartX;
+      let y = draggingCandidate[i][1] - dragStartY;
+      candidate[i][0] = x * Math.cos(angle) - y * Math.sin(angle) + dragStartX;
+      candidate[i][1] = x * Math.sin(angle) + y * Math.cos(angle) + dragStartY;
+    }
+
+  } else if (event.altKey) {
+    // 全体移動
+    for (let i = 0 ; i < candidate.length; i++) {
+      candidate[i][0] = draggingCandidate[i][0] + dragOffsetX;
+      candidate[i][1] = draggingCandidate[i][1] + dragOffsetY;
+    } 
+  } else {
+    // 個別移動
+    candidate[dragIndex][0] = draggingCandidate[dragIndex][0] + dragOffsetX;
+    candidate[dragIndex][1] = draggingCandidate[dragIndex][1] + dragOffsetY;
+  }
 
   clearCanvas();
   drawBodyPose(candidate, subset);