Browse Source

added hw canvas done

makstravm 3 years ago
parent
commit
6241c1610e
2 changed files with 29 additions and 10 deletions
  1. 2 2
      hw canvas/index.html
  2. 27 8
      hw canvas/main.js

+ 2 - 2
hw canvas/index.html

@@ -19,9 +19,9 @@
     <select id="tool">
         <option value="graffity">Graffity</option>
         <option value="circle">Circle</option>
-        <option value="line">Line</option>
+        <option value="line" selected>Line</option>
         <option value="rectangle">Rectangle</option>
-        <option value="ellipse" selected>Ellipse</option>
+        <option value="ellipse" >Ellipse</option>
         <option value="select">Select</option>
     </select>
     <input type="number" id="size" value="10">

+ 27 - 8
hw canvas/main.js

@@ -206,15 +206,33 @@ class Line extends Drawable {
     }
 
 
-    draw() {
+    draw(selected) {
         ctx.beginPath();
+        ctx.strokeStyle = this.color;
         ctx.moveTo(this.x, this.y);
         ctx.lineTo(this.x + this.width, this.y + this.height);
         ctx.closePath();
-        ctx.strokeStyle = this.color;
         ctx.lineWidth = this.lineWidth
+        if (selected) {
+            ctx.lineWidth = 2
+            ctx.strokeStyle = "greenyellow"
+            ctx.stroke();
+        }
         ctx.stroke();
     }
+    in(x, y) {
+        let a = Drawable.instances.filter(t => {
+            ctx.beginPath();
+            ctx.lineWidth = t.lineWidth
+            ctx.moveTo(t.x, t.y);
+            ctx.lineTo(t.x + t.width, t.y + t.height);
+            if (ctx.isPointInStroke(x, y)) {
+                return t
+            }
+        })
+        let flag = a[0]?.x ? a[0]?.x : null
+        return this.x === flag
+    }
 }
 
 class Rectangle extends Drawable {
@@ -248,7 +266,6 @@ class Rectangle extends Drawable {
 
 class Ellipse extends Drawable {
     constructor(x, y, width, height, color) {
-
         super()
         this.x = x
         this.y = y
@@ -296,8 +313,10 @@ document.getElementById('delete').onclick = () => {
 ////canvas.onmousemove = function(e){
 ////}
 
-//undo.onclick = function(){
-    //Drawable.instances.pop()
-    ////Drawable.instances = []
-    //Drawable.drawAll()
-//}
+undo.onclick = function () {
+    Drawable.instances.pop()
+
+
+    console.log(Drawable.instances);
+    Drawable.drawAll()
+}