Browse Source

canvasHW done

Vadym Hlushko 3 years ago
parent
commit
0f7c7d4a2e
4 changed files with 356 additions and 2 deletions
  1. 30 0
      canvasHW/index.html
  2. 28 0
      canvasHW/main.css
  3. 298 0
      canvasHW/main.js
  4. 0 2
      shopGQL/main.js

+ 30 - 0
canvasHW/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>eval</title>
+        <link href="main.css" rel="stylesheet" type="text/css" />
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.3/papaparse.min.js"></script>
+        <script src="http://gitlab.a-level.com.ua/gitgod/nanobind/raw/master/static/nb.js"></script>
+    </head>
+    <body>
+        <main id="mainCanvas">
+        <canvas id='canvas' width=1200 height=450></canvas> 
+        </main> 
+        <button id='undo'>UNDO</button>
+        <input type='color' id='color'>
+        <select id='tool'>
+            <option value='graffity'>Graffity</option>
+            <option value='circle'>Circle</option>
+            <option value='line'>Line</option>
+            <option value="rectangle">Rectangle</option>
+            <option value="elipse">Elipse</option>
+            <option value='select'>Select</option>
+        </select>
+        <input type='number' id='size' value=10>
+        <button id='delete'>Delete...</button>
+        <script src="main.js"></script>
+    </body>
+</html>

+ 28 - 0
canvasHW/main.css

