vektron
/
websocket-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Send paths to server

This commit is contained in:
Robin Steinberg 2021-08-24 22:26:23 +02:00
parent ee17944737
commit 67ce474070
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ts/app.ts
View File

@ -2,6 +2,7 @@ class CanvasController {
private canvas: HTMLCanvasElement; private canvas: HTMLCanvasElement;
private canvasDiv: HTMLDivElement; private canvasDiv: HTMLDivElement;
private ctx: CanvasRenderingContext2D | null; private ctx: CanvasRenderingContext2D | null;
private ws: WebSocket;
private isMouseDown: boolean = false; private isMouseDown: boolean = false;
private x: number = 0; private x: number = 0;
@ -11,18 +12,21 @@ class CanvasController {
private currentPath: Coordinates[] = []; private currentPath: Coordinates[] = [];
constructor() { constructor() {
this.canvas = document.createElement("canvas"); this.canvas = document.createElement('canvas');
this.canvasDiv = document.querySelector("#canvas") as HTMLDivElement; this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
this.canvasDiv.appendChild(this.canvas); this.canvasDiv.appendChild(this.canvas);
this.canvas.width = this.canvas.offsetWidth; this.canvas.width = this.canvas.offsetWidth;
this.canvas.height = this.canvas.offsetHeight; this.canvas.height = this.canvas.offsetHeight;
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext('2d');
// Events // Events
this.canvasDiv.addEventListener("mousedown", e => this.onMouseDown(e)); this.canvasDiv.addEventListener('mousedown', e => this.onMouseDown(e));
this.canvasDiv.addEventListener("mouseup", () => this.onMouseUp()); this.canvasDiv.addEventListener('mouseup', () => this.onMouseUp());
this.canvasDiv.addEventListener("mousemove", e => this.onMouseMove(e)); this.canvasDiv.addEventListener('mousemove', e => this.onMouseMove(e));
this.ws = new WebSocket('ws://localhost:8081', 'json');
this.ws.onopen = () => this.ws.send("SENDER");
} }
onMouseDown(event: MouseEvent) { onMouseDown(event: MouseEvent) {
@ -36,6 +40,7 @@ class CanvasController {
this.isMouseDown = false; this.isMouseDown = false;
this.ctx?.closePath(); this.ctx?.closePath();
this.paths.push(this.currentPath); this.paths.push(this.currentPath);
this.sendPath();
} }
onMouseMove(event: MouseEvent) { onMouseMove(event: MouseEvent) {
@ -54,6 +59,10 @@ class CanvasController {
this.x = event.clientX; this.x = event.clientX;
this.y = event.clientY; this.y = event.clientY;
} }
sendPath() {
this.ws.send(JSON.stringify(this.currentPath));
}
} }