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