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 () {
function Point(x, y) {
function Point(x, y, style) {
this.x = x;
this.y = y;
this.style = style;
}
return Point;
}());
function createStroke(ctx, points) {
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
var Stroke = /** @class */ (function () {
function Stroke(vertices) {
this.vertices = vertices;
}
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 () {
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 lastPoint = null;
var points = [];
@ -21,9 +39,9 @@ window.onload = function () {
var addPointsToArray = false;
canvas.addEventListener('mousemove', function (ev) {
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) {
createStroke(ctx, [lastPoint, point]);
new Stroke([lastPoint, point]).draw(ctx);
}
lastPoint = point;
points.push(point);
@ -35,7 +53,6 @@ window.onload = function () {
canvas.addEventListener('mouseup', function (ev) {
addPointsToArray = false;
lastPoint = null;
console.log(points);
points = [];
});
};

35
app.ts
View file

@ -1,24 +1,32 @@
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
style: string;
constructor(x: number, y: number, style: string) {
this.x = x;
this.y = y;
this.style = style;
}
}
class Stroke {
v1: Point;
v2: Point;
color: String;
vertices: Array<Point>;
constructor(vertices: Array<Point>) {
this.vertices = vertices;
}
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();
draw(ctx: CanvasRenderingContext2D) {
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);
}
}
}
class CanvasState {
}
window.onload = () => {
var canvas = document.getElementById("draw-area") as HTMLCanvasElement;
if(!canvas.getContext) {
@ -32,9 +40,9 @@ window.onload = () => {
var addPointsToArray = false;
canvas.addEventListener('mousemove', (ev: MouseEvent) => {
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) {
createStroke(ctx, [lastPoint, point]);
new Stroke([lastPoint, point]).draw(ctx);
}
lastPoint = point;
points.push(point);
@ -46,9 +54,6 @@ window.onload = () => {
canvas.addEventListener('mouseup', (ev: MouseEvent) => {
addPointsToArray = false;
lastPoint = null;
console.log(points);
points = [];
});
};