Question

我想将箭头旋转到任何给定的角度。我需要添加/修改，以便它可以旋转到任何角度。目前它的180度。

function drawArrowAtAngle(cx,cy,angle,context){
  context.save();
  context.beginPath();
  context.lineWidth = 1;
  context.strokeStyle = '#aaa';
  context.moveTo(cx+25,cx-2);
  context.lineTo(cx-55,cx-2);
  context.lineTo(cx-58,cx);
  context.lineTo(cx-55,cx+2);
  context.lineTo(cx+25,cx+2);
  context.lineTo(cx+25,cx-2);  
  context.stroke();
  context.closePath();
  context.restore();

 }

Answer 1

假设您希望旋转中心为(cx,cx)，请在context.save();语句后插入以下三行。

  context.translate(cx,cx) ;
  context.rotate(angle) ;
  context.translate(-cx,-cx) ;

这将使箭头顺时针旋转angle（弧度）。

您在代码中使用(cx,cx)来锚定箭头。如果你的意思是(cx,cy)，那么请相应地调整上面的代码段。

在画布上旋转箭头

1 个答案: