Open jetic83 opened 8 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
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.
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!
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];
}
https://github.com/MMtechnolab/OpenSeaDragon the fabricjsoverlay is not rotating when viewer is rotated
There does not seem to be rotation support (suppose I rotate the openseadragon view, the objects on the fabricjs overlay should rotate, too).