Responsive canvas items #7977
Unanswered
khaledmndev
asked this question in
Q&A
Replies: 1 comment
-
Hello @khaledmndev, how are you? I had the same problem in my project. When the zoom was changed, the annotations (fabric objects) were moved to another part of the canvas (in fact, they remained in the same place (e.g. 100px top, 80px left), the height and width of the canvas were changed). To solve my problem I had to change the position and size of the annotations (fabric objects). To change them I took the current zoom and divided it by the previous zoom. (by zoom, understand that it is the scale passed in After that I iterated over the list that contained all the objects and changed them one by one. const scaleFactor = currentZoom / previousZoom;
/** Atualizando a posição e tamanho das anotações caso seja necessário */
annotations.current.forEach((annotation) => {
if (annotation instanceof IText) {
annotation.set({
fontSize: annotation.fontSize * scaleFactor,
});
}
if (annotation instanceof Group) {
annotation.set({
scaleX: annotation.scaleX * scaleFactor,
scaleY: annotation.scaleY * scaleFactor,
});
}
if (annotation instanceof Rect) {
annotation.set({
width: annotation.width * scaleFactor,
height: annotation.height * scaleFactor,
});
}
annotation.set({
left: annotation.left * scaleFactor,
top: annotation.top * scaleFactor,
});
newFabric.add(annotation);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello All,
i'm having some issues when the canvas width and height changes, i want the items to be in there same position..
i' using the latest version of fabricjs and using pdfjs library with it..
here's the code i'm using to try to fix it, but not working unfortunately:
here's the live webapp i made: https://khaledmndev.github.io/testProject/peditor/web/ (wait for the pdf file to load please)..
try adding an drawing on the book and click on the zoom in and out and see how the canvas items position is changing
Beta Was this translation helpful? Give feedback.
All reactions