Commit 937d9b25 authored by bbaer's avatar bbaer
Browse files

mockup finished

parent 1520e72e
......@@ -18,7 +18,7 @@ Concept
<HTML>
...
<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1"}, {"page":2, "selector": "#qfq..."}]}'>
<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1", "refId": "image.id"}, {"page":2, "selector": "#qfq..."}]}'>
...
</HTML>
......
......@@ -17,17 +17,10 @@ var QfqNS = QfqNS || {};
$(function (n) {
n.Fabric = function() {
var qFabric = this;
this.canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true,
stateful: true,
enableRetinaScaling: true
});
this.canvas.on('mouse:up', function (e) { qFabric.defaultMouseUpEvent(e) });
this.canvas.on('mouse:down', function (e) { qFabric.defaultMouseDownEvent(e) });
this.canvas.on('mouse:move', function (e) { qFabric.defaultMouseMoveEvent(e) });
this.canvas.on('mouse:out', function (e) { qFabric.defaultMouseOutEvent(e) });
this.canvas.on('after:render', function(){ this.calcOffset(); });
this.controlElement = {};
this.emojiContainer = {};
this.textContainer = {};
this.canvas = {};
this.activeColor = {red: 0, green: 68, blue: 255, opacity: 1};
this.brushSize = 2;
this.borderSize = 5;
......@@ -66,7 +59,7 @@ $(function (n) {
};
ModeSettings.prototype.setUpButtons = function() {
var $controlWrapper = $("#fabric-controls");
var $controlWrapper = this.qFabric.controlElement;
var $buttonGroup = $("<div>", {class: "btn-group"});
var that = this;
this.myModes.modes.forEach(function(o) {
......@@ -212,7 +205,7 @@ $(function (n) {
Emojis.prototype.buildList = function() {
var that = this;
var $container = $("#fabric-controls");
var $container = this.qFabric.emojiContainer;
var $emojiField = $("<div>");
$container.append($emojiField);
this.emojis.forEach(function (o) {
......@@ -235,10 +228,43 @@ $(function (n) {
n.Fabric.prototype.initialize = function(jsonImages, jsonButtons, jsonEmojis) {
this.modeSettings.initialize(this, jsonButtons);
this.emojiHandler.initialize(this, jsonEmojis);
this.generateCanvas();
this.setBackground(jsonImages);
this.setBrush();
};
n.Fabric.prototype.generateCanvas = function() {
var canvas = document.createElement('canvas');
var controlElement = $('<div>', {
id: 'qfq-fabric-control'
});
var emojiContainer = $('<div>', {
style: 'display: block;'
});
var that = this;
canvas.id = "c1";
canvas.width = $('#fabric').innerWidth();
canvas.height = canvas.width / 3 * 4;
$('#fabric').append(controlElement);
$('#fabric').append(emojiContainer);
this.controlElement = controlElement;
this.emojiContainer = emojiContainer;
$('#fabric').append(canvas);
this.canvas = this.__canvas = new fabric.Canvas(canvas, {
isDrawingMode: true,
stateful: true,
enableRetinaScaling: true
});
this.canvas.on('mouse:up', function (e) { that.defaultMouseUpEvent(e) });
this.canvas.on('mouse:down', function (e) { that.defaultMouseDownEvent(e) });
this.canvas.on('mouse:move', function (e) { that.defaultMouseMoveEvent(e) });
this.canvas.on('mouse:out', function (e) { that.defaultMouseOutEvent(e) });
this.canvas.on('after:render', function(){
this.calcOffset();
$('#fabric-output').val(that.canvas.toJSON());
});
};
n.Fabric.prototype.setBackground = function (imageSelector) {
var that = this;
/* Old code to load image From URL, stays here for reference
......@@ -262,7 +288,7 @@ $(function (n) {
originX: 'left',
originY: 'top',
lockUniScaling: true,
centeredScaling: true,
centeredScaling: true
});
this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
};
......@@ -275,8 +301,8 @@ $(function (n) {
var that = this;
fabric.Image.fromURL(uri, function(oImg) {
oImg.set({
left: 100,
top: 100,
left: 30,
top: 30,
height: 32,
width: 32
});
......
......@@ -43,12 +43,11 @@
<div class="col-md-4">
<div id="fabric" data-images='{"images": [{"page": 1, "selector": "qfq-fabric-image-1"}, {"page":2, "selector": "#qfq..."}]}'></div>
<input id="fabric-output" name="fabric-data" type="hidden">
<div id="fabric-controls">
</div>
<div class="text-insert" style="display:none;" id="user-text-control">
<textarea class="fabric-text" placeholder="Remember, be nice!" id="text-user-value"></textarea>
<div class="text-options">
......@@ -57,27 +56,6 @@
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div id="canvas-container">
<canvas id="c" class="qfq-canvas" width="600" height="800" style="border: 1px solid;"></canvas>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-default" id="save1">1</button>
<button class="btn btn-default" id="save2">2</button>
<button class="btn btn-default" id="save3">3</button>
</div>
<div class="form-group">
<button class="btn btn-default" id="export-svg"><span class="glyphicon glyphicon-camera"></span></button>
</div>
</div>
<div class="col-md-7">
<svg id="target-svg" width="600" height="800"></svg>
<img id="target-png" width="600" height="800"></img>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
......
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