Skip to content
GitLab
Commit 0f8536d7 authored by bbaer's avatar bbaer
Browse files

starting to integrate image editor.

parent da4ec6ab
Hide whitespace changes
Inline Side-by-side
javascript/src/Plugins/qfq.fabric.js
View file @ 0f8536d7
......@@ -19,9 +19,11 @@ $(function (n) {
n.Fabric = function() {
this.parentElement = {};
this.rotation = 0;
this.imageToEdit = 0;
this.controlElement = {};
this.emojiContainer = {};
this.eventEmitter = new EventEmitter();
this.QfqForm = n.QfqForm;
this.textContainer = {};
this.userTextInput = {};
this.outputField = {};
......@@ -240,7 +242,6 @@ $(function (n) {
})
};
fabric.Object.prototype.transparentCorners = false;
};
......@@ -249,6 +250,7 @@ $(function (n) {
var jsonEmojis = $fabricElement.data('emojis');
var inputField = $fabricElement.data('control-name');
var viewOnly = $fabricElement.data('view-only') || false;
var editImage = $fabricElement.data('edit-image') || false;
this.parentElement = $fabricElement;
this.backgroundImage = $fabricElement.data('background-image') || false;
this.fabricJSON = $fabricElement.data('fabric-json') || false;
......@@ -256,6 +258,9 @@ $(function (n) {
if (viewOnly) {
this.getMeta(this.backgroundImage, function(width, height) { that.prepareStaticCanvas(width, height); } );
} else if (editImage) {
this.getMeta(this.backgroundImage, function(width, height) { that.prepareImageEditor(width, height);});
this.modeSettings.initialize(this, jsonButtons);
} else {
this.outputField = $("#" + inputField);
this.modeSettings.initialize(this, jsonButtons);
......@@ -273,6 +278,48 @@ $(function (n) {
}
};
n.Fabric.prototype.prepareImageEditor = function(width, height) {
var ratio = height / width;
var canvas = document.createElement('canvas');
var that = this;
var controlElement = $('<div>', {
id: 'qfq-fabric-control'
});
canvas.width = this.parentElement.innerWidth();
canvas.height = canvas.width * ratio;
this.parentElement.append(canvas);
this.canvas = this.__canvas = new fabric.Canvas(canvas, {
isDrawingMode: false,
stateful: true,
enableRetinaScaling: true
});
this.controlElement = controlElement;
fabric.Image.fromURL(this.backgroundImage, function(oImg) {
oImg.set({
width: canvas.width,
height: canvas.height,
originX: 'left',
originY: 'top',
selectable: false,
evented: false,
lockMovementY: true,
lockMovementX: true,
lockRotation: true,
lockScalingX: true,
lockScalingY : true,
lockUniScaling: true,
hasControls: false,
hasBorders: false,
centeredRotation: true
});
that.canvas.add(oImg);
that.canvas.centerObject(oImg);
that.canvas.renderAll();
this.imageToEdit = oImg;
})
};
n.Fabric.prototype.prepareStaticCanvas = function(width, height) {
console.log("prepareStaticCanvas");
this.generateStaticCanvas(width, height);
......@@ -799,46 +846,49 @@ $(function (n) {
};
n.Fabric.prototype.defaultKeyStrokeHandler = function(e) {
// Delete key
if (e.keyCode == 46) {
this.delete();
}
if (this.mouseInsideCanvas) {
// Delete key
if (e.keyCode == 46) {
this.delete();
}
// Numpad +
if (e.keyCode == 107) {
this.zoomCanvasToCenter(0.1);
}
// Numpad +
if (e.keyCode == 107) {
this.zoomCanvasToCenter(0.1);
}
// Numpad -
if (e.keyCode == 109) {
this.zoomCanvasToCenter(-0.1);
}
// Numpad -
if (e.keyCode == 109) {
this.zoomCanvasToCenter(-0.1);
}
// Up Arrow
if (e.keyCode == 38) {
this.panWithZoom(0, 10);
e.preventDefault();
}
// Up Arrow
if (e.keyCode == 38) {
this.panWithZoom(0, 10);
e.preventDefault();
}
// Down Arrow
if (e.keyCode == 40) {
this.panWithZoom(0, -10);
e.preventDefault();
}
// Down Arrow
if (e.keyCode == 40) {
this.panWithZoom(0, -10);
e.preventDefault();
}
// Left Arrow
if (e.keyCode == 37) {
this.panWithZoom(-10, 0);
}
// Left Arrow
if (e.keyCode == 37) {
this.panWithZoom(-10, 0);
}
if (e.keyCode == 96) {
this.resetZoom();
}
// Numpad 0
if (e.keyCode == 96) {
this.resetZoom();
}
if (e.keyCode == 39) {
this.panWithZoom(10, 0);
// Right Arrow
if (e.keyCode == 39) {
this.panWithZoom(10, 0);
}
}
};
n.Fabric.prototype.defaultObjectHoverHandler = function(e) {
......
mockup/imageEditorFabric.html 0 → 100644
View file @ 0f8536d7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<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="../extension/Resources/Public/Css/qfq-bs.css">
<title>Input Mode Switcher</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="fabric" data-buttons="mockData/fabric.buttons.json" data-edit-image="true" data-background-image="mockData/Scan2a.jpeg"></div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/fabric.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script src="../javascript/src/Plugins/qfq.fabric.js"></script>
<script type="text/javascript">
$(function () {
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
});
QfqNS.Log.level = 0;
// Just for mockup, init() function called from new QfqNS.Plugin class maybe.
var qfqFabric = new QfqNS.Fabric();
qfqFabric.initialize($(".fabric"));
});
</script>
</body>
</html>
\ No newline at end of file
mockup/mockData/fabric.buttons.json
View file @ 0f8536d7
......@@ -87,7 +87,18 @@
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-trash"
}
},
{
"name": "rotateRight",
"selector": "turn-right",
"requiresDrawing": false,
"requiresSelection": false,
"isToggle": false,
"toggle": "",
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-repeat"
}
],
"currentMode": "draw",
"colors": [
......
mockup/staticFabric.html
View file @ 0f8536d7
......@@ -38,11 +38,7 @@
<div class="row">
<div class="col-md-4">
<div class="fabric" data-fabric-json="{&quot;objects&quot;:[{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:494.4,&quot;top&quot;:8.56,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:2.37,&quot;scaleY&quot;:2.37,&quot;angle&quot;:52.59,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f604.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:142,&quot;top&quot;:88,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f642.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:275,&quot;top&quot;:231,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f641.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:100,&quot;top&quot;:198,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60a.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:296,&quot;top&quot;:24,&quot;width&quot;:64,&quot;height&quot;:64,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60d.svg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]},{&quot;type&quot;:&quot;path&quot;,&quot;originX&quot;:&quot;center&quot;,&quot;originY&quot;:&quot;center&quot;,&quot;left&quot;:277.1074807371218,&quot;top&quot;:362.5,&quot;width&quot;:412.21,&quot;height&quot;:3,&quot;fill&quot;:null,&quot;stroke&quot;:&quot;rgba(0,204,255,0.4)&quot;,&quot;strokeWidth&quot;:14,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;round&quot;,&quot;strokeLineJoin&quot;:&quot;round&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;pathOffset&quot;:{&quot;x&quot;:277.1074807371218,&quot;y&quot;:362.5},&quot;path&quot;:[[&quot;M&quot;,482.5,364],[&quot;Q&quot;,482.5,364,483,364],[&quot;Q&quot;,483.5,364,478.75,364],[&quot;Q&quot;,474,364,471,364],[&quot;Q&quot;,468,364,458.5,363.5],[&quot;Q&quot;,449,363,442,363],[&quot;Q&quot;,435,363,430,363],[&quot;Q&quot;,425,363,422.5,363],[&quot;Q&quot;,420,363,415.5,363],[&quot;Q&quot;,411,363,409.5,363],[&quot;Q&quot;,408,363,404.5,363],[&quot;Q&quot;,401,363,399,363],[&quot;Q&quot;,397,363,390,362],[&quot;Q&quot;,383,361,379,361],[&quot;Q&quot;,375,361,372.5,361],[&quot;Q&quot;,370,361,366,361.5],[&quot;Q&quot;,362,362,360,362],[&quot;Q&quot;,358,362,354.5,362],[&quot;Q&quot;,351,362,346.5,362],[&quot;Q&quot;,342,362,340,362],[&quot;Q&quot;,338,362,331.5,362],[&quot;Q&quot;,325,362,322,362],[&quot;Q&quot;,319,362,316.5,362],[&quot;Q&quot;,314,362,311.5,362],[&quot;Q&quot;,309,362,308,362],[&quot;Q&quot;,307,362,303,362],[&quot;Q&quot;,299,362,291.5,362],[&quot;Q&quot;,284,362,275.5,362.5],[&quot;Q&quot;,267,363,260.5,363],[&quot;Q&quot;,254,363,233.5,363],[&quot;Q&quot;,213,363,204.5,363],[&quot;Q&quot;,196,363,191,363],[&quot;Q&quot;,186,363,183,363],[&quot;Q&quot;,180,363,172.5,363],[&quot;Q&quot;,165,363,162,363],[&quot;Q&quot;,159,363,156,363.5],[&quot;Q&quot;,153,364,148.5,364],[&quot;Q&quot;,144,364,142,364],[&quot;Q&quot;,140,364,139,364],[&quot;Q&quot;,138,364,135,363.5],[&quot;Q&quot;,132,363,131,363],[&quot;Q&quot;,130,363,127,363],[&quot;Q&quot;,124,363,117,362.5],[&quot;Q&quot;,110,362,106.5,362],[&quot;Q&quot;,103,362,100.5,362],[&quot;Q&quot;,98,362,97,362],[&quot;Q&quot;,96,362,84,363],[&quot;Q&quot;,72,364,72,363.5],[&quot;Q&quot;,72,363,71.5,363],[&quot;L&quot;,71,363]]}],&quot;backgroundImage&quot;:{&quot;type&quot;:&quot;image&quot;,&quot;originX&quot;:&quot;left&quot;,&quot;originY&quot;:&quot;top&quot;,&quot;left&quot;:0,&quot;top&quot;:0,&quot;width&quot;:609,&quot;height&quot;:788,&quot;fill&quot;:&quot;rgb(0,0,0)&quot;,&quot;stroke&quot;:null,&quot;strokeWidth&quot;:0,&quot;strokeDashArray&quot;:null,&quot;strokeLineCap&quot;:&quot;butt&quot;,&quot;strokeLineJoin&quot;:&quot;miter&quot;,&quot;strokeMiterLimit&quot;:10,&quot;scaleX&quot;:1,&quot;scaleY&quot;:1,&quot;angle&quot;:0,&quot;flipX&quot;:false,&quot;flipY&quot;:false,&quot;opacity&quot;:1,&quot;shadow&quot;:null,&quot;visible&quot;:true,&quot;clipTo&quot;:null,&quot;backgroundColor&quot;:&quot;&quot;,&quot;fillRule&quot;:&quot;nonzero&quot;,&quot;globalCompositeOperation&quot;:&quot;source-over&quot;,&quot;transformMatrix&quot;:null,&quot;skewX&quot;:0,&quot;skewY&quot;:0,&quot;crossOrigin&quot;:&quot;&quot;,&quot;alignX&quot;:&quot;none&quot;,&quot;alignY&quot;:&quot;none&quot;,&quot;meetOrSlice&quot;:&quot;meet&quot;,&quot;src&quot;:&quot;http://localhost:63342/qfq/mockup/mockData/Scan2a.jpeg&quot;,&quot;filters&quot;:[],&quot;resizeFilters&quot;:[]}}" data-view-only="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