From 4ac619c60e64fd8ff4864348bcf2a210eae18464 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Fri, 5 Jan 2018 14:24:44 +0100
Subject: [PATCH] Rotation now working with img and resizing. export missing.
---
javascript/src/Plugins/qfq.fabric.js | 43 +++++++++++++++++++++-------
mockup/imageEditorFabric.html | 6 +++-
2 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index dd2a827e9..90fc9b7f3 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -284,7 +284,8 @@ $(function (n) {
this.canvas = this.__canvas = new fabric.Canvas(canvas, {
isDrawingMode: false,
stateful: true,
- enableRetinaScaling: true
+ enableRetinaScaling: true,
+ backgroundColor: "#1c222b"
});
fabric.Image.fromURL(this.backgroundImage, function(oImg) {
@@ -297,7 +298,6 @@ $(function (n) {
evented: false,
lockMovementY: true,
lockMovementX: true,
- lockRotation: true,
lockScalingX: true,
lockScalingY : true,
lockUniScaling: true,
@@ -309,7 +309,7 @@ $(function (n) {
that.canvas.centerObject(oImg);
that.canvas.renderAll();
this.imageToEdit = oImg;
- })
+ });
};
n.Fabric.prototype.prepareStaticCanvas = function(width, height) {
@@ -747,21 +747,42 @@ $(function (n) {
this.delete();
break;
case "rotateRight":
- this.rotateCanvas(90);
+ this.rotateImage(90);
break;
default:
console.error("unrecognized mode");
}
};
- n.Fabric.prototype.rotateCanvas = function(degrees) {
- var newHeight = this.canvas.getWidth();
- var newWidth = this.canvas.getHeight();
+ n.Fabric.prototype.rotateImage = function(degrees) {
+ var img = this.canvas.item(0);
+ console.log("img width before Rotate: " + img.width);
this.setRotation(this.rotation + degrees);
- this.canvas.setHeight(newHeight);
- this.canvas.setWidth(newWidth);
- this.canvas.backgroundImage.rotate(this.rotation);
- this.canvas.resizeCanvas();
+ console.log("img width: " + img.width);
+ img.rotate(this.rotation);
+ this.canvas.renderAll();
+ if (this.rotation == 90 || this.rotation == 270) {
+ if (img.width > this.canvas.height) {
+ img.height = this.canvas.height * img.height / img.width;
+ img.width = this.canvas.height;
+ }
+ if (img.height > this.canvas.width) {
+ img.width = this.canvas.width * img.width / img.height;
+ img.height = this.canvas.width;
+ }
+ } else {
+ if (img.width < this.canvas.width) {
+ img.height = this.canvas.width * img.width / img.height;
+ img.width = this.canvas.width;
+ }
+ if (img.height < this.canvas.height) {
+ img.width = this.canvas.height * img.height / img.width;
+ img.height = this.canvas.height;
+ }
+ }
+ this.canvas.centerObject(img);
+ console.log("img width after Resize: " + img.width);
+ this.canvas.renderAll();
};
n.Fabric.prototype.setRotation = function(degrees) {
diff --git a/mockup/imageEditorFabric.html b/mockup/imageEditorFabric.html
index eaeabcfcf..801e2e398 100644
--- a/mockup/imageEditorFabric.html
+++ b/mockup/imageEditorFabric.html
@@ -38,7 +38,11 @@
<div class="row">
<div class="col-md-4">
- <div class="fabric" data-buttons="mockData/fabric.editor.buttons.json" data-edit-image="true" data-background-image="mockData/Scan2a.jpeg"></div>
+ <div class="fabric"
+ data-buttons="mockData/fabric.editor.buttons.json"
+ data-edit-image="true"
+ data-background-image="mockData/Scan2a.jpeg">
+ </div>
</div>
</div>
</div>
--
GitLab