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; 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= 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(); } in(x,y){ let lineAngle = Math.atan2(this.height, this.width); let mouseAngle = Math.atan2(y - this.y, x - this.x); let lineTurnAngle = mouseAngle - lineAngle; let cursorWidth = distance(this.x,this.y,x,y); let rotX = Math.cos(lineTurnAngle) * distance(x,y,this.x,this.y); let rotY = Math.sin(lineTurnAngle) * distance(x,y,this.x,this.y); if (rotX > 0 && rotX < this.distanceTo(this.x + this.width, this.y + this.height) && (rotY > -this.lineWidth / 2) && (rotY < this.lineWidth / 2)) { console.log(true) return } else { console.log(false) } } } 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(); } // invertColor(hex){ // function padZero(str, len) { // len = len || 2; // var zeros = new Array(len).join('0'); // return (zeros + str).slice(-len); // } // if (hex.indexOf('#') === 0) { // hex = hex.slice(1); // } // // convert 3-digit hex to 6-digits. // if (hex.length === 3) { // hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; // } // if (hex.length !== 6) { // throw new Error('Invalid HEX color.'); // } // // invert color components // var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16), // g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16), // b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); // // pad each with zeros and return // return '#' + padZero(r) + padZero(g) + padZero(b); // } draw(selected){ ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); if (selected){ ctx.rect(this.x, this.y, this.width, this.height); ctx.lineWidth = 2; ctx.stroke(); } ctx.closePath(); } in(x,y){ return this.x < x && this.x + this.width > x && this.y < y && this.y + this.height > y } } class Ellipse 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(); } #width = 0 #height = 0 set width(newWidth){ if (newWidth < 0){ this.#width = -newWidth this.x += newWidth } else this.#width = newWidth } set height(newHeight){ if (newHeight < 0){ this.#height = -newHeight this.y += newHeight } else this.#height = newHeight } get width(){ return this.#width } get height(){ return this.#height } get rx(){ return this.#width/2 } get ry(){ return this.#height/2 } draw(selected){ ctx.beginPath(); // console.log(this.ry) ctx.moveTo(this.x, this.y); ctx.fillStyle = this.color; // ctx.ellipse(this.x + this.width/2, this.y + this.height/2, this.width/2, this.height/2, 0, 0, 2 * Math.PI); ctx.ellipse(this.x + this.rx, this.y + this.ry, this.rx, this.ry, 0, 0, 2 * Math.PI); ctx.fill() ctx.closePath(); } // in(x,y){ // return this.x < x && this.x + this.width > x && // this.y < y && this.y + this.height > y // } } 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() } //new Line(0,0,100,100, "red") ////new Circle(30,30,10, "red") ////canvas.onmousemove = function(e){ ////}