Rotated circle size

[bogdan-nourescu]

Starting from this demo:
https://konvajs.org/docs/select_and_transform/Basic_demo.html
And changing one of the Rects to a Circle and applying a rotation of 45, the transformer size is not correct. Actually the size of the object is not correct, and this breaks the snapping when you move them


This is a modified example of https://konvajs.org/docs/sandbox/Objects_Snapping.html where i changed the Rect to Circle

It doesn't really make sense for a circle to be rotated, but i have an image of something round, but where you can notice the rotation and i want it to behave like a circle, but i can't figure out how to make it work.

[bogdan-nourescu]

I think i made it work with this code:

    _transformedRect(rect, top) {
        let points = [
            { x: rect.x, y: rect.y },
            { x: rect.x + rect.width, y: rect.y },
            { x: rect.x + rect.width, y: rect.y + rect.height },
            { x: rect.x, y: rect.y + rect.height },
        ];

        let trans = this.getAbsoluteTransform(top);
        points  = points.map(function (point) {
            return trans.point(point);
        });
        let centerX = (points[0].x + points[1].x + points[2].x + points[3].x) / 4;
        let centerY = (points[0].y + points[1].y + points[2].y + points[3].y) / 4;
        let minX = centerX - rect.width / 2;
        let minY = centerY - rect.height / 2;
        let maxX = centerX + rect.width / 2;
        let maxY = centerY + rect.height / 2;
        return {
            x: minX,
            y: minY,
            width: maxX - minX,
            height: maxY - minY,
        };
    }