Necesito rotar una imagen o, en este caso, un cuadrado alrededor de su centro usando un lienzo. Si está en el punto (10,16) y giro el cuadrado 180 grados, necesito que el cuadrado permanezca en (10,16) mientras mira hacia abajo. Los métodos que he probado están en el código adjunto.
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const size = 50
const pos = canvas.width/4
let rotateAmount = 0;
const tests = [
// Test 1
(rotation)=>{
ctx.translate(pos/2+size, pos/2+size)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 2
(rotation)=>{
ctx.translate(size/2+pos, size/2+pos)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 3
(rotation)=>{
ctx.translate(pos/2, pos/2)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 4
(rotation)=>{
ctx.translate(size/2, size/2)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 5
(rotation)=>{
ctx.translate(pos + 0.5 * size, pos + 0.5 * size)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
}
]
window.onmousemove = (mouse) => {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height)
rotateAmount++
tests[document.getElementById("testMethod").value](rotateAmount)
}
canvas{
border-color: violet;
border-style: solid;
border-width: 5px;
}
<p>
Move your mouse to rotate the square
</p>
<p>
Select your test method via the dropdown
</p>
<select id="testMethod">
<option value="0">Test 1</option>
<option value="1">Test 2</option>
<option value="2">Test 3</option>
<option value="3">Test 4</option>
<option value="4">Test 5</option>
</select>
<button onclick="rotateAmount = 0">Reset Rotation</button>
<br>
<canvas id="canvas" width="250" height="250"></canvas>
¡Encontré la respuesta a esto mientras revisaba mi pregunta! Resulta que debes volver a traducir después de rotar. La prueba correcta es la prueba 2, ya que divide el tamaño por 2 (para que estés en el centro del cuadrado) y luego suma la posición (para que estés en el cuadrado). A continuación se muestra un ejemplo de trabajo con la retraducción.
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const size = 50
const pos = canvas.width/4
let rotateAmount = 0;
const tests = [
// Test 0
(rotation)=>{
ctx.translate(size/2+pos, size/2+pos)
ctx.rotate(Math.PI / 180 * rotation)
ctx.translate(-size/2-pos, -size/2-pos)// Added Line
ctx.fillRect(pos, pos, size, size)
}
]
window.onmousemove = (mouse) => {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height)
rotateAmount++
tests[document.getElementById("testMethod").value](rotateAmount)
}
canvas{
border-color: violet;
border-style: solid;
border-width: 5px;
}
<p>
Move your mouse to rotate the square
</p>
<p>
Select your test method via the dropdown
</p>
<select id="testMethod">
<option value="0">Test</option>
</select>
<button onclick="rotateAmount = 0">Reset Rotation</button>
<br>
<canvas id="canvas" width="250" height="250"></canvas>