Vitalii Polishchuk 2 년 전
부모
커밋
b52fb3ed0f
3개의 변경된 파일462개의 추가작업 그리고 0개의 파일을 삭제
  1. 32 0
      js/19-js-canvas-oop/css/main.css
  2. 32 0
      js/19-js-canvas-oop/index.html
  3. 398 0
      js/19-js-canvas-oop/js/main.js

+ 32 - 0
js/19-js-canvas-oop/css/main.css

@@ -0,0 +1,32 @@
+* {
+    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;
+}
+
+/*div#content {*/
+    /*display: none;*/
+/*}*/

+ 32 - 0
js/19-js-canvas-oop/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+    <canvas id='canvas' width=800 height=500></canvas>
+    <button id='undo'>UNDO</button>
+    <button id='clear'>CLEAR</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='ellipse'>Ellipse</option>
+        <option value="triangle">Triangle</option>
+        <option value="right_triangle">Right Triangle</option>
+        <option value='select'>Select</option>
+    </select>
+    <input type='number' id='size' value=10>
+    <button id='delete'>Delete...</button>
+    <script src="js/main.js"></script>
+</body>
+
+</html>

+ 398 - 0
js/19-js-canvas-oop/js/main.js

@@ -0,0 +1,398 @@
+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
+        }
+    },
+    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)
+        },
+        mousemove(e) {
+            if (!current) return;
+
+            current.width = e.clientX - current.x
+            current.height = e.clientY - current.y
+
+            Drawable.drawAll()
+        },
+
+        mouseup(e) {
+            current = null
+        },
+    },
+    ellipse: {
+        mousedown(e) {
+            current = new Ellipse(e.clientX, e.clientY, 0, 0, color.value)
+        },
+        mousemove(e) {
+            if (!current) return;
+
+            let resultX = e.clientX - current.x;
+            let resultY = e.clientY - current.y;
+            current.radiusX = resultX > 0 ? resultX : -resultX;
+            current.radiusY = resultY > 0 ? resultY : - resultY;
+
+            Drawable.drawAll()
+        },
+
+        mouseup(e) {
+            current = null
+        }
+    },
+    triangle: {
+        mousedown(e) {
+            current = new Triangle(e.clientX, e.clientY, color.value)
+        },
+        mousemove(e) {
+            if (!current) return;
+
+            current.thirdPointX = e.clientX;
+            current.thirdPointY = e.clientY;
+            current.secondPointX = current.x - (current.thirdPointX - current.x)
+            current.secondPointY = e.clientY;
+            console.log(current)
+
+            Drawable.drawAll()
+        },
+
+        mouseup(e) {
+            current = null
+        }
+    },
+    right_triangle: {
+        mousedown(e) {
+            current = new RightTriangle(e.clientX, e.clientY, color.value)
+        },
+        mousemove(e) {
+            if (!current) return;
+
+            current.secondPointY = e.clientY;
+            current.thirdPointX = e.clientX;
+            current.thirdPointY = e.clientY;
+
+            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) {
+            current = new Rectangle(e.clientX, e.clientY, 10, 10, "rgb(56, 56, 56)")
+
+        },
+        mousemove(e) {
+            if (!current) return;
+
+            current.width = e.clientX - current.x
+            current.height = e.clientY - current.y
+
+            Drawable.drawAll()
+        },
+
+        mouseup(e) {
+
+            selection = Drawable.instances.filter(item => (item.x > current.x && item.x < current.x + current.width) && (item.y > current.y && item.y < current.y + current.height))
+            console.log(selection)
+            current = null
+            Drawable.instances.pop()
+            Drawable.drawAll(selection)
+
+
+            //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 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) {
+        super()
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.color = color;
+
+
+        this.draw();
+    }
+
+    draw(selected) {
+        ctx.beginPath();
+        ctx.fillRect(this.x, this.y, this.width, this.height);
+        ctx.fillStyle = this.color;
+        if (selected) {
+            ctx.lineWidth = 2
+            ctx.stroke();
+        }
+        ctx.fill();
+    }
+}
+
+class Ellipse extends Drawable {
+    constructor(x, y, radiusX, radiusY, color) {
+        super()
+        this.x = x;
+        this.y = y;
+        this.radiusX = radiusX;
+        this.radiusY = radiusY;
+        this.color = color;
+        this.draw();
+    }
+
+    draw(selected) {
+
+        ctx.beginPath();
+        ctx.ellipse(this.x, this.y, this.radiusX, this.radiusY, 0, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fillStyle = this.color;
+        if (selected) {
+            ctx.lineWidth = 2
+            ctx.stroke();
+        }
+        ctx.fill();
+    }
+}
+
+class Triangle extends Drawable {
+    constructor(x, y, color) {
+        super()
+        this.x = x;
+        this.y = y;
+        this.secondPointX = x;
+        this.secondPointY = y;
+        this.thirdPointX = x;
+        this.thirdPointY = y;
+        this.color = color;
+        this.draw();
+    }
+
+    draw(selected) {
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(this.secondPointX, this.secondPointY);
+        ctx.lineTo(this.thirdPointX, this.thirdPointY);
+        ctx.closePath();
+        ctx.fillStyle = this.color
+        if (selected) {
+            ctx.lineWidth = 2
+            ctx.stroke();
+        }
+        ctx.fill();
+    }
+}
+
+class RightTriangle extends Drawable {
+    constructor(x, y, color) {
+        super()
+        this.x = x;
+        this.y = y;
+        this.secondPointX = x;
+        this.secondPointY = y;
+        this.thirdPointX = x;
+        this.thirdPointY = y;
+        this.color = color;
+        this.draw();
+    }
+
+    draw(selected) {
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(this.x, this.secondPointY);
+        ctx.lineTo(this.thirdPointX, this.thirdPointY);
+        ctx.closePath();
+        ctx.fillStyle = this.color
+        if (selected) {
+            ctx.lineWidth = 2
+            ctx.stroke();
+        }
+        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()
+}
+
+undo.onclick = function () {
+    Drawable.instances.pop()
+    Drawable.drawAll()
+}
+
+clear.onclick = function () {
+    Drawable.instances = []
+    Drawable.drawAll()
+}