1
I’m kind of bad at math, but I imagine this is something based on cosine and tangent based on the hypotenuse radius. It should be considered that when the angle is 0 or 90 degrees, Toolbar should be next to the selected element, such as a small distance, that is, a distance less than if it was at 45º.
How could you make a calculation to position Toolbar always on the right side, when changing the angle of an element?
Based on element angle:
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);
Here is a video how it’s working today.
Take the standard of diagonal tracking of the bounding box where it contains the point where Toolbox is anchored, the angle of this standard indicates the quadrant to which the figure was rotated. In the first and fourth quadrants the calculation continues the same as it is doing, in the third and second quadrants the calculation is done with the reflected coordinates using the coordinate module
x
(canonical basisi
).– Augusto Vasques
var diagonal = Math.sqrt(lado1^2 + lado2^2)
that?– Ivan Ferrer
I think that’s about it: http://fabricjs.com/bounding-rectangle
– Ivan Ferrer
Thanks, it’s perfect now!
– Ivan Ferrer