Commit 4ac619c6 authored by bbaer's avatar bbaer
Browse files

Rotation now working with img and resizing. export missing.

parent e9deeae0
......@@ -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) {
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment