1

Eu sou meio ruim de matemática, mas imagino que isso deve ser alguma coisa baseada em cosseno e tangente baseado no raio de hipotenusa. Deve-se considerar que quando o ângulo for 0 ou 90 graus, o toolbar deve ficar ao lado do elemento selecionado, como uma pequena distância, ou seja uma distância menor do que se ele estivesse a 45º.

Como poderia fazer um cálculo para posicionar o toolbar sempre do lado direito, ao mudar o ângulo de um elemento?

inserir a descrição da imagem aqui

Baseado no ângulo do elemento:

function position(current, x, y, area_x, area_y, scale) { 

     //não sei se retornar sempre positivo seria o ideal
     var angleElement = Math.ceil(current.get('angle'));

     if (scale != null && x && y) {

        //mostrando ângulo: 341
        console.log(angleElement);

        if(angleElement > 30 && angleElement < 50) {
           x += 20;
        }
        if(angleElement > 280 && angleElement < 340) {
           x += 20;
        }

        //posicionamento X e Y do toolbar em relação ao objeto rotacionado
        btnLeft = area_x + ((x + 10) *  scale);
        btnTop = area_y + ((y - 20) * scale);


     }
    return {
       left:btnLeft,
       top:btnTop
    }

}

Elemento do fabricjs

//tamanho da área da div onde está o canvas:

var area_x = $('.paper-area').offset().left;
var area_y = $('.paper-area').offset().top;
//o elemento selecionado...
var current = canvas.getActiveObject();
var x = current.oCoords.tr.x;
var y = current.oCoords.tr.y;
var scale = 1;
var objPos = position(current, x, y, area_x, area_y, scale);

//resultado...
console.log(objPos.left, objPos.top);

Aqui tem um vídeo de como ele está funcionando hoje.

4
  • 1
    Pega a norma do seguimento diagonais do bounding box onde contenha o ponto onde o toolbox está ancorado, o angulo dessa norma indica o quadrante para qual a figura foi rotacionada. No primeiro e quarto quadrantes o cálculo continua o mesmo que está fazendo, no terceiro e segundo quadrantes o cálculo é feito com as coordenadas refletidas usando módulo da coordenada x(base canônica i). Commented 13/12/2019 às 19:27
  • var diagonal = Math.sqrt(lado1^2 + lado2^2) isso? Commented 16/12/2019 às 11:13
  • Acho que é mais ou menos isso: fabricjs.com/bounding-rectangle Commented 16/12/2019 às 12:10
  • Valeu, ficou perfeito agora! Commented 16/12/2019 às 12:38

1 Resposta 1

1

Consegui fazer, obrigado @AugustoVasques, eu acabei encontrando o caminho a partir do que você disse:

var bound = current.getBoundingRect(),
    ang = Math.round(current.get('angle')),
    distance = (ang > 72 && ang < 102) ? 50 : 24;
btnLeft = area_x + ((bound.left + bound.width + distance) * $scope.zoomParams.scale);
btnTop = area_y + ((bound.top) * $scope.zoomParams.scale);

O vídeo do resultado final.

2
  • Tem vídeo para ver o resultado? Commented 16/12/2019 às 14:51
  • Publiquei, veja lá. Commented 16/12/2019 às 18:21

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 .