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?
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
}
}
//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.
x
(base canônicai
).var diagonal = Math.sqrt(lado1^2 + lado2^2)
isso?