maggicl/SA3
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

HW3 done

Browse source
This commit is contained in:
Claudio Maggioni 2019-10-07 12:17:28 +02:00
parent e27b27e935
commit a1288af118
3 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
hw3/Claudio_Maggioni/scripts/app.js
View file

@ -38,7 +38,6 @@ class App {
if (this.buttons.camera) if (this.buttons.camera)
this.buttons.camera.addEventListener('click', () => { this.buttons.camera.addEventListener('click', () => {
player.srcObject.getVideoTracks().forEach(track => track.stop());
const base64 = this.canvas.toDataURL(); const base64 = this.canvas.toDataURL();
const img = document.createElement('img'); const img = document.createElement('img');
img.src = base64; img.src = base64;
@ -83,21 +82,24 @@ class App {
this.brush = "PenBrush"; this.brush = "PenBrush";
const brushToolbar = document.querySelector('#brush-toolbar'); const brushToolbar = document.querySelector('#brush-toolbar');
for (const name in App.BRUSHES) { if (brushToolbar) {
const b = document.createElement('button'); for (const name in App.BRUSHES) {
b.innerText = name; const b = document.createElement('button');
b.addEventListener('click', () => this.brush = name); b.innerText = name;
brushToolbar.appendChild(b); b.addEventListener('click', () => this.brush = name);
} brushToolbar.appendChild(b);
}
const label = document.createElement('label'); const label = document.createElement('label');
label.setAttribute('for', 'color'); label.setAttribute('for', 'color');
const color = document.createElement('input'); const color = document.createElement('input');
color.type = 'color'; color.type = 'color';
color.name = 'color'; color.name = 'color';
color.addEventListener('change', () => this.strokeStyle = color.value); color.value = this.constructor.defaultStrokeStyle;
brushToolbar.appendChild(label); color.addEventListener('change', () => this.strokeStyle = color.value);
brushToolbar.appendChild(color); brushToolbar.appendChild(label);
brushToolbar.appendChild(color);
}
this.canvas.addEventListener('mousedown', this.startPath.bind(this)); this.canvas.addEventListener('mousedown', this.startPath.bind(this));
this.canvas.addEventListener('mousemove', this.draw.bind(this)); this.canvas.addEventListener('mousemove', this.draw.bind(this));
@ -110,6 +112,9 @@ class App {
} }
get strokeStyle() { get strokeStyle() {
if (this.ctx.strokeStyle == '#000000') {
return 'black';
}
return this.ctx.strokeStyle; return this.ctx.strokeStyle;
} }

8
hw3/Claudio_Maggioni/scripts/undo.js
View file

@ -4,10 +4,9 @@ const history = {
paths: [] paths: []
} }
history.pop = (app) => { history.pop = () => {
if (history.paths.length == 0) return; if (history.paths.length == 0) return;
history.paths.pop(); return history.paths.pop();
app.redrawAll();
}; };
history.initializeNewPath = () => { history.initializeNewPath = () => {
@ -15,10 +14,11 @@ history.initializeNewPath = () => {
}; };
history.push = (stroke) => { history.push = (stroke) => {
if (!stroke instanceof Stroke) { if (!stroke || !stroke instanceof Stroke) {
throw new Error(JSON.stringify(stroke) + ' is not a Stroke instance'); throw new Error(JSON.stringify(stroke) + ' is not a Stroke instance');
} }
history.paths[history.paths.length - 1].push(stroke); history.paths[history.paths.length - 1].push(stroke);
return history.paths[history.paths.length - 1];
} }
history.clear = () => { history.clear = () => {

4
hw3/Claudio_Maggioni/style.css
View file

@ -117,13 +117,13 @@ body{
color: white; color: white;
} }
#favourites div.gallery { #favourites {
margin: 5px; margin: 5px;
float: left; float: left;
width: 200px; width: 200px;
} }
#favourites div.gallery img { #favourites img {
width: 90%; width: 90%;
height: 100px; height: 100px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.42); box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.42);