|
@@ -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()
|
|
|
|
|
+}
|
