javascript - Canvas - 旋转线

Question

我是 Canvas 新手，我需要做一些在 google 上找不到答案的事情...

假设我有一 strip 有起点和终点的线。 我需要围绕起点旋转这条线。

这是 jsfiddle : http://jsfiddle.net/0cc6h833/1/

var cd;
var ctx2;
var startPoint;
var endPoint;
        function init(){
            cd= document.getElementById("canvas2");
            cd.width=500;
            cd.height=500;

            ctx2=cd.getContext("2d");
        }


        function draw(){
            startPoint={ x:200, y:200};
            endPoint={ x:startPoint.x+100, y:startPoint.y+100};

            ctx2.beginPath();
                ctx2.setLineDash([1,2]);
                ctx2.moveTo(startPoint.x,startPoint.y);
                ctx2.lineTo(endPoint.x,endPoint.y);
                ctx2.stroke();
                ctx2.closePath();            
        }

init();
draw();

我也愿意使用任何 Canvas 库。 我知道这样会更简单，但我不知道该选择哪一个

Answer 1

您可以使用变换来旋转绘制到 Canvas 上的线条或任何形状。旋转:

• 转换为枢轴点，即。旋转点
• 应用旋转变换
• 翻译回来
• 绘制形状

在你的情况下，如果我们说绕线的中间旋转:

var cd;
var ctx2;
var startPoint;
var endPoint;
var midPoint;

function init() {
  cd = document.getElementById("canvas2");
  cd.width = 500;
  cd.height = 500;

  ctx2 = cd.getContext("2d");
}


function draw() {
  startPoint = {
    x: 200,
    y: 200
  };
  endPoint = {
    x: startPoint.x + 100,
    y: startPoint.y + 100
  };

  ctx2.beginPath();
  ctx2.setLineDash([1, 2]);
  
  // rotate around center - find mid-point using lerp
  midPoint = {
    x: startPoint.x + (endPoint.x - startPoint.x) * 0.5,
    y: startPoint.y + (endPoint.y - startPoint.y) * 0.5
  };
  
  // translate to midpoint
  ctx2.translate(midPoint.x, midPoint.y);
  
  // rotate some angle (radians)
  ctx2.rotate(0.25 * Math.PI);  // = 45°
  
  // translate back
  ctx2.translate(-midPoint.x, -midPoint.y);

  // draw line
  ctx2.moveTo(startPoint.x, startPoint.y);
  ctx2.lineTo(endPoint.x, endPoint.y);
  ctx2.stroke();
  ctx2.closePath();
  
  // reset transforms
  ctx2.setTransform(1,0,0,1,0,0);
}

init();
draw();

<canvas id="canvas2" width="500" height="500" style="border:1px solid #000000;">
</canvas>

话虽这么说，如果您需要与线条进行交互，那么转换可能会显得令人困惑，因为鼠标位置不会反转转换，并且最终会出现与您预期不同的位置。

因此，您可以使用手动转换，以便了解转换后线条末端的确切位置(使用您在原始位置上操作的内置转换)。

为此，请参阅 this answer 获取该部分的方法。