Question

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

假设我有一条开始＆amp;线的线路结束点。我需要围绕起点旋转这条线。

这是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

您可以使用变换来旋转线条或绘制到画布的任何形状。要旋转：

转换为支点，即。轮换点
应用旋转变换
翻译
画形

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

＆＃13;

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

＆＃13;

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

＆＃13;

话虽这么说，如果你需要与行进行交互，那么转换可能会让人感到困惑，因为鼠标位置不会反转转换，并且最终会出现与预期不同的地方。

因此您可以使用手动转换，以便在转换后知道线的确切位置（使用内置转换操作原始位置）。

为此，请参阅 this answer 了解该方法。

画布 - 旋转线

1 个答案: