|
@@ -11,17 +11,17 @@ 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)
|
|
|
+ (e.buttons & 1) && new Circle(e.layerX, e.layerY, +size.value, color.value)
|
|
|
}
|
|
|
},
|
|
|
circle: {
|
|
|
mousedown(e){
|
|
|
- current = new Circle(e.clientX,e.clientY, 1, color.value)
|
|
|
+ current = new Circle(e.layerX,e.layerY, 1, color.value)
|
|
|
},
|
|
|
mousemove(e){
|
|
|
if (!current) return;
|
|
|
|
|
|
- current.radius = current.distanceTo(e.clientX, e.clientY)
|
|
|
+ current.radius = current.distanceTo(e.layerX, e.layerY)
|
|
|
Drawable.drawAll()
|
|
|
},
|
|
|
|
|
@@ -31,13 +31,13 @@ const tools = {
|
|
|
},
|
|
|
line: {
|
|
|
mousedown(e){
|
|
|
- current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value)
|
|
|
+ current = new Line(e.layerX, e.layerY, 0, 0, color.value, +size.value)
|
|
|
},
|
|
|
mousemove(e){
|
|
|
if (!current) return;
|
|
|
|
|
|
- current.width = e.clientX - current.x
|
|
|
- current.height = e.clientY - current.y
|
|
|
+ current.width = e.layerX - current.x
|
|
|
+ current.height = e.layerY - current.y
|
|
|
|
|
|
Drawable.drawAll()
|
|
|
},
|
|
@@ -48,13 +48,13 @@ const tools = {
|
|
|
},
|
|
|
rectangle: {
|
|
|
mousedown(e){
|
|
|
- current = new Rectangle(e.clientX, e.clientY, 0, 0, color.value)
|
|
|
+ current = new Rectangle(e.layerX, e.layerY, 0, 0, color.value)
|
|
|
},
|
|
|
mousemove(e){
|
|
|
if (!current) return;
|
|
|
|
|
|
- current.width = e.clientX - current.x
|
|
|
- current.height = e.clientY - current.y
|
|
|
+ current.width = e.layerX - current.x
|
|
|
+ current.height = e.layerY - current.y
|
|
|
|
|
|
Drawable.drawAll()
|
|
|
},
|
|
@@ -65,13 +65,13 @@ const tools = {
|
|
|
},
|
|
|
ellipse: {
|
|
|
mousedown(e){
|
|
|
- current = new Ellipse(e.clientX, e.clientY, 0, 0, color.value)
|
|
|
+ current = new Ellipse(e.layerX, e.layerY, 0, 0, color.value)
|
|
|
},
|
|
|
mousemove(e){
|
|
|
if (!current) return;
|
|
|
|
|
|
- current.width = e.clientX - current.x
|
|
|
- current.height = e.clientY - current.y
|
|
|
+ current.width = e.layerX - current.x
|
|
|
+ current.height = e.layerY - current.y
|
|
|
|
|
|
Drawable.drawAll()
|
|
|
},
|
|
@@ -83,7 +83,7 @@ const tools = {
|
|
|
select: {
|
|
|
click(e){
|
|
|
console.log(e)
|
|
|
- let found = Drawable.instances.filter(c => c.in && c.in(e.clientX, e.clientY))
|
|
|
+ let found = Drawable.instances.filter(c => c.in && c.in(e.layerX, e.layerY))
|
|
|
if (found.length){
|
|
|
if (e.ctrlKey){
|
|
|
selection.push(found.pop())
|
|
@@ -208,14 +208,23 @@ class Line extends Drawable {
|
|
|
}
|
|
|
|
|
|
|
|
|
- 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;
|
|
|
+ draw(selected){
|
|
|
+ if (selected){
|
|
|
+ ctx.beginPath()
|
|
|
+ ctx.moveTo(this.x, this.y)
|
|
|
+ ctx.lineTo(this.x + this.width, this.y + this.height)
|
|
|
+ ctx.closePath()
|
|
|
+ ctx.strokeStyle = '#000000'
|
|
|
+ ctx.lineWidth = this.lineWidth + 2
|
|
|
+ ctx.stroke()
|
|
|
+ }
|
|
|
+ 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();
|
|
|
+ ctx.stroke()
|
|
|
}
|
|
|
|
|
|
|
|
@@ -226,15 +235,16 @@ class Line extends Drawable {
|
|
|
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);
|
|
|
+ let rotX = Math.cos(lineTurnAngle) * cursorWidth;
|
|
|
+ let rotY = Math.sin(lineTurnAngle) * cursorWidth;
|
|
|
|
|
|
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
|
|
|
+ // console.log('попал')
|
|
|
+ return true
|
|
|
} else {
|
|
|
- console.log(false)
|
|
|
+ // console.log('мимо')
|
|
|
+ return false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -242,6 +252,7 @@ class Line extends Drawable {
|
|
|
|
|
|
|
|
|
class Rectangle extends Drawable {
|
|
|
+
|
|
|
constructor(x,y, width, height, color){
|
|
|
super()
|
|
|
this.x = x;
|
|
@@ -251,12 +262,12 @@ class Rectangle extends Drawable {
|
|
|
this.color = color;
|
|
|
|
|
|
this.draw();
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
// invertColor(hex){
|
|
|
// function padZero(str, len) {
|
|
|
// len = len || 2;
|
|
|
- // var zeros = new Array(len).join('0');
|
|
|
+ // let zeros = new Array(len).join('0');
|
|
|
// return (zeros + str).slice(-len);
|
|
|
// }
|
|
|
// if (hex.indexOf('#') === 0) {
|
|
@@ -270,7 +281,7 @@ class Rectangle extends Drawable {
|
|
|
// throw new Error('Invalid HEX color.');
|
|
|
// }
|
|
|
// // invert color components
|
|
|
- // var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
|
|
|
+ // let 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
|
|
@@ -279,6 +290,7 @@ class Rectangle extends Drawable {
|
|
|
|
|
|
|
|
|
draw(selected){
|
|
|
+
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(this.x, this.y);
|
|
|
|
|
@@ -296,31 +308,59 @@ class Rectangle extends Drawable {
|
|
|
|
|
|
|
|
|
in(x,y){
|
|
|
- return this.x < x && this.x + this.width > x &&
|
|
|
- this.y < y && this.y + this.height > y
|
|
|
+
|
|
|
+ if (this.width > 0 && this.height > 0) {
|
|
|
+ if (this.x < x && this.x + this.width > x &&
|
|
|
+ this.y < y && this.y + this.height > y) {
|
|
|
+ // console.log('попал', x, y, this.x, this.y, this.width, this.height)
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ // console.log('мимо', x, y, this.x, this.y, this.width, this.height)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.width < 0 && this.height < 0) {
|
|
|
+ if (this.x > x && this.x + this.width < x &&
|
|
|
+ this.y > y && this.y + this.height < y) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.width > 0 && this.height < 0) {
|
|
|
+ if (this.x < x && this.x + this.width > x &&
|
|
|
+ this.y > y && this.y + this.height < y) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.width < 0 && this.height > 0) {
|
|
|
+ if (this.x > x && this.x + this.width < x &&
|
|
|
+ this.y < y && this.y + this.height > y) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
+ this.x += newWidth/2
|
|
|
}
|
|
|
else
|
|
|
this.#width = newWidth
|
|
@@ -329,7 +369,7 @@ class Ellipse extends Drawable {
|
|
|
set height(newHeight){
|
|
|
if (newHeight < 0){
|
|
|
this.#height = -newHeight
|
|
|
- this.y += newHeight
|
|
|
+ this.y += newHeight/2
|
|
|
}
|
|
|
else
|
|
|
this.#height = newHeight
|
|
@@ -351,25 +391,35 @@ class Ellipse extends Drawable {
|
|
|
return this.#height/2
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+ 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();
|
|
|
- // 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();
|
|
|
+ ctx.fillStyle = this.color;
|
|
|
+ if (selected){
|
|
|
+ ctx.lineWidth = 2
|
|
|
+ ctx.strokeStyle = '#000000'
|
|
|
+ ctx.stroke()
|
|
|
+ }
|
|
|
+ ctx.fill()
|
|
|
}
|
|
|
|
|
|
|
|
|
- // in(x,y){
|
|
|
- // return this.x < x && this.x + this.width > x &&
|
|
|
- // this.y < y && this.y + this.height > y
|
|
|
- // }
|
|
|
+ in(x,y){
|
|
|
+ return (( (x - (this.x + this.rx))**2 / this.rx**2 ) + ( (y - (this.y + this.ry))**2 / this.ry**2 )) <= 1
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|