[T3] first commit: the two first parts are done

d60631f6 · Wellington Gabriel Vicente de Souza · fdbcbe27 · d60631f6 · d60631f6 · d60631f6
Commit d60631f6 authored 7 years ago by Wellington Gabriel Vicente de Souza
--- a/T3/canvas.css
+++ b/T3/canvas.css
+* { 
+  margin:0; 
+  padding:0; 
+}
+html, body { 
+  width: 100%; 
+}
+canvas { 
+  display:block; 
+  height: 100%;
+  width: 100%;
+}
\ No newline at end of file
--- a/T3/lines.html
+++ b/T3/lines.html
+<!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>
--- a/T3/lines.js
+++ b/T3/lines.js
+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