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

HW3 added touch

Browse source
This commit is contained in:
Claudio Maggioni 2019-10-08 09:14:27 +02:00
parent 721e982e2a
commit 15bb5f52e2
1 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,17 +26,22 @@ class App {
for (const b of ['clear', 'undo', 'camera']) for (const b of ['clear', 'undo', 'camera'])
this.buttons[b] = document.getElementById(conf.buttons[b]); this.buttons[b] = document.getElementById(conf.buttons[b]);
if (this.buttons.clear) if (this.buttons.clear) {
this.buttons.clear.addEventListener('click', () => { this.buttons.clear.addEventListener('click', () => {
this.erase(); this.erase();
this.background = null; this.background = null;
history.clear(); history.clear();
}); });
}
if (this.buttons.undo) if (this.buttons.undo) {
this.buttons.undo.addEventListener('click', () => history.pop(this)); this.buttons.undo.addEventListener('click', () => {
history.pop();
this.redrawAll();
});
}
if (this.buttons.camera) if (this.buttons.camera) {
this.buttons.camera.addEventListener('click', () => { this.buttons.camera.addEventListener('click', () => {
const base64 = this.canvas.toDataURL(); const base64 = this.canvas.toDataURL();
const img = document.createElement('img'); const img = document.createElement('img');
@ -47,6 +52,7 @@ class App {
this.favourites.appendChild(img); this.favourites.appendChild(img);
this.favourites.appendChild(span); this.favourites.appendChild(span);
}); });
}
const player = document.createElement('video'); const player = document.createElement('video');
player.addEventListener('loadeddata', () => { player.addEventListener('loadeddata', () => {
@ -102,8 +108,20 @@ class App {
brushToolbar.appendChild(color); brushToolbar.appendChild(color);
} }
const toMouse = (e, func) => {
if (e && e.touches && e.touches[0]) {
return func.bind(this)({
offsetX: e.touches[0].pageX - this.canvas.offsetLeft,
offsetY: e.touches[0].pageY - this.canvas.offsetTop
});
}
};
this.canvas.addEventListener('touchstart', e => toMouse(e, this.startPath));
this.canvas.addEventListener('mousedown', this.startPath.bind(this)); this.canvas.addEventListener('mousedown', this.startPath.bind(this));
this.canvas.addEventListener('touchmove', e => toMouse(e, this.draw));
this.canvas.addEventListener('mousemove', this.draw.bind(this)); this.canvas.addEventListener('mousemove', this.draw.bind(this));
this.canvas.addEventListener('touchcancel', e => toMouse(e, this.endPath));
this.canvas.addEventListener('mouseup', this.endPath.bind(this)); this.canvas.addEventListener('mouseup', this.endPath.bind(this));
this.canvas.addEventListener('mouseout', this.endPath.bind(this)); this.canvas.addEventListener('mouseout', this.endPath.bind(this));
} }
@ -148,11 +166,13 @@ class App {
e.offsetX, e.offsetY)); e.offsetX, e.offsetY));
} }
if (e instanceof MouseEvent) {
this.mousedown = true; this.mousedown = true;
} }
}
draw(e, beginNew = true, record = true) { draw(e, beginNew = true, record = true) {
if (this.mousedown) { if (this.mousedown || !(e instanceof MouseEvent)) {
this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY); this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY);
if (record) { if (record) {
@ -163,7 +183,7 @@ class App {
if (beginNew) { if (beginNew) {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(e.offsetX, e.offsetY); this.ctx.moveTo(e.offsetX, e.offsetY);
} else { } else if (e instanceof MouseEvent) {
this.mousedown = false; this.mousedown = false;
} }
} }