@@ -0,0 +1,28 @@
+* {
+    box-sizing: border-box;   
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+ button{
+    width: 100%;
+    font-size: 2em;
+}
+input, button, select{
+    width: 100%;
+    font-size: 2em;
+}
+
+table {
+    border: 1px;
+    border-collapse: collapse;
+}
+
+td,th {
+    border: 1px solid black;
+}

+ 298 - 0
canvasHW/main.js

@@ -0,0 +1,298 @@
+const canvas = document.getElementById('canvas')
+const ctx    = canvas.getContext('2d')
+
+const width  = canvas.width;
+const height = canvas.height;
+
+let current;
+let selection = []
+
+const tools = {
+    graffity: {
+        mousemove(e){ //e.buttons 0b00000x11 & 0b00000100 == x
+            (e.buttons & 1) && new Circle(e.clientX, e.clientY, +size.value, color.value)
+        }
+    },
+    circle: {
+        mousedown(e){
+            current = new Circle(e.clientX,e.clientY, 1, color.value)
+        },
+        mousemove(e){
+            if (!current) return;
+
+            current.radius = current.distanceTo(e.clientX, e.clientY)
+            Drawable.drawAll()
+        },
+
+        mouseup(e){
+            current = null
+        }
+    },
+    elipse: {
+        mousedown(e){
+            current = new Elipse(e.clientX,e.clientY, 1,1, color.value)
+        },
+        mousemove(e){
+            if (!current) return;
+            var width = e.clientX - current.x;
+            var height = e.clientY - current.y;
+            current.width = width ? width : width * -1;
+            current.height = height ? height : height * -1;
+            Drawable.drawAll()
+        },
+
+        mouseup(e){
+            current = null
+        }
+    },
+    line: {
+        mousedown(e){
+            current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value)
+        },
+        mousemove(e){
+            if (!current) return;
+
+            current.width = e.clientX - current.x
+            current.height = e.clientY - current.y
+
+            Drawable.drawAll()
+        },
+
+        mouseup(e){
+            current = null
+        }
+    },
+    rectangle : {
+        mousedown(e){
+            current = new Rectangle(e.clientX, e.clientY, 0, 0, color.value, +size.value)
+        },
+        mousemove(e){
+            if (!current) return;
+
+            current.width = e.clientX - current.x
+            current.height = e.clientY - current.y
+
+            Drawable.drawAll()
+        },
+
+        mouseup(e){
+            current = null
+        }
+    },
+    select: {
+        click(e){
+            console.log(e)
+            let found = Drawable.instances.filter(c => c.in && c.in(e.clientX, e.clientY))
+            if (found.length){
+                if (e.ctrlKey){
+                    selection.push(found.pop())
+                }
+                else {
+                    selection = [found.pop()]
+                }
+            }
+            else {
+                if (!e.ctrlKey) selection = []
+            }
+
+            Drawable.drawAll(selection)
+        },
+        mousedown(e){
+            //
+        },
+        mousemove(e){
+
+        },
+
+        mouseup(e){
+            //x,y, w, h прямоугольника
+            //selection - только те элеменеты Drawable.instances которые в границах прямоугольника.
+        },
+    }
+}
+
+
+
+function superHandler(evt){
+    let t = tools[tool.value]
+    if (typeof t[evt.type] === 'function')
+        t[evt.type].call(this, evt)
+}
+
+canvas.onmousemove = superHandler
+canvas.onmouseup   = superHandler
+canvas.onmousedown = superHandler
+canvas.onclick = superHandler
+
+////
+
+
+function Drawable(){
+   Drawable.addInstance(this);   
+}
+
+const distance = (x1,y1, x2, y2) => ((x1-x2)**2 + (y1-y2)**2)**0.5
+
+Drawable.prototype.draw = function(){};
+Drawable.prototype.distanceTo = function(x,y){
+    if (typeof this.x !== 'number' ||
+        typeof this.y !== 'number'){
+        return NaN
+    }
+    return distance(this.x, this.y, x, y)
+};
+Drawable.instances = [];
+Drawable.addInstance = function(item){
+    Drawable.instances.push(item);
+}
+
+Drawable.drawAll = function(selection=[]){
+    ctx.clearRect(0,0,width,height);
+    Drawable.forAll(item => item.draw())
+    selection.forEach(item  => item.draw(true))
+}
+
+Drawable.forAll = function(callback){
+    for(var i = 0; i<Drawable.instances.length;i++){
+        callback(Drawable.instances[i])
+    }
+}
+
+class Circle extends Drawable {
+    constructor(x,y,radius, color){
+        super()
+        this.x      = x;
+        this.y      = y;
+        this.radius = radius;
+        this.color  = color;
+
+        this.draw(); 
+    }
+
+    draw(selected){
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fillStyle = this.color;
+        if (selected){
+            ctx.lineWidth = 2
+            ctx.stroke();
+        }
+        ctx.fill();
+    }
+
+    in(x,y){
+        return this.distanceTo(x,y) < this.radius
+    }
+
+    inBounds(x,y,w,h){ // x = 100, this.x = 102, w = 5
+        return this.x >= x && this.x <= x + w &&
+               this.y >= y && this.y <= y + h 
+    }
+}
+
+class Elipse extends Drawable {
+    constructor(x,y,width,height,color){
+        super()
+        this.x      = x ? x : x*-1;
+        this.y      = y ? y : y*-1;
+        this.width  = width;
+        this.height = height;
+        this.color  = color;
+
+        this.draw(); 
+    }
+
+    draw(){
+        this.width = this.width > 0 ? this.width : this.width * (-1);
+        this.height = this.height > 0 ? this.height : this.height * (-1);
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.ellipse(this.x, this.y, this.height, this.width,  Math.PI / 2, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fillStyle = this.color;
+        ctx.fill();
+    }
+
+    in(x,y){
+        return this.distanceTo(x,y) < this.radius
+    }
+
+    inBounds(x,y,w,h){ // x = 100, this.x = 102, w = 5
+        return this.x >= x && this.x <= x + w &&
+               this.y >= y && this.y <= y + h 
+    }
+}
+
+
+
+
+class Line extends Drawable {
+    constructor(x,y, width, height, color, lineWidth){
+        super()
+        this.x      = x;
+        this.y      = y;
+        this.width  = width;
+        this.height = height;
+        this.color  = color;
+        this.lineWidth  = lineWidth;
+
+        this.draw(); 
+    }
+    
+
+    draw(){
+        ctx.beginPath();
+        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
+        ctx.stroke();
+    }
+}
+
+class Rectangle extends Drawable {
+    constructor(x,y, width, height, color, lineWidth){
+        super()
+        this.x      = x;
+        this.y      = y;
+        this.width  = width;
+        this.height = height;
+        this.color  = color;
+        this.lineWidth  = lineWidth;
+        this.draw(); 
+    }
+    
+
+    draw(){
+        ctx.beginPath();
+        ctx.rect(this.x , this.y ,this.width,this.height);
+        ctx.fillStyle = this.color;
+        ctx.fill();
+    }
+}
+
+color.onchange = () => {
+    selection.forEach(c => c.color = color.value)
+    Drawable.drawAll(selection)
+}
+
+document.getElementById('delete').onclick = () =>{
+    Drawable.instances = Drawable.instances.filter(item => !selection.includes(item))
+    selection = []
+    Drawable.drawAll()
+}
+
+
+//new Line(0,0,100,100, "red")
+////new Circle(30,30,10, "red")
+
+////canvas.onmousemove = function(e){
+////}
+
+undo.onclick = function(){
+    Drawable.instances.pop()
+    //Drawable.instances = []
+    Drawable.drawAll()
+}

+ 0 - 2
shopGQL/main.js

@@ -601,7 +601,6 @@ actionFullRegister = (login,password) => async dispatch => {
 }
 
         let pLog = document.createElement('p')
-       
         pLog.style.float = 'right'
         pLog.style.fontWeight = 'bold'
         pLog.style.marginTop = '20px'
@@ -637,7 +636,6 @@ let newOrder = async(obj) => {
       }
       
       let result = await shopGQL(query,qVariables)
-      console.log(result)
       return result
 }