JavaScript - rotate SVG based line's angle

Question

I draw the line on Canvas and want to merge svg image on line based it's position. How can I find the angle between start and end points of draw line?

Edit

This function for get Angle of Line

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

After find the angle, I want to merge img to on it.

 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" is SVG image's url )

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

Is it right way to follow line rotate position? Just Im new in JS side so need some help. thanks

here What I have now but want to rotate img angle as line's angle

Hi and welcome to SO. If you are asking a question here, it is strongly advised to add your attempt to solve your problem into this post. Thus, include the relevant code to begin with. Thanks. — Evochrome, Sep 17 '18 at 01:12
OK, now that you've changed the question, how do you define the angle between a start and end point of a line ... for example, a line going from (4,4) to (5,5) has what angle? a line going from (6,6) to (3,3) has what angle? a line going from (1,2) to (2,1) has what angle? and a line going from (4,3) to (3,4) has what angle? If you can give an answer to that perhaps I can help — Jaromanda X, Sep 17 '18 at 01:45
`I already get the angle of line` - what? so now you have the angle? — Jaromanda X, Sep 17 '18 at 09:26
No, this code doesn't generate the image you have. You don't show what rotateSVG is, nor how is declared your svg, nor anything even related to canvas. + I sincerily doubt you have an element which id's start by `#`. — Kaiido, Sep 17 '18 at 09:38
ah sorry I forget about put here Canvas code, I edit it again :-) @Kaiido — muze, Sep 17 '18 at 09:43
... so this svg you are trying to rotate is actually drawn on your canvas? — Kaiido, Sep 17 '18 at 09:45
@JaromandaX could you help closing this as a dupe of https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image? I already burnt my CV as too broad.. — Kaiido, Sep 17 '18 at 09:46
@Kaiido the issue is what I cannot rotate in canvas at all. In log I check how svg rotate is changing when merge with line. but in canvas its not showing — muze, Sep 17 '18 at 09:47
Yeah because what's in the is not the same as what you have in your dom. You can't access the content of an img, so you have to handle the transform just like with a raster image. — Kaiido, Sep 17 '18 at 09:48
@Kaiido but I see and drag that SVG image on canvas. Is it possible to dragg and drop, move in canvas , but not possible to rotate? — muze, Sep 17 '18 at 09:53

enxaneta · Accepted Answer · 2018-09-17T12:43:26.610

IMPORTANT: This answer addresses the question as of revision 1 This is the content of the question I answered:

"I draw the line on Canvas and want to merge svg image on line based it's position. How can I find the angle between start and end points of draw line?"

Given 2 points p1 and p2 you may calculate the angle between start and end points of the line drawn from p1 to p2 using the atan2 method.

If you consider the line as the hypotenuse and the distance in x (dx) & y (dy) as catheti you can write: let angle = Math.atan2(dy, dx);. This will give you the angle in radians. If you need the angle in degrees you have to: 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;}

<canvas></canvas>

I hope this helps.

Yeah I already get the angle in degrees as public angleOfWall(p1,p2){ // angle in radians var angleRadians = Math.atan2(p2.y - p1.y, p2.x - p1.x); // angle in degrees var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI; return angleDeg; } — muze, Sep 17 '18 at 08:58
@muze You edited the question in base of my answer and change it to another question. If you liked my answer please consider accepting it and ask another question in a different post. — enxaneta, Sep 17 '18 at 12:48

JavaScript - rotate SVG based line's angle

1 Answers1