tudo bem? Eu gostaria de ajuda com um problema que obtive recentemente ao trabalhar com JS. Preciso fazer uma função em JS que possa rotacionar um conjunto de pontos presentes em uma curva de bezier.
Pesquisei anteriormente uma forma de realizar essa rotação dos pontos, mas tudo que encontrei é relacionado à rotacionar o context do canvas que está sendo utilizado. Porém isso não serve no meu caso, devido ao fato de ter de armazenar os valores do ponto após a rotação da curva.
Dessa forma, tentei aplicar uma equação geométrica para achar o valor do ângulo entre dois pontos em que o mouse toca a tela para que eu possa realizar a rotação. Essa equação se encontra abaixo:
if (mousePosition.x == null) {
mousePosition.x = event.clientX;
mousePosition.y = event.clientY;
} else {
// noinspection JSSuspiciousNameCombination
let productModule = {
first: Math.sqrt(Math.pow(event.clientX, 2) + Math.pow(event.clientY, 2)),
second: Math.sqrt(Math.pow(mousePosition.x, 2) + Math.pow(mousePosition.y, 2))
};
let scaleProduct = Math.abs((event.clientX * mousePosition.x) + (event.clientY * mousePosition.y));
let angle = Math.acos(scaleProduct / (productModule.first * productModule.second));
rotateBezier(curveName, angle);
}
mousePosition.x = event.clientX;
mousePosition.y = event.clientY;
Teoricamente, essa equação se encontra correta (foi uma orientação de professores de GA da minha universidade), a menos que eu tenha escrito errado :P
Continuando, após obter o ângulo, eu passo o mesmo para a função de rotação abaixo que tem o intuito de alterar o valor da posição dos pontos na curva de bezier e redesenhar essa curva no canvas posteriormente.
function runPointsAndChange(curveName, callback_1, callback_2) {
if (all_curves[curveName] != null) {
all_curves[curveName].forEach(function(points, index, array) {
points.forEach(function(point, position, arr) {
if (position % 2 === 0) {
points[position] = callback_1(points[position], points[position + 1]);
} else {
points[position] = callback_2(points[position], points[position - 1]);
}
});
});
bezier_curve(curveName); //função que desenha todas as curvas, e desenha um retângulo ao redor da curva selecionada
}
}
function rotateBezier(curveName, angle) {
curveName = curveName.replace(" ", "-").toLowerCase();
const boxDimensions = getBoxDimensions(curveName, null, true);
const imgOfLf = $("#image").offset().left;
const imgOfTp = 10; //imageOffset.top;
let origin = {
x: (boxDimensions[0] + boxDimensions[2]) / 2,
y: (boxDimensions[1] + boxDimensions[3]) / 2
};
runPointsAndChange(curveName, function(pointX, pointY) {
return origin.x + imgOfLf + (pointX * Math.cos(angle)) - (pointY * Math.sin(angle));
}, function(pointY, pointX) {
return origin.y + imgOfTp + (pointX * Math.sin(angle)) + (pointY * Math.cos(angle));
});
}
Por algum motivo que não consegui descobrir, a função não funcionou corretamente. Averiguei se a função rotateBezier estava incorreta passando como parametro o valor Math.PI, e descobri que ela consegue rotacionar a curva, porém a mesma desloca-se de posição e vai parar relativamente no centro do canvas.
Logo, gostaria de ajuda com relação à esse problema, desde já agradeço.