JavaScript - 旋转基于SVG的线的角度

Posted 2021-04-17

我在Canvas上绘制线条，并希望根据它的位置合并svg图像。如何找到绘制线的起点和终点之间的角度？

编辑

此功能用于获取线的角度

 public angleOfWall(p1,p2){
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
    return angleDeg;
 }

 var angleOfWall = this.angleOfWall(closestWall.getStart(), closestWall.getEnd());

找到角度后，我想将img合并到它上面。

 for (let i = 0; i < this.model.floorplan.items.length; i++) {
       item = this.model.floorplan.items[i];

       var hover = item===this.viewmodel.activeItem;

      var itemWidth = item.width|32;
      var itemHeight = item.height|32;

      if (!item.el) {
        item.el = document.createElement('img');
        // draw door line on that position 
        item.el.src = this.model.floorplan.items[i].model_url_2d;
        item.el.onload = (( /** image **/ ) => {
          this.context.drawImage(item.el,
          this.viewmodel.convertX(item.xpos * item.scale_x) - itemWidth/2.,
          this.viewmodel.convertY(item.zpos * item.scale_z) - itemHeight/2.,
          itemWidth, itemHeight); 

}。（“model_url2d”是SVG图片的网址）

      private rotateSVG(rotateSVG) {
    var innerArrow = document.getElementById("#add-items");
    innerArrow.setAttribute("transform", rotateSVG);
}

跟随线旋转位置是正确的方法吗？只是我在JS方面的新手，所以需要一些帮助。谢谢

qazxsw poi但想要将图像角度旋转为线的角度

答案

重要提示：此答案解决了修订版1中的问题这是我回答的问题的内容：

“我在Canvas上绘制线条，并希望根据它的位置合并svg图像。如何找到绘制线的起点和终点之间的角度？”

给定2个点p1和p2，您可以使用here What I have now方法计算从p1到p2绘制的线的起点和终点之间的角度。

如果你认为这条线是斜边，而x（dx）和y（dy）的距离可以写成：atan2。这将以弧度为单位给出角度。如果你需要角度，你必须：let angle = Math.atan2(dy, dx);

let angleInDegrees = angle*180/Math.PI

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 300,
  cx = cw / 2;
let ch = canvas.height = 300,
  cy = ch / 2;

// given 2 points: p1 and p2
let p1 = {x:50, y:200},
    p2= {x:200, y:50}


ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();

//the distance in x & y between the 2 points 
let dx = p2.x - p1.x;
let dy = p2.y - p1.y;


// the angle in radians
let angle = Math.atan2(dy, dx);


// the angle in degrees
console.log(angle*180/Math.PI)

canvas{border:1px solid #d9d9d9;}

以上是关于JavaScript - 旋转基于SVG的线的角度的主要内容，如果未能解决你的问题，请参考以下文章

UIView的方向变化基于两点

绘制在位图上以一定角度旋转的线

移动旋转的 SVG 元素

halcon判定物体旋转多少角度

请教第四轴的旋转速度如何指定？

SVG：旋转整个文本