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

a button to repaint

Browse Source
This commit is contained in:
Blue 2018-11-19 17:09:43 +03:00
parent 6a11ebf440
commit 49cf653dba
6 changed files with 130 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
images/gear.svg Normal file
View File

@ -0,0 +1,41 @@
<?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">
<!-- Created using Karbon, part of Calligra: http://www.calligra.org/karbon -->
<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">
<defs>
<clipPath id="center">
<circle cx="50" cy="50" r="20"/>
</clipPath>
</defs>
<g id="group0" transform="rotate(10 50 50)" fill="none">
<path id="shape0" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
M 44 0 L 56 0
L 59.65 13.65
L 69.12 17.27
L 81.12 10.4 L 89.6 18.88
L 82.73 30.91
L 86.64 40.35
L 100 44 L 100 56
L 86.64 59.65
L 82.73 69.69
L 89.6 81.12 L 81.12 89.6
L 69.09 82.73
L 59.65 86.64
L 56 100 L 44 100
L 40.35 86.84
L 30.51 82.73
L 18.88 89.6 L 10.4 81.12
L 17.27 69.09
L 13.36 59.65
L 0 56 L 0 44
L 13.36 40.35
L 17.27 30.91
L 10.4 18.88 L 18.88 10.4
L 30.91 17.27
L 40.35 13.65z
M 50 30
A 20 20 0 1 0 70 50
A 20 20 0 0 0 50 30z
"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

17
images/paint.svg Normal file
View File

@ -0,0 +1,17 @@
<?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">
<!-- Created using Karbon, part of Calligra: http://www.calligra.org/karbon -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
<defs/>
<g id="layer0">
<path id="shape0" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
M 0 100 L 0 70 L 30 100 z
"/>
<path id="shape1" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
M 70 0 L 100 30 L 90 40 L 60 10 z
"/>
<path id="shape2" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
M 55 15 L 5 65 L 35 95 L 85 45 z
"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 835 B

30
main.js
View File

@ -1,21 +1,33 @@
import factory from "./painting/factory.js";
import Canvas from "./painting/canvas.js";
import Shape from "./painting/shape.js";
import Button from "./ui/button.js";
document.body.innerHTML = "";
Shape.setBounding(window.innerWidth, window.innerHeight);
let canvas = new Canvas(window.innerWidth, window.innerHeight);
let repaint = new Button("paint");
repaint.addHandler(canvas.clear.bind(canvas));
repaint.addHandler(paint);
repaint.setPosition(50, 50);
window.addEventListener("resize", onWindowResize, false);
document.body.appendChild(canvas.element);
document.body.appendChild(repaint.element);
let amount = Math.floor(Math.random() * 100 + 50);
for (let i = 0; i < amount; ++i) {
let shape = factory.createRandomShape();
canvas.draw(shape);
}
window.addEventListener("resize", function(e) {
function onWindowResize(e) {
Shape.setBounding(window.innerWidth, window.innerHeight);
canvas.resize(window.innerWidth, window.innerHeight);
}, false);
}
function paint() {
let amount = Math.floor(Math.random() * 100 + 50);
for (let i = 0; i < amount; ++i) {
let shape = factory.createRandomShape();
canvas.draw(shape);
}
}

8
painting/canvas.js
View File

@ -6,6 +6,12 @@ class Canvas {
this.element.width = width;
this.element.height = height;
this._ctx = this.element.getContext("2d");
this._width = width;
this._height = height;
}
clear() {
this.resetStyle();
this._ctx.clearRect(0, 0, this._width, this._height);
}
setFillColor(color) {
this._ctx.fillStyle = color.rgba();
@ -21,6 +27,8 @@ class Canvas {
resize(width, height) {
this.element.width = width;
this.element.height = height;
this._width = width;
this._height = height;
}
}

12
style.css
View File

@ -1,4 +1,16 @@
body {
margin: 0;
overflow: hidden;
}
button {
overflow: hidden;
background-color: aqua;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

31
ui/button.js Normal file
View File

@ -0,0 +1,31 @@
class Button {
constructor(image) {
this.element = document.createElement("button");
this.element.style.backgroundImage = "url(images/" + image + ".svg)";
this._boundClick = this._onClick.bind(this);
this.element.addEventListener("click", this._boundClick, false);
this._handlers = [];
}
destructor() {
this.element.removeEventListener("click", this._boundClick);
delete this._boundClick;
delete this._handlers;
delete this.element;
}
addHandler(handler) {
this._handlers.push(handler);
}
setPosition(x, y) {
this.element.style.position = "absolute";
this.element.style.top = y + "px";
this.element.style.left = x + "px";
}
_onClick(e) {
for (let i = 0; i < this._handlers.length; ++i) {
this._handlers[i](e);
}
}
}
export default Button;