Нахождение координат после того, как холст вращения

Question

0 до 0, -70 этим:

ctx.strokeStyle = "red"; 
ctx.lineWidth = 2; 
ctx.rotate(Math.PI/-10;); 
ctx.beginPath(); 
ctx.moveTo(0,0); 
ctx.lineTo(0,-70); 
ctx.stroke(); 

И я могу повернуть что 'PI/-10', и это работает.

Как я могу получить точки x, y этого после использования вращения?

Answer 1

Ваши x и y точки будут по-прежнему равны 0 и -70, поскольку они относятся к переводу (вращению). Это в основном означает, что вам нужно будет «перестроить» матрицу, чтобы получить полученную позицию, которую вы видите на холсте.

Если вы хотите рассчитать линию, которая составляет 70 пикселей при -10 градусов, вы можете использовать простую тригонометрию, чтобы вычислить ее самостоятельно (что проще, чем идти в обратном направлении в матрице).

Вы можете использовать такую ​​функцию, которая принимает ваш контекст, начальную позицию линии (x, y) длины (в пикселях) и угла (в градусах) линии, которую вы хотите нарисовать. Это нарисовать линию и возвращает объект с x и y для конечной точки этой линии:

function lineToAngle(ctx, x1, y1, length, angle) { 

    angle *= Math.PI/180; 

    var x2 = x1 + length * Math.cos(angle), 
     y2 = y1 + length * Math.sin(angle); 

    ctx.moveTo(x1, y1); 
    ctx.lineTo(x2, y2); 
    ctx.stroke(); 

    return {x: x2, y: y2}; 
} 

Тогда просто называют его:

var pos = lineToAngle(ctx, 0, 0, 70, -10); 

//show result of end point 
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2)); 

Результат:

x: 68.94 y: -12.16 

Or вы можете вместо этого расширить контекст canvas, выполнив следующие действия:

if (typeof CanvasRenderingContext2D !== 'undefined') { 

    CanvasRenderingContext2D.prototype.lineToAngle = 
     function(x1, y1, length, angle) { 

      angle *= Math.PI/180; 

      var x2 = x1 + length * Math.cos(angle), 
       y2 = y1 + length * Math.sin(angle); 

      this.moveTo(x1, y1); 
      this.lineTo(x2, y2); 

      return {x: x2, y: y2}; 
     } 
} 

И затем использовать его непосредственно на вашем контексте, как это:

var pos = ctx.lineToAngle(100, 100, 70, -10); 
ctx.stroke(); //we stroke separately to allow this being used in a path 

console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2)); 

(0 градусов укажут вправо).

Answer 2

Итак, вы спрашиваете «после того, как я установил преобразование, как я могу запускать точки через это преобразование»?

В этом случае см. HTML5 Canvas get transform matrix?. Вопрос и ответы несколько старые, но кажутся современными. Я не могу найти ничего в текущей спецификации HTML5, которая позволяет вам получить доступ и использовать матрицу преобразования. (Я вижу, что это теоретически доступно через context.currentTransform, но я не вижу никаких функций, позволяющих вам использовать матрицу - вам нужно будет умножить свою точку на матрицу самостоятельно или подделать ее, создав полную SVGMatrix для вашего точечного вектора .)

В верхнем ответе показан класс преобразования, который вы можете использовать. Отслеживайте изменения и используйте их функцию transformPoint, чтобы получить точку, которую вы хотите преобразовать в ее конечную точку.