mae/tempera-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added color

Browse source
This commit is contained in:
Lilly Rosaline 2022-07-13 04:13:59 -05:00
parent 24506e4567
commit c5991790af
2 changed files with 47 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app.js
View file

@ -1,19 +1,37 @@
var Point = /** @class */ (function () { var Point = /** @class */ (function () {
function Point(x, y) { function Point(x, y, style) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.style = style;
} }
return Point; return Point;
}()); }());
function createStroke(ctx, points) { var Stroke = /** @class */ (function () {
ctx.moveTo(points[0].x, points[0].y); function Stroke(vertices) {
for (var i = 1; i < points.length; i++) { this.vertices = vertices;
ctx.lineTo(points[i].x, points[i].y);
} }
ctx.stroke(); Stroke.prototype.draw = function (ctx) {
var path = new Path2D();
path.moveTo(this.vertices[0].x, this.vertices[0].y);
for (var i = 1; i < this.vertices.length; i++) {
ctx.strokeStyle = this.vertices[i].style;
path.lineTo(this.vertices[i].x, this.vertices[i].y);
ctx.stroke(path);
} }
};
return Stroke;
}());
var CanvasState = /** @class */ (function () {
function CanvasState() {
}
return CanvasState;
}());
window.onload = function () { window.onload = function () {
var canvas = document.getElementById("draw-area"); var canvas = document.getElementById("draw-area");
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 ctx = canvas.getContext("2d");
var lastPoint = null; var lastPoint = null;
var points = []; var points = [];
@ -21,9 +39,9 @@ window.onload = function () {
var addPointsToArray = false; var addPointsToArray = false;
canvas.addEventListener('mousemove', function (ev) { canvas.addEventListener('mousemove', function (ev) {
if (addPointsToArray) { if (addPointsToArray) {
var point = new Point(ev.clientX - box.x, ev.clientY - box.y); var point = new Point(ev.clientX - box.x, ev.clientY - box.y, "rgb(".concat(Math.round(Math.random() * 255), ",").concat(Math.round(Math.random() * 255), ",").concat(Math.round(Math.random() * 255), ")"));
if (lastPoint != null) { if (lastPoint != null) {
createStroke(ctx, [lastPoint, point]); new Stroke([lastPoint, point]).draw(ctx);
} }
lastPoint = point; lastPoint = point;
points.push(point); points.push(point);
@ -35,7 +53,6 @@ window.onload = function () {
canvas.addEventListener('mouseup', function (ev) { canvas.addEventListener('mouseup', function (ev) {
addPointsToArray = false; addPointsToArray = false;
lastPoint = null; lastPoint = null;
console.log(points);
points = []; points = [];
}); });
}; };

35
app.ts
View file

@ -1,24 +1,32 @@
class Point { class Point {
x: number; x: number;
y: number; y: number;
constructor(x: number, y: number) { style: string;
constructor(x: number, y: number, style: string) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.style = style;
} }
} }
class Stroke { class Stroke {
v1: Point; vertices: Array<Point>;
v2: Point; constructor(vertices: Array<Point>) {
color: String; this.vertices = vertices;
} }
function createStroke(ctx: CanvasRenderingContext2D, points: Array<Point>) { draw(ctx: CanvasRenderingContext2D) {
ctx.moveTo(points[0].x, points[0].y); var path = new Path2D();
for(var i = 1; i < points.length; i++) { path.moveTo(this.vertices[0].x, this.vertices[0].y);
ctx.lineTo(points[i].x, points[i].y); for(var i = 1; i < this.vertices.length; i++) {
} ctx.strokeStyle = this.vertices[i].style;
ctx.stroke(); path.lineTo(this.vertices[i].x, this.vertices[i].y);
ctx.stroke(path);
} }
}
}
class CanvasState {
}
window.onload = () => { window.onload = () => {
var canvas = document.getElementById("draw-area") as HTMLCanvasElement; var canvas = document.getElementById("draw-area") as HTMLCanvasElement;
if(!canvas.getContext) { if(!canvas.getContext) {
@ -32,9 +40,9 @@ window.onload = () => {
var addPointsToArray = false; var addPointsToArray = false;
canvas.addEventListener('mousemove', (ev: MouseEvent) => { canvas.addEventListener('mousemove', (ev: MouseEvent) => {
if(addPointsToArray) { if(addPointsToArray) {
var point = new Point(ev.clientX - box.x, ev.clientY - box.y) var point = new Point(ev.clientX - box.x, ev.clientY - box.y, `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`)
if(lastPoint != null) { if(lastPoint != null) {
createStroke(ctx, [lastPoint, point]); new Stroke([lastPoint, point]).draw(ctx);
} }
lastPoint = point; lastPoint = point;
points.push(point); points.push(point);
@ -46,9 +54,6 @@ window.onload = () => {
canvas.addEventListener('mouseup', (ev: MouseEvent) => { canvas.addEventListener('mouseup', (ev: MouseEvent) => {
addPointsToArray = false; addPointsToArray = false;
lastPoint = null; lastPoint = null;
console.log(points);
points = []; points = [];
}); });
}; };