Commit d65db5ce authored by bbaer's avatar bbaer
Browse files

changed from <img> fabric element to data-background-image for annotate

parent 697dd169
...@@ -34,10 +34,10 @@ $(function (n) { ...@@ -34,10 +34,10 @@ $(function (n) {
this.borderSize = 5; this.borderSize = 5;
this.textSize = 16; this.textSize = 16;
this.panning = false; this.panning = false;
this.userText = "";
this.moveMode = false; this.moveMode = false;
this.canvasOriginalHeight = 0; this.canvasOriginalHeight = 0;
this.isZoomMode = false; this.isZoomMode = false;
this.userText = "";
this.drawRectangleMode = false; this.drawRectangleMode = false;
this.drawTextBoxMode = false; this.drawTextBoxMode = false;
this.emojiMode = false; this.emojiMode = false;
...@@ -245,8 +245,6 @@ $(function (n) { ...@@ -245,8 +245,6 @@ $(function (n) {
}; };
n.Fabric.prototype.initialize = function($fabricElement) { n.Fabric.prototype.initialize = function($fabricElement) {
var jsonButtons = $fabricElement.data('buttons');
var jsonEmojis = $fabricElement.data('emojis');
var inputField = $fabricElement.data('control-name'); var inputField = $fabricElement.data('control-name');
var imageOutput = $fabricElement.data('image-output'); var imageOutput = $fabricElement.data('image-output');
var viewOnly = $fabricElement.data('view-only') || false; var viewOnly = $fabricElement.data('view-only') || false;
...@@ -267,18 +265,48 @@ $(function (n) { ...@@ -267,18 +265,48 @@ $(function (n) {
this.modeSettings.initialize(this, jsonButtons); this.modeSettings.initialize(this, jsonButtons);
} else { } else {
this.outputField = $("#" + inputField); this.outputField = $("#" + inputField);
this.modeSettings.initialize(this, jsonButtons); this.generateControls();
this.emojiHandler.initialize(this, jsonEmojis); this.getMeta(this.backgroundImage, function(width, height) { that.prepareCanvas(width, height);});
this.generateCanvas(); }
if (this.outputField.val()) { };
this.canvas.loadFromJSON(this.outputField.val());
} n.Fabric.prototype.generateControls = function () {
this.setBackground(); var jsonButtons = this.parentElement.data('buttons');
this.setBrush(); var jsonEmojis = this.parentElement.data('emojis');
setTimeout(function () { var emojiContainer = $('<div>', {
style: 'display: none;'
});
var textContainer = $('<div>', {
style: 'display: none;'
});
var textArea = $('<textarea>', {
class: 'fabric-text',
placeholder: 'Write a text and then draw a textbox over the image'
});
this.modeSettings.initialize(this, jsonButtons);
this.emojiHandler.initialize(this, jsonEmojis);
textContainer.append(textArea);
this.parentElement.append(this.controlElement);
this.parentElement.append(emojiContainer);
this.parentElement.append(textContainer);
this.emojiContainer = emojiContainer;
};
n.Fabric.prototype.prepareCanvas = function (width, height) {
var that = this;
this.generateCanvas(width, height);
if (this.outputField.val()) {
this.canvas.loadFromJSON(this.outputField.val(), function() {
that.setBackground();
that.setBrush();
that.canvas.renderAll(); that.canvas.renderAll();
that.userChangePossible = true; that.userChangePossible = true;
}, 1000); });
} else {
that.setBackground();
that.setBrush();
that.canvas.renderAll();
that.userChangePossible = true;
} }
}; };
...@@ -367,30 +395,14 @@ $(function (n) { ...@@ -367,30 +395,14 @@ $(function (n) {
this.canvas.renderAll(); this.canvas.renderAll();
}; };
n.Fabric.prototype.generateCanvas = function() { n.Fabric.prototype.generateCanvas = function(width, height) {
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
canvas.setAttribute('draggable', true); canvas.setAttribute('draggable', true);
var emojiContainer = $('<div>', {
style: 'display: none;'
});
var textContainer = $('<div>', {
style: 'display: none;'
});
var textArea = $('<textarea>', {
class: 'fabric-text',
placeholder: 'Write a text and then draw a textbox over the image'
});
var that = this; var that = this;
canvas.id = "c1"; canvas.id = "c1";
var $img = $(".qfq-fabric-image"); var ratio = height / width;
var ratio = $img.height() / $img.width();
canvas.width = this.parentElement.innerWidth(); canvas.width = this.parentElement.innerWidth();
canvas.height = canvas.width * ratio; canvas.height = canvas.width * ratio;
textContainer.append(textArea);
this.parentElement.append(this.controlElement);
this.parentElement.append(emojiContainer);
this.parentElement.append(textContainer);
this.emojiContainer = emojiContainer;
this.parentElement.append(canvas); this.parentElement.append(canvas);
this.canvas = this.__canvas = new fabric.Canvas(canvas, { this.canvas = this.__canvas = new fabric.Canvas(canvas, {
isDrawingMode: true, isDrawingMode: true,
...@@ -427,7 +439,7 @@ $(function (n) { ...@@ -427,7 +439,7 @@ $(function (n) {
}; };
n.Fabric.prototype.defaultMouseInEvent = function(e) { n.Fabric.prototype.defaultMouseInEvent = function(e) {
this.mouseInsideCanvas = true; this.mouseInsideCanvas = true;
}; };
n.Fabric.prototype.resizeCanvas = function () { n.Fabric.prototype.resizeCanvas = function () {
...@@ -505,20 +517,24 @@ $(function (n) { ...@@ -505,20 +517,24 @@ $(function (n) {
that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas)); that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
}); });
} else { } else {
console.log("mob new");
var $image = document.getElementsByClassName("qfq-fabric-image")[0]; var $image = document.getElementsByClassName("qfq-fabric-image")[0];
var img = new fabric.Image($image, { $image.onload = function() {
width: this.canvas.width, console.log("Image loaded");
height: this.canvas.height, var img = new fabric.Image(this, {
originX: 'left', width: that.canvas.width,
originY: 'top', height: that.canvas.height,
lockUniScaling: true, originX: 'left',
centeredScaling: true, originY: 'top',
centeredRotation: true lockUniScaling: true,
}); centeredScaling: true,
img.rotate(this.rotation); centeredRotation: true
img.onload = function() { that.canvas.renderAll(); }; });
this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas)); img.rotate(that.rotation);
this.canvas.renderAll(); that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
that.canvas.renderAll();
};
} }
}; };
......
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