Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
François Revol
wemawema
Commits
649ad5ae
Commit
649ad5ae
authored
Sep 29, 2017
by
Luc Didry
Browse files
Allow to work with SVG
parent
75854e03
Changes
3
Expand all
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
649ad5ae
...
...
@@ -114,10 +114,14 @@
</div>
<hr>
<div>
<a
class=
"button"
href=
"#"
id=
"toggle-svg"
>
Work with SVG
</a>
<a
class=
"button"
href=
"#"
id=
"download"
>
Download
</a>
<a
class=
"button hidden"
href=
"#"
id=
"download-svg"
>
Download
</a>
<a
class=
"button"
href=
"#"
id=
"reset"
>
Reset to default
</a>
<a
class=
"button"
href=
"#"
id=
"settings"
>
Show advanced settings
</a>
</div>
<div
id=
"svg"
class=
"hidden"
>
</div>
<canvas
id=
"canvas"
width=
"800"
height=
"400"
></canvas>
</div>
<footer
class=
"container"
>
...
...
@@ -127,6 +131,7 @@
Support the author on
<a
href=
"https://liberapay.com/sky/"
>
Liberapay
</a>
or
<a
href=
"https://www.tipeee.com/fiat-tux"
>
Tipeee
</a>
!
</p>
</footer>
<script
src=
"js/canvas2svg.js"
></script>
<script
src=
"js/wema_wema.js"
></script>
</body>
</html>
js/canvas2svg.js
0 → 100644
View file @
649ad5ae
This diff is collapsed.
Click to expand it.
js/wema_wema.js
View file @
649ad5ae
...
...
@@ -24,6 +24,9 @@ var domIsReady = (function(domIsReady) {
return
domIsReady
;
})(
domIsReady
||
{});
var
svg
=
new
C2S
(
800
,
400
);
(
function
(
document
,
window
,
domIsReady
,
undefined
)
{
domIsReady
(
function
()
{
// Trigger drawing
...
...
@@ -48,12 +51,37 @@ var domIsReady = (function(domIsReady) {
toggleBgSettings
();
});
// Toggle SVG/Canvas
document
.
querySelector
(
'
#toggle-svg
'
).
addEventListener
(
'
click
'
,
function
()
{
var
s
=
document
.
getElementById
(
'
svg
'
);
if
(
s
.
classList
.
contains
(
'
hidden
'
))
{
this
.
classList
.
add
(
'
button-primary
'
);
hide
(
'
canvas
'
);
hide
(
'
download
'
);
show
(
'
svg
'
);
show
(
'
download-svg
'
);
this
.
text
=
'
Work with canvas
'
;
}
else
{
this
.
classList
.
remove
(
'
button-primary
'
);
hide
(
'
svg
'
);
hide
(
'
download-svg
'
);
show
(
'
canvas
'
);
show
(
'
download
'
);
this
.
text
=
'
Work with SVG
'
;
}
});
// Download
document
.
querySelector
(
'
#download
'
).
addEventListener
(
'
click
'
,
function
()
{
var
f
=
document
.
getElementById
(
'
filename
'
);
this
.
download
=
f
.
value
;
this
.
href
=
document
.
getElementById
(
'
canvas
'
).
toDataURL
().
replace
(
"
image/png
"
,
"
image/octet-stream
"
);
});
document
.
querySelector
(
'
#download-svg
'
).
addEventListener
(
'
click
'
,
function
()
{
var
f
=
document
.
getElementById
(
'
filename
'
);
this
.
download
=
f
.
value
;
this
.
href
=
'
data:image/octet-stream;base64,
'
+
btoa
(
svg
.
getSerializedSvg
(
true
));
console
.
log
(
this
.
href
);
});
// Reset settings
document
.
querySelector
(
'
#reset
'
).
addEventListener
(
'
click
'
,
function
()
{
...
...
@@ -194,8 +222,14 @@ function refreshFilename() {
var
w
=
document
.
getElementById
(
'
wemake
'
);
var
p
=
document
.
getElementById
(
'
porn
'
);
var
f
=
document
.
getElementById
(
'
filename
'
);
var
s
=
document
.
getElementById
(
'
svg
'
);
var
ext
=
'
png
'
;
var
name
=
w
.
value
+
'
'
+
p
.
value
+
'
.png
'
;
if
(
!
s
.
classList
.
contains
(
'
hidden
'
))
{
ext
=
'
svg
'
;
}
var
name
=
w
.
value
+
'
'
+
p
.
value
+
'
.
'
+
ext
;
f
.
value
=
name
.
replace
(
/ /g
,
'
_
'
);
}
...
...
@@ -222,6 +256,7 @@ function refreshText() {
var
ctx
=
c
.
getContext
(
'
2d
'
);
ctx
.
clearRect
(
0
,
0
,
c
.
width
,
c
.
height
);
svg
.
clearRect
(
0
,
0
,
c
.
width
,
c
.
height
);
// update URL
var
url
=
new
URL
(
window
.
location
);
...
...
@@ -248,58 +283,88 @@ function refreshText() {
switch
(
bgt
.
value
)
{
case
'
plain
'
:
ctx
.
fillStyle
=
co
.
value
;
svg
.
fillStyle
=
co
.
value
;
break
;
case
'
gradient
'
:
var
grd
;
switch
(
or
.
value
)
{
case
'
lr
'
:
grd
=
ctx
.
createLinearGradient
(
0
,
200
,
c
.
width
,
200
);
grd
=
ctx
.
createLinearGradient
(
0
,
200
,
c
.
width
,
200
);
grd2
=
svg
.
createLinearGradient
(
0
,
200
,
c
.
width
,
200
);
break
;
case
'
rl
'
:
grd
=
ctx
.
createLinearGradient
(
c
.
width
,
200
,
0
,
200
);
grd
=
ctx
.
createLinearGradient
(
c
.
width
,
200
,
0
,
200
);
grd2
=
svg
.
createLinearGradient
(
c
.
width
,
200
,
0
,
200
);
break
;
case
'
tb
'
:
grd
=
ctx
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
grd
=
ctx
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
grd2
=
svg
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
break
;
case
'
bt
'
:
grd
=
ctx
.
createLinearGradient
(
400
,
c
.
height
,
400
,
0
);
grd
=
ctx
.
createLinearGradient
(
400
,
c
.
height
,
400
,
0
);
grd2
=
svg
.
createLinearGradient
(
400
,
c
.
height
,
400
,
0
);
break
;
case
'
r
'
:
grd
=
ctx
.
createRadialGradient
(
400
,
200
,
25
,
400
,
200
,
400
);
grd
=
ctx
.
createRadialGradient
(
400
,
200
,
25
,
400
,
200
,
400
);
grd2
=
svg
.
createRadialGradient
(
400
,
200
,
25
,
400
,
200
,
400
);
break
;
}
grd
.
addColorStop
(
0
,
bgr
.
value
);
grd
.
addColorStop
(
1
,
egr
.
value
);
grd2
.
addColorStop
(
0
,
bgr
.
value
);
grd2
.
addColorStop
(
1
,
egr
.
value
);
ctx
.
fillStyle
=
grd
;
svg
.
fillStyle
=
grd2
;
break
;
case
'
rainbow
'
:
var
grd
=
ctx
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
var
grd
=
ctx
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
var
grd2
=
svg
.
createLinearGradient
(
400
,
0
,
400
,
c
.
height
);
grd
.
addColorStop
(
0
,
'
#e50000
'
);
grd
.
addColorStop
(
1
/
5
,
'
#ff8d00
'
);
grd
.
addColorStop
(
2
/
5
,
'
#ffee00
'
);
grd
.
addColorStop
(
3
/
5
,
'
#008121
'
);
grd
.
addColorStop
(
4
/
5
,
'
#004cff
'
);
grd
.
addColorStop
(
1
,
'
#760188
'
);
grd2
.
addColorStop
(
0
,
'
#e50000
'
);
grd2
.
addColorStop
(
1
/
5
,
'
#ff8d00
'
);
grd2
.
addColorStop
(
2
/
5
,
'
#ffee00
'
);
grd2
.
addColorStop
(
3
/
5
,
'
#008121
'
);
grd2
.
addColorStop
(
4
/
5
,
'
#004cff
'
);
grd2
.
addColorStop
(
1
,
'
#760188
'
);
ctx
.
fillStyle
=
grd
;
svg
.
fillStyle
=
grd2
;
break
;
}
roundRect
(
ctx
,
0
,
0
,
c
.
width
,
c
.
height
,
parseInt
(
cor
.
value
),
true
,
false
);
roundRect
(
svg
,
0
,
0
,
c
.
width
,
c
.
height
,
parseInt
(
cor
.
value
),
true
,
false
);
// Inside rounded rectangle
ctx
.
lineWidth
=
20
;
svg
.
lineWidth
=
20
;
ctx
.
strokeStyle
=
rc
.
value
;
svg
.
strokeStyle
=
rc
.
value
;
roundRect
(
ctx
,
25
,
25
,
750
,
350
,
20
,
false
);
roundRect
(
svg
,
25
,
25
,
750
,
350
,
20
,
false
);
ctx
.
textAlign
=
"
center
"
;
svg
.
textAlign
=
"
center
"
;
// Write WE MAKE
ctx
.
font
=
'
bold
'
+
parseInt
(
ws
.
value
)
+
'
px sans-serif
'
;
svg
.
font
=
'
bold
'
+
parseInt
(
ws
.
value
)
+
'
px sans-serif
'
;
ctx
.
fillStyle
=
wc
.
value
;
svg
.
fillStyle
=
wc
.
value
;
ctx
.
fillText
(
w
.
value
,
parseInt
(
wx
.
value
),
parseInt
(
wy
.
value
),
725
);
svg
.
fillText
(
w
.
value
,
parseInt
(
wx
.
value
),
parseInt
(
wy
.
value
),
725
);
// Write PORN
ctx
.
font
=
'
bold
'
+
parseInt
(
ps
.
value
)
+
'
px sans-serif
'
;
svg
.
font
=
'
bold
'
+
parseInt
(
ps
.
value
)
+
'
px sans-serif
'
;
ctx
.
fillStyle
=
pc
.
value
svg
.
fillStyle
=
pc
.
value
ctx
.
fillText
(
p
.
value
,
parseInt
(
px
.
value
),
parseInt
(
py
.
value
),
725
);
svg
.
fillText
(
p
.
value
,
parseInt
(
px
.
value
),
parseInt
(
py
.
value
),
725
);
document
.
getElementById
(
'
svg
'
).
innerHTML
=
svg
.
getSerializedSvg
();
}
function
roundRect
(
ctx
,
x
,
y
,
width
,
height
,
radius
,
fill
,
stroke
)
{
...
...
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