55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
class Point {
|
|
x: number;
|
|
y: number;
|
|
constructor(x: number, y: number) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
}
|
|
class Stroke {
|
|
v1: Point;
|
|
v2: Point;
|
|
color: String;
|
|
}
|
|
function createStroke(ctx: CanvasRenderingContext2D, points: Array<Point>) {
|
|
ctx.moveTo(points[0].x, points[0].y);
|
|
for(var i = 1; i < points.length; i++) {
|
|
ctx.lineTo(points[i].x, points[i].y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
window.onload = () => {
|
|
var canvas = document.getElementById("draw-area") as HTMLCanvasElement;
|
|
if(!canvas.getContext) {
|
|
alert("HTML Canvas not supported! Application will not run");
|
|
throw new Error("HTML Canvas not supported!");
|
|
}
|
|
var ctx = canvas.getContext("2d");
|
|
var lastPoint: Point | null = null;
|
|
var points: Array<Point> = [];
|
|
var box = canvas.getBoundingClientRect();
|
|
var addPointsToArray = false;
|
|
canvas.addEventListener('mousemove', (ev: MouseEvent) => {
|
|
if(addPointsToArray) {
|
|
var point = new Point(ev.clientX - box.x, ev.clientY - box.y)
|
|
if(lastPoint != null) {
|
|
createStroke(ctx, [lastPoint, point]);
|
|
}
|
|
lastPoint = point;
|
|
points.push(point);
|
|
}
|
|
});
|
|
canvas.addEventListener('mousedown', (ev: MouseEvent) => {
|
|
addPointsToArray = true;
|
|
});
|
|
canvas.addEventListener('mouseup', (ev: MouseEvent) => {
|
|
addPointsToArray = false;
|
|
lastPoint = null;
|
|
console.log(points);
|
|
points = [];
|
|
});
|
|
};
|
|
|
|
|