Pessoal, abaixo, eu tenho os seguintes códigos numa estrutura básica usando html, css e javascript.
Eu já tentei de todo o jeito, mas não consegui rotacionar o triângulo no meio quando o usuário desliza o input range
. Detalhe, a função nativa do canvas
(rotate) não funcionará para mim, pois quero entender esse conceito usando somente as operações com matrizes, como está, mais ou menos, no trecho em javascript.
Antecipadamente, agradeço a todos e caso a pergunta não esteja clara, executem o código, que está até rotacionando o triângulo, mas não como o esperado.
const canvas = document.getElementById('thecanvas');
const ctx = canvas.getContext('2d');
// Para criar o triângulo no meio do canvas.
const matriz = [
[canvas.width / 2, canvas.height / 2 - 50],
[canvas.width / 2 - 50, canvas.height / 2 + 50],
[canvas.width / 2 + 50, canvas.height / 2 + 50],
]; // Pontos iniciais (coordenadas x e y) do triângulo no canvas.
let m = [...matriz]; // CLONA A MATRIZ
if (canvas) {
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(m[0][0], m[0][1]);
ctx.lineTo(m[1][0], m[1][1]);
ctx.lineTo(m[2][0], m[2][1]);
ctx.stroke();
ctx.fill();
} else {
alert('Sem contexto!');
}
} else {
alert('O navegador não pode renderizar o canvas');
}
// Fonte: https://stackoverflow.com/questions/27205018/multiply-2-matrices-in-javascript
function multiplyMatrices(matrizA, matrizB) {
var result = [];
for (var i = 0; i < matrizA.length; i++) {
result[i] = [];
for (var j = 0; j < matrizB[0].length; j++) {
var sum = 0;
for (var k = 0; k < matrizA[0].length; k++) {
sum += matrizA[i][k] * matrizB[k][j];
}
result[i][j] = sum;
}
}
return result[0];
}
document.getElementById('rotacao').oninput = function({
target
}) {
let angulo = parseInt(target.value, 10);
let alfa = angulo * (Math.PI / 180);
let matrizRotacao = [
[Math.cos(alfa), -Math.sin(alfa)],
[Math.sin(alfa), Math.cos(alfa)],
];
m = m.map((el) => {
return multiplyMatrices([el], matrizRotacao);
});
// ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(m[0][0], m[0][1]);
ctx.lineTo(m[1][0], m[1][1]);
ctx.lineTo(m[2][0], m[2][1]);
ctx.fill();
};
body {
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
overflow: hidden;
}
canvas {
border: 1px solid #ccc;
}
.main {
display: flex;
flex-direction: column;
}
.controles-container {
display: flex;
flex-direction: row;
}
.input {
text-align: center;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.end {
border-right: 1px solid #ccc;
}
<div class="main">
<div class="controles-container">
<div class="input">
ROTACIONAR<br />
<input type="range" name="" step="1" min="0" max="360" id="rotacao" value="0" />
</div>
</div>
<canvas id="thecanvas" width="600" height="600">
Se você vir isso, significa que seu navegador não oferece suporte os
novos elementos de tela HTML5 legais. Rapaz, é <em> você </em>
perdendo! Você pode querer atualizar.
</canvas>
</div>