modify draw style

static/poseEditor.js

@@ -52,7 +52,7 @@ function resizeCanvas(width, height) {
 }
 
 function drawBodyPose(candidate, subset) {
-    const stickwidth = 4;
+    const stickWidth = 6;
     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]];
@@ -60,7 +60,10 @@ function drawBodyPose(candidate, subset) {
     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]];
-                
+
+    ctx.globalAlpha = 0.7;
+
+    // edge
     for (let i = 0; i < 17; i++) {
       for (let n = 0; n < subset.length; n++) {
         const index0 = subset[n][limbSeq[i][0]-1];
@@ -71,7 +74,7 @@ function drawBodyPose(candidate, subset) {
         const [X0, Y0] = candidate[index0].slice(0, 2);
         const [X1, Y1] = candidate[index1].slice(0, 2);
         ctx.beginPath();
-        ctx.lineWidth=stickwidth;
+        ctx.lineWidth=stickWidth;
         ctx.strokeStyle = `rgb(${colors[i].join(',')})`;
         ctx.moveTo(X0, Y0);
         ctx.lineTo(X1, Y1);
@@ -79,6 +82,7 @@ function drawBodyPose(candidate, subset) {
       }
     }
 
+    // node
     ctx.font = '12px serif';
     for (let i = 0; i < 18; i++) {
       for (let n = 0; n < subset.length; n++) {
@@ -88,13 +92,15 @@ function drawBodyPose(candidate, subset) {
         }
         const [x, y] = candidate[index].slice(0, 2);
         ctx.beginPath();
-        ctx.arc(x, y, 4, 0, 2 * Math.PI);
+        ctx.arc(x, y, stickWidth*1.2, 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);
       }
     }
+
+    ctx.globalAlpha = 1.0;
 }
 
 function drawUI() {
@@ -126,6 +132,7 @@ function getNearestCandidate(x, y) {
 }
 
 let dragRange = 64;
+let dragRangeDelta = 16;
 
 // ドラッグ中に座標を保持するための変数
 let isDragging = false;
@@ -255,8 +262,8 @@ function handleMouseMove(event) {
 function handleMouseUp(event) { isDragging = false; }
 
 document.addEventListener("keydown", (event) => { 
-  if (event.code == "BracketLeft") {dragRange = Math.max(1, dragRange - 8);}
-  if (event.code == "BracketRight") {dragRange = Math.min(256, dragRange + 8);}
+  if (event.code == "BracketLeft") {dragRange = Math.max(dragRangeDelta, dragRange - dragRangeDelta);}
+  if (event.code == "BracketRight") {dragRange = Math.min(512, dragRange + dragRangeDelta);}
   keyDownFlags[event.code] = true; 
   Redraw();
 });