static/poseEditor.js

console.log("hello from poseEditor.js")
var canvas = null;
var ctx = null;

// candidateの形式：[[x1, y1, score1], [x2, y2, score2], ...]
const candidateSource = [
    [235, 158, 0.93167633],
    [234, 220, 0.97106987],
    [193, 222, 0.93366587],
    [138, 263, 0.87655306],
    [89, 308, 0.8868227],
    [276, 220, 0.9038924],
    [325, 264, 0.92930061],
    [375, 309, 0.9217211],
    [207, 347, 0.86410147],
    [203, 433, 0.86538297],
    [199, 523, 0.95236528],
    [261, 347, 0.88489777],
    [262, 430, 0.90848708],
    [261, 522, 0.94749999],
    [227, 148, 0.94189668],
    [245, 148, 0.93967074],
    [208, 158, 0.92053992],
    [258, 154, 0.73533273]
  ];
const candidate = candidateSource.map(point => [point[0], point[1] - 70, point[2]]);  

// subsetの形式：[[index1, index2, ..., -1], [index1, index2, ..., -1], ...]
const subset = [
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 33.81122635, 18]
];

function clearCanvas() {
  var w = canvas.width;
  var h = canvas.height;
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, w, h);
}

function resizeCanvas(width, height) {
  canvas.width = width ? width : canvas.width;
  canvas.height = height ? height : canvas.height;
  clearCanvas();
  drawBodyPose(candidate, subset);
}

function drawBodyPose(candidate, subset) {
    const stickwidth = 4;
    const limbSeq = [[2, 3], [2, 6], [3, 4], [4, 5], [6, 7], [7, 8], [2, 9], [9, 10],
                 [10, 11], [2, 12], [12, 13], [13, 14], [2, 1], [1, 15], [15, 17],
                 [1, 16], [16, 18], [3, 17], [6, 18]];
  
    const colors = [[255, 0, 0], [255, 85, 0], [255, 170, 0], [255, 255, 0], [170, 255, 0], [85, 255, 0], [0, 255, 0],
                [0, 255, 85], [0, 255, 170], [0, 255, 255], [0, 170, 255], [0, 85, 255], [0, 0, 255], [85, 0, 255],
                [170, 0, 255], [255, 0, 255], [255, 0, 170], [255, 0, 85]];
                
    for (let i = 0; i < 17; i++) {
      for (let n = 0; n < subset.length; n++) {
        const index0 = subset[n][limbSeq[i][0]-1];
        const index1 = subset[n][limbSeq[i][1]-1];
        if (index0 === -1 || index1 === -1) {
          continue;
        }
        const [X0, Y0] = candidate[index0].slice(0, 2);
        const [X1, Y1] = candidate[index1].slice(0, 2);
        ctx.beginPath();
        ctx.lineWidth=stickwidth;
        ctx.strokeStyle = `rgb(${colors[i].join(',')})`;
        ctx.moveTo(X0, Y0);
        ctx.lineTo(X1, Y1);
        ctx.stroke();
      }
    }

    ctx.font = '12px serif';
    for (let i = 0; i < 18; i++) {
      for (let n = 0; n < subset.length; n++) {
        const index = subset[n][i];
        if (index === -1) {
          continue;
        }
        const [x, y] = candidate[index].slice(0, 2);
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = `rgb(${colors[i].join(',')})`;
        ctx.fill();
        ctx.fillStyle = 'rgb(255,255,255)'
        // ctx.fillText(index, x-3, y+4);
      }
    }
}

function getNearestCandidateIndex(x, y) {
    let minDist = Infinity;
    let minIndex = -1;
    for (let i = 0; i < candidate.length; i++) {
      const dist = Math.sqrt((x - candidate[i][0]) ** 2 + (y - candidate[i][1]) ** 2);
      if (dist < minDist) {
        minDist = dist;
        minIndex = i;
      }
    }
    if (16 < minDist) { 
      return -1;
    }
    return minIndex;
}

// ドラッグ中に座標を保持するための変数
let isDragging = false;
let dragIndex = -1;
let dragStartX = 0;
let dragStartY = 0;
let draggingCandidate = null;

function getCanvasPosition(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  return [x, y];
}

// Canvas要素上でマウスが押された場合に呼び出される関数
function handleMouseDown(event) {
  const [x, y] = getCanvasPosition(event);
  const index = getNearestCandidateIndex(x, y);

  // ドラッグ処理の開始
  if (0 <= index || event.altKey || event.ctrlKey || event.shiftKey) {
    isDragging = true;
    dragIndex = index;
    dragStartX = x;
    dragStartY = y;
    draggingCandidate = JSON.parse(JSON.stringify(candidate))
  }
}

// Canvas要素上でマウスが動いた場合に呼び出される関数
function handleMouseMove(event) {
  if (!isDragging) {
    return;
  }

  const [x, y] = getCanvasPosition(event);

  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);
}

// Canvas要素上でマウスが離された場合に呼び出される関数
function handleMouseUp(event) {
  isDragging = false;
}

function initializePose(w,h) {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  canvas.addEventListener('mousedown', handleMouseDown);
  canvas.addEventListener('mousemove', handleMouseMove);
  canvas.addEventListener('mouseup', handleMouseUp);

  resizeCanvas(w, h);
}

function savePose() {
    const canvasUrl = canvas.toDataURL();

    const createEl = document.createElement('a');
    createEl.href = canvasUrl;

    // This is the name of our downloaded file
    createEl.download = "pose.png";

    createEl.click();
    createEl.remove();
}