1

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.

1 Resposta 1

1

Consegui detectar o problema. Primeiramente na função de rotação, cujo nome é rotateBezier deve-se eliminar o uso da origem tanto em x quanto em y, e dos offsets utilizados. A função ficou da seguinte forma:

function rotateBezier(curveName, angle) {
    curveName = curveName.replace(" ", "-").toLowerCase();
    runPointsAndChange(curveName, function(pointX, pointY) {
        return (pointX * Math.cos(angle)) - (pointY * Math.sin(angle));
    }, function(pointY, pointX) {
        return (pointX * Math.sin(angle)) + (pointY * Math.cos(angle));
    }, true);
}

Posteriormente tive que alterar o código principal informado para calcular o ângulo, e adicionar as seguintes linhas após a declaração de angle

if (isNaN(angle)) {
    angle = 0;
} else {
    angle *= highLowAngle(mousePosition, {
        x: event.clientX,
        y: event.clientY
    });
}

Sendo que a função highLowAngle é para detectar se vai rotacionar para a direita ou esquerda. O conteúdo da função é seguinte:

function highLowAngle(oldPosition, currentPosition) {
    let maxX = Math.abs(oldPosition.x - currentPosition.x), maxY = Math.abs(oldPosition.y - currentPosition.y);
    if (Math.max(maxX, maxY) === maxX) {
        return oldPosition.x > currentPosition.x ? -1 : 1;
    }
    return oldPosition.y > currentPosition.y ? -1 : 1;
}

Isso bastou para resolver meu erro. Espero que quem veja a resposta posteriormente se beneficie da mesma.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .