html5 - ejemplo - cómo detectar el punto en el lienzo después de la rotación de la lona

header html

Question

Estoy trabajando en la aplicación de lona html5 en la que dibujo rectángulo sobre lienzo.

1. El lienzo está en el tarso al centro
2. Use la función fillRect para dibujar un rectángulo
3. Canvas es la posición absoluta con respecto a su div principal. Funciona correctamente cuando el lienzo está en la posición original, pero cuando gano el lienzo 90/180/270 grados no puedo relacionar el punto al que se hace clic en la pantalla y señalar para dibujar en el lienzo. Por ejemplo: cuando el lienzo está en su posición original, puedo hacer clic en la pantalla y transferir ese punto al punto de lienzo para dibujar un rectángulo según mi posición de traducción. Pero cuando giro el lienzo por 90/180/270 grados, no puedo convertir ese punto de pantalla en un punto de lienzo. por lo que la forma se dibuja en posición impar / diferente y, en realidad, se hace clic por usuario.

Mi pregunta:

Cuando se gira el lienzo, cómo traducir el punto que está haciendo clic en la pantalla para dibujar el punto según su rotación

Cualquier ayuda es apreciada. Gracias de antemano.

Answer 1

Hice una pequeña clase de transformación para este mismo propósito:

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

Puede usarlo así:

var t = new Transform();
console.log(t.transformPoint(5,6)); // will be just [5,6]
// apply the same transformations that you did to the canvas
t.rotate(1);
console.log(t.transformPoint(5,6)); // will be [-2.347, 7.449]

violín:

http://jsfiddle.net/DRf9P/

Answer 2

I am affraid that we will have to use math.

Gire un punto por el valor negativo del ángulo de rotación para obtener su posición en el plano girado usando esta ecuación:

nX = x * cos(a) - y * sin(a)

nY = x * sin(a) + y * cos(a)

donde a es negativo del valor de rotación

Tu punto ahora está en el plano normal no girado, por lo que el resto de la lógica es como cuando el angle = 0

Aquí hay un violín de demostración para ti:

http://jsfiddle.net/Q6dpP/5/

Y aquí hay una versión con traducción:

http://jsfiddle.net/Q6dpP/6/