Calculate Toolbar positioning next to a rotated element

Asked

Viewed 46 times

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?

inserir a descrição da imagem aqui

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
    }

}

Element of 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);

Here is a video how it’s working today.

  • 1

    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 basis i).

  • var diagonal = Math.sqrt(lado1^2 + lado2^2) that?

  • I think that’s about it: http://fabricjs.com/bounding-rectangle

  • Thanks, it’s perfect now!

1 answer

1


Managed to do, thanks @Augustovasques, I ended up finding the way from what you said:

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);

The video of the final result.

  • Has video to see the result?

  • I published, look there.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.