Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
0f8536d7
Commit
0f8536d7
authored
Jan 05, 2018
by
bbaer
Browse files
starting to integrate image editor.
parent
da4ec6ab
Changes
4
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=
"{"objects":[{"type":"image","originX":"left","originY":"top","left":494.4,"top":8.56,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":2.37,"scaleY":2.37,"angle":52.59,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f604.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":142,"top":88,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f642.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":275,"top":231,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f641.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":100,"top":198,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60a.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":296,"top":24,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60d.svg","filters":[],"resizeFilters":[]},{"type":"path","originX":"center","originY":"center","left":277.1074807371218,"top":362.5,"width":412.21,"height":3,"fill":null,"stroke":"rgba(0,204,255,0.4)","strokeWidth":14,"strokeDashArray":null,"strokeLineCap":"round","strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":277.1074807371218,"y":362.5},"path":[["M",482.5,364],["Q",482.5,364,483,364],["Q",483.5,364,478.75,364],["Q",474,364,471,364],["Q",468,364,458.5,363.5],["Q",449,363,442,363],["Q",435,363,430,363],["Q",425,363,422.5,363],["Q",420,363,415.5,363],["Q",411,363,409.5,363],["Q",408,363,404.5,363],["Q",401,363,399,363],["Q",397,363,390,362],["Q",383,361,379,361],["Q",375,361,372.5,361],["Q",370,361,366,361.5],["Q",362,362,360,362],["Q",358,362,354.5,362],["Q",351,362,346.5,362],["Q",342,362,340,362],["Q",338,362,331.5,362],["Q",325,362,322,362],["Q",319,362,316.5,362],["Q",314,362,311.5,362],["Q",309,362,308,362],["Q",307,362,303,362],["Q",299,362,291.5,362],["Q",284,362,275.5,362.5],["Q",267,363,260.5,363],["Q",254,363,233.5,363],["Q",213,363,204.5,363],["Q",196,363,191,363],["Q",186,363,183,363],["Q",180,363,172.5,363],["Q",165,363,162,363],["Q",159,363,156,363.5],["Q",153,364,148.5,364],["Q",144,364,142,364],["Q",140,364,139,364],["Q",138,364,135,363.5],["Q",132,363,131,363],["Q",130,363,127,363],["Q",124,363,117,362.5],["Q",110,362,106.5,362],["Q",103,362,100.5,362],["Q",98,362,97,362],["Q",96,362,84,363],["Q",72,364,72,363.5],["Q",72,363,71.5,363],["L",71,363]]}],"backgroundImage":{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":609,"height":788,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/mockup/mockData/Scan2a.jpeg","filters":[],"resizeFilters":[]}}"
data-view-only=
"true"
data-background-image=
"mockData/Scan2a.jpeg"
></div>
</div>
</div>
</div>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment