From d60631f621ce308554b118ceba1f2c37f05ec2fd Mon Sep 17 00:00:00 2001
From: Wellington Gabriel Vicente de Souza <wellingtongabrielvs@gmail.com>
Date: Sat, 31 Mar 2018 12:08:04 -0300
Subject: [PATCH] [T3] first commit: the two first parts are done
---
T3/canvas.css | 14 ++++
T3/lines.html | 15 ++++
T3/lines.js | 187 ++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 216 insertions(+)
create mode 100644 T3/canvas.css
create mode 100644 T3/lines.html
create mode 100644 T3/lines.js
diff --git a/T3/canvas.css b/T3/canvas.css
new file mode 100644
index 0000000..bf737a4
--- /dev/null
+++ b/T3/canvas.css
@@ -0,0 +1,14 @@
+* {
+ margin:0;
+ padding:0;
+}
+
+html, body {
+ width: 100%;
+}
+
+canvas {
+ display:block;
+ height: 100%;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/T3/lines.html b/T3/lines.html
new file mode 100644
index 0000000..b837a56
--- /dev/null
+++ b/T3/lines.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="canvas.css">
+ </head>
+ <body>
+ <canvas id="canvas">
+ Your browser does not support the HTML5 canvas tag.
+ </canvas>
+ <p>asdsadsa</p>
+ </body>
+
+ <script type="text/javascript" src="lines.js"></script>
+</html>
diff --git a/T3/lines.js b/T3/lines.js
new file mode 100644
index 0000000..8271b91
--- /dev/null
+++ b/T3/lines.js
@@ -0,0 +1,187 @@
+class Line {
+ constructor(x0,y0,xf,yf) {
+ this.x0 = x0;
+ this.y0 = y0;
+ this.xf = xf;
+ this.yf = yf;
+ this.width = Math.abs(xf - x0);
+ this.height = Math.abs(yf - y0);
+ this.centerX = x0 + this.width/2;
+ this.centerY = y0 + this.height/2;
+ }
+}
+
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var width = window.innerWidth;
+var height = window.innerHeight;
+var centerX = width / 2;
+var centerY = height / 2;
+
+var mouseX = 0;
+var mouseY = 0;
+var mouseDown = 0;
+var rightClick = 0;
+
+var lines = [];
+lines[0] = new Line(centerX-200,centerY,centerX+200,centerY);
+
+canvas.width = width;
+canvas.height = height;
+
+//event listeners
+window.addEventListener('resize', resizeCanvas, false);
+window.addEventListener('mousedown', handleMouseDown, false);
+window.addEventListener('mouseup', handleMouseUp, false);
+document.addEventListener("contextmenu", function(e){
+ e.preventDefault();
+}, false);
+onmousemove = function(e){
+ mouseX = e.clientX;
+ mouseY = e.clientY;
+}
+
+//event handlers
+function resizeCanvas() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ width = window.innerWidth;
+ height = window.innerHeight;
+ centerX = width / 2;
+ centerY = height / 2;
+ drawCurrentCanvas();
+}
+
+function handleMouseDown(e) {
+ rightClick = e.button == 2?1:0;
+ if (!rightClick) mouseDown = 1;
+}
+
+function handleMouseUp() {
+ mouseDown = 0;
+ rightClick = 0;
+}
+
+function handleMouse() {
+ for (var i = lines.length - 1; i >= 0; i--) {
+ if (mouseDown) {
+ if (mouseX >= lines[i].centerX - 40 && mouseX <= lines[i].centerX + 40 && mouseY >= lines[i].centerY - 40 && mouseY <= lines[i].centerY + 40) {
+ console.log("Line" + i + ":" + lines[i].x0 + " " + lines[i].y0 + " " + lines[i].xf + " " + lines[i].yf + " " + lines[i].width + " " + lines[i].height + " " + lines[i].centerX + " " + lines[i].centerY);
+ if (lines[i].x0 <= lines[i].xf) {
+ lines[i].x0 = mouseX-(lines[i].width/2);
+ lines[i].xf = mouseX+(lines[i].width/2);
+ } else {
+ lines[i].xf = mouseX-(lines[i].width/2);
+ lines[i].x0 = mouseX+(lines[i].width/2);
+ }
+ if (lines[i].y0 <= lines[i].yf) {
+ lines[i].y0 = mouseY-(lines[i].height/2);
+ lines[i].yf = mouseY+(lines[i].height/2);
+ } else {
+ lines[i].yf = mouseY-(lines[i].height/2);
+ lines[i].y0 = mouseY+(lines[i].height/2);
+ }
+ if (lines[i].x0 <= lines[i].xf) {
+ lines[i].centerX = lines[i].x0 + lines[i].width/2;
+ } else {
+ lines[i].centerX = lines[i].xf + lines[i].width/2;
+ }
+ if (lines[i].y0 <= lines[i].yf) {
+ lines[i].centerY = lines[i].y0 + lines[i].height/2;
+ } else {
+ lines[i].centerY = lines[i].yf + lines[i].height/2;
+ }
+ break;
+ } else if (mouseX >= lines[i].x0 - 60 && mouseX <= lines[i].x0 + 60 && mouseY >= lines[i].y0 - 60 && mouseY <= lines[i].y0 + 60) {
+ console.log("Line" + i + ":" + lines[i].x0 + " " + lines[i].y0 + " " + lines[i].xf + " " + lines[i].yf + " " + lines[i].width + " " + lines[i].height + " " + lines[i].centerX + " " + lines[i].centerY);
+
+ lines[i].x0 = mouseX;
+ lines[i].y0 = mouseY;
+ lines[i].width = Math.abs(lines[i].xf - lines[i].x0);
+ lines[i].height = Math.abs(lines[i].yf - lines[i].y0);
+ if (lines[i].x0 <= lines[i].xf) {
+ lines[i].centerX = lines[i].x0 + lines[i].width/2;
+ } else {
+ lines[i].centerX = lines[i].xf + lines[i].width/2;
+ }
+ if (lines[i].y0 <= lines[i].yf) {
+ lines[i].centerY = lines[i].y0 + lines[i].height/2;
+ } else {
+ lines[i].centerY = lines[i].yf + lines[i].height/2;
+ }
+ break;
+ } else if (mouseX >= lines[i].xf - 60 && mouseX <= lines[i].xf + 60 && mouseY >= lines[i].yf - 60 && mouseY <= lines[i].yf + 60) {
+ console.log("Line" + i + ":" + lines[i].x0 + " " + lines[i].y0 + " " + lines[i].xf + " " + lines[i].yf + " " + lines[i].width + " " + lines[i].height + " " + lines[i].centerX + " " + lines[i].centerY);
+
+ lines[i].xf = mouseX;
+ lines[i].yf = mouseY;
+ lines[i].width = Math.abs(lines[i].xf - lines[i].x0);
+ lines[i].height = Math.abs(lines[i].yf - lines[i].y0);
+ if (lines[i].x0 <= lines[i].xf) {
+ lines[i].centerX = lines[i].x0 + lines[i].width/2;
+ } else {
+ lines[i].centerX = lines[i].xf + lines[i].width/2;
+ }
+ if (lines[i].y0 <= lines[i].yf) {
+ lines[i].centerY = lines[i].y0 + lines[i].height/2;
+ } else {
+ lines[i].centerY = lines[i].yf + lines[i].height/2;
+ }
+ break;
+ }
+ } else if (rightClick) {
+ if (mouseX >= lines[i].x0 && mouseX <= lines[i].xf) {
+ lines[lines.length] = new Line(mouseX,mouseY,lines[i].xf,lines[i].yf);
+ lines[i].xf = mouseX;
+ lines[i].yf = mouseY;
+ lines[i].width = Math.abs(lines[i].xf - lines[i].x0);
+ lines[i].height = Math.abs(lines[i].yf - lines[i].y0);
+ lines[i].centerX = lines[i].x0 + lines[i].width/2;
+ lines[i].centerY = lines[i].y0 + lines[i].height/2;
+ rightClick = 0;
+ break;
+ } else if (mouseX < lines[i].x0 && mouseX > lines[i].xf) {
+ lines[lines.length] = new Line(mouseX,mouseY,lines[i].x0,lines[i].y0);
+ lines[i].x0 = mouseX;
+ lines[i].y0 = mouseY;
+ lines[i].width = Math.abs(lines[i].xf - lines[i].x0);
+ lines[i].height = Math.abs(lines[i].yf - lines[i].y0);
+ lines[i].centerX = lines[i].xf + lines[i].width/2;
+ lines[i].centerY = lines[i].yf + lines[i].height/2;
+ rightClick = 0;
+ break;
+ }
+ }
+ }
+}
+
+//function that updates screen
+function drawCurrentCanvas() {
+ drawLines();
+ if (mouseDown || rightClick) handleMouse();
+ requestAnimationFrame(drawCurrentCanvas);
+}
+
+//function that draws all existing lines
+function drawLines() {
+ ctx.clearRect(0,0,canvas.width,canvas.height);
+ for (var i = lines.length - 1; i >= 0; i--) {
+ drawLine(lines[i].x0,lines[i].y0,lines[i].xf,lines[i].yf);
+ }
+}
+
+//function that draws a line
+function drawLine(x0,y0,xf,yf) {
+ ctx.beginPath();
+ ctx.lineWidth = 3;
+ ctx.moveTo(x0,y0);
+ ctx.lineTo(xf,yf);
+ ctx.stroke();
+ lineX0 = x0;
+ lineY0 = y0;
+ lineXf = xf;
+ lineYf = yf;
+}
+
+//start
+drawCurrentCanvas();
\ No newline at end of file
--
GitLab