Commit 936044d1 authored by bbaer's avatar bbaer
Browse files

New features:

Text boxes,
Intiuitive Rectangle Handling
Colors
Panning the image
parent 888f698e
......@@ -3,11 +3,23 @@
*/
$(function () {
var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true, stateful: true });
var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true, stateful: true, enableRetinaScaling: true });
var imageURL = "../mockup/mockData/Scan2a.jpeg";
var saveOne = false;
var saveTwo = false;
var saveThree = false;
var bgColor = '#fff';
var bgOpacity = 1;
var fgColor = '#000';
var borderColor = '#000';
var textSize = 16;
var addPositionLeft = 20;
var addPositionTop = 20;
var panning = false;
var moveMode = false;
var drawRectangleMode = false;
var isDown, origX, origY;
fabric.Object.prototype.transparentCorners = false;
canvas.on('after:render', function(){ this.calcOffset(); });
......@@ -18,20 +30,150 @@ $(function () {
width: canvas.width,
height: canvas.height,
originX: 'left',
originY: 'top'
originY: 'top',
lockUniScaling: true,
centeredScaling: true
});
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});
}
function deactivateToggles() {
deactivateDrawing();
deactivateMove();
}
function deactivateDrawing() {
canvas.isDrawingMode = false;
canvas.renderAll();
$("#drawing-mode").removeClass("btn-primary");
$("#drawing-mode").addClass("btn-default");
console.log(JSON.stringify(canvas));
}
function deactivateMove() {
moveMode = false;
canvas.renderAll();
$("#move-mode").removeClass("btn-primary");
$("#move-mode").addClass("btn-default");
}
function deactivatePanning() {
panning = false;
}
function deactivateRectangleDrawing() {
drawRectangleMode = false;
isDown = false;
var rect = canvas.getActiveObject();
rect.hasControls = true;
canvas.setActiveObject(rect);
canvas.renderAll();
}
function adjustDefaultPosition() {
addPositionLeft += 20;
addPositionTop += 20;
}
function panImage(e) {
if (panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
}
}
function deleteActiveGroup() {
if (canvas.getActiveGroup()) {
canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
canvas.discardActiveGroup().renderAll();
} else {
canvas.remove(canvas.getActiveObject());
}
}
function freeDrawRectangleStart(o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
pointer = canvas.getPointer(o.e);
var rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x-origX,
height: pointer.y-origY,
angle: 0,
fill: 'rgba(255,0,0,0.5)',
selectable: true,
hasControls: false
});
canvas.add(rect);
canvas.setActiveObject(rect);
}
function resizeRectangle(o) {
if (!isDown) return;
var rect = canvas.getActiveObject();
var pointer = canvas.getPointer(o.e);
if(origX>pointer.x){
rect.set({ left: Math.abs(pointer.x) });
}
if(origY>pointer.y){
rect.set({ top: Math.abs(pointer.y) });
}
rect.set({ width: Math.abs(origX - pointer.x) });
rect.set({ height: Math.abs(origY - pointer.y) });
canvas.renderAll();
}
// Custom Mouse / Touch Events on Canvas
canvas.on('mouse:up', function (e) {
if (moveMode) {
deactivatePanning();
}
if (drawRectangleMode) {
deactivateRectangleDrawing();
}
});
canvas.on('mouse:out', function (e) {
if (moveMode) {
deactivatePanning();
}
});
canvas.on('mouse:down', function (e) {
if (moveMode) {
panning = true;
}
if (drawRectangleMode) {
freeDrawRectangleStart(e);
}
});
canvas.on('mouse:move', function(e) {
if (moveMode) {
panImage(e);
}
if (drawRectangleMode) {
resizeRectangle(e);
}
});
canvas.on('key:up', function(e) {
if(e.keyCode == 46) {
deleteActiveGroup();
}
});
setBackground(imageURL);
......@@ -40,12 +182,40 @@ $(function () {
setBackground(imageURL);
});
$("#text-bg-submit").on("click", function() {
deactivateToggles();
var userText = $("#text-user-value").val();
console.log(userText);
var text = new fabric.Text(userText, {
fontSize: textSize,
color: '#000',
left: 10,
top: 10
});
var rect = new fabric.Rect();
rect.set({
width: text.width + 20,
height: text.height + 20,
fill: bgColor,
opacity: bgOpacity
});
var group = new fabric.Group([rect, text], {
left: addPositionLeft,
top: addPositionTop
});
canvas.add(group);
canvas.setActiveGroup(group);
adjustDefaultPosition();
$("#text-user-value").val('');
});
$("#drawing-mode").on( "click", function() {
canvas.isDrawingMode = !canvas.isDrawingMode;
console.log("Button pressed");
if (canvas.isDrawingMode) {
$(this).removeClass("btn-default");
$(this).addClass("btn-primary");
deactivateMove();
}
else {
$(this).removeClass("btn-primary");
......@@ -53,12 +223,32 @@ $(function () {
}
});
$("#move-mode").on("click", function() {
canvas.selection = !canvas.selection;
if (!canvas.selection) {
$(this).removeClass("btn-default");
$(this).addClass("btn-primary");
deactivateDrawing();
moveMode = true;
}
else {
$(this).removeClass("btn-primary");
$(this).addClass("btn-default");
moveMode = false;
}
});
$("#add-text").on("click", function() {
var text = new fabric.IText('type your text here', { left: 100, top: 100, editable: true});
var text = new fabric.IText('type your text here', { fontSize: 20, left: 100, top: 100, editable: true});
canvas.add(text);
deactivateDrawing();
});
$("#add-rect").on("click", function() {
drawRectangleMode = true;
deactivateDrawing();
});
$("#save1").on("click", function() {
if (!saveOne) {
saveOne = canvas.toJSON();
......@@ -85,18 +275,30 @@ $(function () {
$("#export-svg").on("click", function() {
var svg = canvas.toSVG();
var png = canvas.toDataURL('png');
console.log(svg);
$("#target-svg").html(svg);
});
$('html').keyup(function(e) {
if(e.keyCode == 46) {
if (canvas.getActiveGroup()) {
canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
canvas.discardActiveGroup().renderAll();
} else {
canvas.remove(canvas.getActiveObject());
}
}
$("#target-svg").html(svg);
$("#target-png").attr("src", png);
});
$("#text-no-bg").on("click", function() {
bgOpacity = 0;
});
$("#text-yellow-bg").on("click", function() {
bgOpacity = 1;
bgColor = '#ffcc00'
});
$("#text-white-bg").on("click", function() {
bgOpacity = 1;
bgColor = '#fff'
});
$("#text-yellow-border").on("click", function() {
borderColor = '#2b2200';
bgOpacity = 1;
bgColor = "#ffcc00";
});
});
\ No newline at end of file
......@@ -158,6 +158,41 @@ i.@{spinner_class} {
padding-top: 7px;
}
// Fabric Plugin classes
.fabric-text {
width: 100%;
height: 80px;
}
#text-bg-submit {
background-color: #ccc;
height: 24px;
border: none;
}
.text-bg-toggle {
width: 24px;
height: 24px;
background-size: contain;
border: none;
}
#text-no-bg {
background-image: url("../icons/no_bg.png");
}
#text-white-bg {
background-image: url("../icons/white_bg.png");
}
#text-yellow-bg {
background-image: url("../icons/yellow_bg.png");
}
#text-yellow-border {
background-image: url("../icons/yellow_border.png");
}
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
display: block !important;
......
......@@ -9,7 +9,7 @@
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.bootstrap.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
<title>Input Mode Switcher</title>
......@@ -38,14 +38,32 @@
</div>
<div class="row">
<div class="col-md-4">
<canvas id="c" class="qfq-canvas" width="600" height="800" style="border: 1px solid;"></canvas>
</div>
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-primary" id="drawing-mode"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger" id="clear-canvas"><span class="glyphicon glyphicon-trash"></span></button>
<button class="btn btn-default" id="add-text"><span class="glyphicon glyphicon-text-height"></span></button>
<button class="btn btn-default" id="add-rect"><span class="glyphicon glyphicon-stop"></span></button>
<button class="btn btn-default" id="move-mode"><span class="glyphicon glyphicon-move"></span></button>
</div>
<div class="text-insert">
<textarea class="fabric-text" placeholder="Remember, be nice!" id="text-user-value"></textarea>
<div class="text-options">
<button type="button" class="text-bg-toggle" id="text-no-bg"></button>
<button type="button" class="text-bg-toggle" id="text-white-bg"></button>
<button type="button" class="text-bg-toggle" id="text-yellow-bg"></button>
<button type="button" class="text-bg-toggle" id="text-yellow-border"></button>
<button type="button" id="text-bg-submit">Add Text</button>
</div>
</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>
......@@ -57,6 +75,7 @@
</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>
......
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