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
936044d1
Commit
936044d1
authored
Sep 07, 2017
by
bbaer
Browse files
New features:
Text boxes, Intiuitive Rectangle Handling Colors Panning the image
parent
888f698e
Changes
3
Hide whitespace changes
Inline
Side-by-side
javascript/src/Plugins/qfq.fabric.js
View file @
936044d1
...
...
@@ -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
less/qfq-bs.css.less
View file @
936044d1
...
...
@@ -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;
...
...
mockup/fabric.html
View file @
936044d1
...
...
@@ -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=
"../
c
ss/qfq-bs.css"
>
<link
rel=
"stylesheet"
href=
"../
extension/Resources/Public/C
ss/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>
...
...
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