Calculate coordinates for 45 degree snap

问题

I have a SVG that draws a line between an origin point and the mouse pointer, what i'd like to do is when shift is depressed (event.shiftKey === true) make the line "snap" to the nearest 45 degree coordinate, the same behaviour you get in photoshop basically.

I've managed to work out the angle in degrees between the two points (so i can decide which angle to snap too, probably using an IF/ELSE tree if needs be) however I don't know how i re-calculate the "end" coordinates based on the new degree's.

I've set up a simplified example here: https://jsbin.com/sohafekije/2/edit?html,js,output

I've also taken a photo of the photoshop behaviour i'm trying to recreate (quality is poor as i had to use a camera as i couldn't screenshot - sorry) just to be 100% clear: http://i.imgur.com/Yo04uxY.jpg

Essentially i'm trying to recreate the behaviour you get in photoshop when you hold the shift key, but my guess is you need to be pretty good with Maths to work out a solution, and i'm not!

Any help is greatly appreciated :)

var app = document.getElementById('app'),
    svg = SVG(app),
    line = svg.polyline([]).fill('none').stroke({ width: 1 }),
    start = [250,250],
    end = null,
    angleTxt = document.getElementById('angle'),
    lineLengthTxt = document.getElementById('linelength');

line.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})

// On mouse move, redraw the line
svg.on('mousemove', function(e){
  end = [e.layerX, e.layerY];
  line.plot([start, end]);
  calcAngle();
});

function calcAngle() {
  var deltaX = end[0] - start[0],
      deltaY = end[1] - start[1],
      rad = Math.atan2(deltaY, deltaX),
      deg = rad * (180/Math.PI),
      linelen = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  

  
  angleTxt.textContent = deg;
  lineLengthTxt.textContent = linelen;
  
}

#app { border: 1px solid blue; width:100%; height:600px}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="https://rawgit.com/svgdotjs/svg.js/master/dist/svg.js"></script>
</head>
<body>
  <div id="app"></div>
  Angle: <span id="angle">-</span><br>
  Line Length: <span id="linelength">-</span>
</body>
</html>

回答1:

I did it !

How use it

You compute the new angle and apply it using cosinus for x value and sinus for y value. Here the angle got to -PI to PI with step of PI/4; If you want to change the step replace 4 in the line 'var newAngle = ...' by other number.

How it's works

First I was thinking about the fact that you need 8 angle position, 4 by PI rad (a cirlce is 2PI rad). So you need to simplify your angle.

newAngle / Math.PI // value is between -1 and 1 (it's a double)
newAngle / Math.PI * 4 // value is between -4 and 4 (it's a double)
Math.round(newAngle / Math.PI * 4) // value is between -4 and 4 (but it's a integer now)
Math.round(newAngle / Math.PI * 4) / 4 // value is between -1 and 1 (with step of 0.25)
Math.round(newAngle / Math.PI * 4) / 4 * Math.PI // value is between -PI and PI with step of 0.25 * PI (PI/4)

Now your new angle is correct. Cosinus return the x value of the angle (look at wikipedia for a graphic explanation) and Sinus the y value of the angle. By multiplying the COSINUS/SINUS by the length you find the next point.

function applyNewAngle() {
  var deltaX = end[0] - start[0],
      deltaY = end[1] - start[1],
      dist = Math.sqrt(Math.pow(deltaX,2) + Math.pow(deltaY,2));
  var newAngle = Math.atan2(deltaY, deltaX);
  var shiftedAngle = Math.round(newAngle / Math.PI * 4) / 4 * Math.PI;
  end = [start[0]+dist*Math.cos(shiftedAngle), start[1]+dist*Math.sin(shiftedAngle)];
}

来源：https://stackoverflow.com/questions/42510144/calculate-coordinates-for-45-degree-snap

标签

javascript

math

svg

svg.js