如何在2D画布中添加矩形角点？

Question

我正在研究2D Canvas，我想在矩形的每个角落添加这个角落角度（请参见图片），这个矩形尺寸不固定我可以通过拖动鼠标按钮来改变矩形尺寸，我已经做了灵活的矩形。请任何人帮助我，如何添加这些角落，它应该根据矩形大小灵活。

 function draw() {
        ctx.fillStyle = "#6E97B1";  
        width += deltaMove.x;
        height += deltaMove.y;
        var CrosshairSize = 6;
        ctx.strokeStyle = '#00BEFE';  
        ctx.globalAlpha = 0.3;
        ctx.lineWidth = 1;
        ctx.fillRect(startposition.x, startposition.y, width, height);
        ctx.strokeRect(startposition.x + (1 + width / 2), startposition.y + (height / 2) - (CrosshairSize / 2), 1, CrosshairSize);
        ctx.strokeRect(startposition.x + (1 + width / 2) - (CrosshairSize / 2), startposition.y + (height / 2), CrosshairSize, 1); }

Answer 1

认为您可能需要以下内容，

＆＃13;

＆＃13;

//================================================================
// The drawBox function
// Arguments
// x,y : top left of the box
// w,h : width and height. If you have a coordinate the width and height 
//       can be calculated mouseX - x, mouseY - y  where x, and y are the 
//       top left of the box.
// crosshairSize :   for one arm. Total size is crosshairSize * 2 + detailWidth
// detailWidth : of detail
// fill : background of rect fill colour
// detailCol :  colour
function drawBox(x, y, w, h, crosshairSize, detailWidth, fill, detailCol) {
        function drawCross(x,y,s,w){ // draw crosshair s is size, w is width
          const hw = w / 2; // half width
          ctx.beginPath();
          ctx.lineTo(x - hw, y - hw);
          ctx.lineTo(x - hw, y - s);
          ctx.lineTo(x + hw, y - s);
          ctx.lineTo(x + hw, y - hw);
          ctx.lineTo(x + s, y - hw);
          ctx.lineTo(x + s, y + hw);
          ctx.lineTo(x + hw, y + hw);
          ctx.lineTo(x + hw, y + s);
          ctx.lineTo(x - hw, y + s);
          ctx.lineTo(x - hw, y + hw);
          ctx.lineTo(x - s, y + hw);
          ctx.lineTo(x - s, y - hw);
          ctx.closePath();
          ctx.fill()
        }
        function drawCorner(x,y,dx,dy,s,w){ // draw crosshair s is size, w is width
                                            // dx and dy are directions        
          const hw = w / 2; // half width
          ctx.beginPath();
          ctx.lineTo(x,y);
          ctx.lineTo(x + dx * s, y);
          ctx.lineTo(x + dx * s, y + dy * w);
          ctx.lineTo(x + dx * w, y + dy * w);
          ctx.lineTo(x + dx * w, y + dy * s);
          ctx.lineTo(x , y + dy * s);
          ctx.closePath();
          ctx.fill();
        }
        ctx.fillStyle = fill;  
        ctx.fillRect(x,y,w,h);
        ctx.fillStyle = detailCol;  
        drawCross(x + w / 2, y + h / 2,crosshairSize,detailWidth);
        drawCorner(x , y ,1, 1, crosshairSize * 2 ,detailWidth);
        drawCorner(x + w , y ,-1, 1, crosshairSize * 2 ,detailWidth);
        drawCorner(x + w, y + h ,-1, -1, crosshairSize * 2 ,detailWidth);
        drawCorner(x , y + h,1, -1, crosshairSize * 2 ,detailWidth);
        
}

// end of function
// ===========================================







// rest of code is just to animate 
const ctx = canvas.getContext("2d");

function mainLoop(time){
  ctx.clearRect(0,0,300,150);
  var w = Math.abs(Math.sin(time / 10000) * 110) + 20;
  var h = Math.abs(Math.sin(time / 3791) * 45) + 20 ;


  // Calling the drawBox function
  drawBox(150-w,75-h,w*2,h* 2,8,4,"#6E97B1",'#00BEFE');



  requestAnimationFrame( mainLoop);

}
 requestAnimationFrame( mainLoop);



// Code monkey pay 2 peanuts and a banana please.

＆＃13;

<canvas id = "canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;

...如果需要，获取低质量的JPEG工件将需要3行额外的代码。 ：P