altert / OpenseadragonFabricjsOverlay

fabricjs canvas overlay for openseadragon
BSD 3-Clause "New" or "Revised" License
70 stars 64 forks source link

Rotation support #9

Open jetic83 opened 8 years ago

jetic83 commented 8 years ago

There does not seem to be rotation support (suppose I rotate the openseadragon view, the objects on the fabricjs overlay should rotate, too).

altert commented 7 years ago

As far as I know there is no canvas rotation support in Fabric for now. I guess one way to do it would be to rotate every fabric object on scene

jetic83 commented 7 years ago

Yes, that is what I manually do now on a rotation event.

On the other hand, Openseadragon itself supports overlays (such as rectangles, and arrows) which do rotate with the viewer (you can even choose how they should rotate, fixed or sticky). So it would be nice if fabricJS would do similar or better.

WilliamCarlos commented 7 years ago

Hey @jetic83, I'm also trying to get my overlays to rotate with the OSD viewer. Do you have code that rotates all the objects on the canvas I could take a look at? Thanks in advance!

jetic83 commented 7 years ago

As I tested today, the new version does not support all my implemented pointer events. Also the rotations seem to be highly version specific. But in princible, I do something like that:

viewer.addHandler('rotate', function (evt) {
        var objs = overlay.fabricCanvas().getObjects();
        var new_point;
        for (var i = 0; i < objs.length; i++) {
            if (objs[i].type === 'i-text') {
                new_point = rotate(0, 0, objs[i].anchorX, objs[i].anchorY, evt.degrees);
                objs[i].left = new_point[0];
                objs[i].top = new_point[1];
            }
        }
}

It also depends how you want to have the items rotated (should they be fixed to the screen, should the rotate with the image, should they do other things).

AnchorX and Y are anchors on the image where the object should remain. rotate is a helper function:

function rotate(cx, cy, x, y, degrees) {
    var radians = degrees * (Math.PI / 180),
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        x_rot = cos * (x - cx) - sin * (y - cy) + cx,
        y_rot = sin * (x - cx) + cos * (y - cy) + cy;
    return [x_rot, y_rot];
}
MMtechnolab commented 7 years ago

https://github.com/MMtechnolab/OpenSeaDragon the fabricjsoverlay is not rotating when viewer is rotated