blue/fantasy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

an attempt to make a download button

Browse Source
This commit is contained in:
Blue 2018-11-20 18:10:46 +03:00
parent bd2ad29981
commit 1922e21664
3 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
images/download.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
<g id="group0" transform="scale(0.9), translate(5 5)" fill="none">
<path id="shape0" stroke="#ffffff" stroke-width="10" d="
M 0 75 L 0 100 L 100 100 L 100 75
"/>
<path id="shape1" stroke="#ffffff" fill="#ffffff" stroke-width="10" d="
M 20 60 L 50 100 L 80 60 z
"/>
<rect id="shape2" stroke="#ffffff" fill="#ffffff" stroke-width="10" x="40" y="0" width="20" height="60"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 693 B

22
main.js
View File

@ -31,6 +31,9 @@ settings.addHandler(panel.toggle.bind(panel));
let clear = new Button("blank"); let clear = new Button("blank");
clear.addHandler(canvas.clear.bind(canvas)); clear.addHandler(canvas.clear.bind(canvas));
let downloadButton = new Button("download");
download.addHandler(download);
window.addEventListener("resize", onWindowResize, false); window.addEventListener("resize", onWindowResize, false);
let form = new Form(panelWidth, panelHeight - panelPaddingTop); let form = new Form(panelWidth, panelHeight - panelPaddingTop);
@ -59,6 +62,7 @@ document.body.appendChild(panel.element);
document.body.appendChild(paintButton.element); document.body.appendChild(paintButton.element);
document.body.appendChild(settings.element); document.body.appendChild(settings.element);
document.body.appendChild(clear.element); document.body.appendChild(clear.element);
document.body.appendChild(downloadButton.element);
adjustButtons(panelWidth); adjustButtons(panelWidth);
paint(); paint();
@ -94,7 +98,19 @@ function paint() {
} }
function adjustButtons(width) { function adjustButtons(width) {
paintButton.setPosition(width / 4 - Button.width + 10, 25); let hc = width / 8;
settings.setPosition(width / 2 - Button.width / 2 + 10, 25); let c = width / 4;
clear.setPosition(width * 0.75 + 10, 25); let ws = -Button.width / 2 + 10;
paintButton.setPosition(hc + ws, 25);
settings.setPosition(c + hc + ws, 25);
clear.setPosition(2 * c + hc + ws, 25);
downloadButton.setPosition(3 * c + hc + ws, 25);
}
function download() {
let data = canvas.getData();
let prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;
} }

3
ui/canvas.js
View File

@ -19,6 +19,9 @@ class Canvas extends UI {
this._ctx.fillStyle = ""; this._ctx.fillStyle = "";
this._ctx.filter = "blur(" + this._blurStrength + "px)"; this._ctx.filter = "blur(" + this._blurStrength + "px)";
} }
getData() {
this.element.toDataURL();
}
draw(shape) { draw(shape) {
this._ctx.fillStyle = shape.color.rgba(); this._ctx.fillStyle = shape.color.rgba();
shape.draw(this._ctx); shape.draw(this._ctx);