|
|
@@ -0,0 +1,331 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title></title>
|
|
|
+ <meta name="viewport" content="width=device-width">
|
|
|
+ <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>
|
|
|
+ <canvas id='canvas' width=400 height=400></canvas>
|
|
|
+ <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='select'>Select</option>
|
|
|
+ <option value='rectangle'>Rectangle</option>
|
|
|
+ <option value='ellipse'>Ellipse</option>
|
|
|
+ </select>
|
|
|
+ <input type='number' id='size' value=10>
|
|
|
+ <button id='delete'>Delete...</button>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <canvas id="canv" width="400" height="400"></canvas>
|
|
|
+ <input type="submit" value="Click" id="btn">
|
|
|
+ <input type="text" placeholder="color" id="color">
|
|
|
+ <input type="submit" value="Delete" id="del"> -->
|
|
|
+ <script>
|
|
|
+
|
|
|
+ /*let canv=document.getElementById('canv');
|
|
|
+ let ctx=canv.getContext('2d');
|
|
|
+
|
|
|
+ del.onclick=()=>{
|
|
|
+ ctx.fillStyle='white';
|
|
|
+ ctx.fill();
|
|
|
+ }
|
|
|
+
|
|
|
+ btn.onclick=()=>{
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(50, 50, 50, -Math.PI/6, Math.PI/6,true);
|
|
|
+ ctx.lineTo(50, 50)
|
|
|
+ ctx.closePath()
|
|
|
+ ctx.fillStyle=color.value;
|
|
|
+ ctx.fill();
|
|
|
+ }*/
|
|
|
+
|
|
|
+ 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 & 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.altKey){
|
|
|
+ selection.push(found.pop())
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ selection = [found.pop()]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ if (!e.altKey) selection = []
|
|
|
+ }
|
|
|
+
|
|
|
+ Drawable.drawAll(selection)
|
|
|
+ },
|
|
|
+ mousedown(e){},
|
|
|
+ mousemove(e){},
|
|
|
+ mouseup(e){},
|
|
|
+ },
|
|
|
+ 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 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+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){
|
|
|
+ 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(selected){
|
|
|
+ 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
|
|
|
+ if (selected){
|
|
|
+ ctx.strokeStyle = '#f0f'
|
|
|
+ ctx.stroke()
|
|
|
+ }
|
|
|
+ ctx.stroke()
|
|
|
+ }
|
|
|
+ in(x, y) {
|
|
|
+ let rotateLine = Math.atan2(this.height, this.width)
|
|
|
+ let rotCursor = Math.atan2(y - this.y, x - this.x)
|
|
|
+ let distanceToPoint = distance(x, y, this.x, this.y)
|
|
|
+ let angleLine = rotCursor - rotateLine
|
|
|
+ let rotateX = Math.cos(angleLine) * distanceToPoint
|
|
|
+ let rotateY = Math.sin(angleLine) * distanceToPoint
|
|
|
+ return rotateX >= 0 && rotateX <= this.length && rotateY <= this.lineWidth/2 && rotateY >= -this.lineWidth/2
|
|
|
+ }
|
|
|
+ get length(){
|
|
|
+ return this.distanceTo(this.x + this.width, this.y + this.height)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//------------------------------------------------------------------
|
|
|
+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.moveTo(this.x, this.y)
|
|
|
+ ctx.fillRect(this.x, this.y, this.width, this.height)
|
|
|
+ if (selected){
|
|
|
+ ctx.rect(this.x, this.y, this.width, this.height)
|
|
|
+ ctx.strokeStyle = '#f0f'
|
|
|
+ ctx.stroke()
|
|
|
+ }
|
|
|
+ ctx.fillStyle = this.color
|
|
|
+ ctx.stroke()
|
|
|
+ }
|
|
|
+ in(x, y){
|
|
|
+ return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//--------------------------------------------------------------
|
|
|
+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){
|
|
|
+ return this.x >= x && this.x <= x + w &&
|
|
|
+ this.y >= y && this.y <= y + h
|
|
|
+ }
|
|
|
+}
|
|
|
+//-------------------------------------------------------------------
|
|
|
+
|
|
|
+color.onchange = () => {
|
|
|
+ selection.forEach(c => c.color = color.value)
|
|
|
+ Drawable.drawAll(selection)
|
|
|
+}
|
|
|
+
|
|
|
+document.getElementById('delete').onclick = () =>{
|
|
|
+ Drawable.instances = []
|
|
|
+ Drawable.drawAll()
|
|
|
+}
|
|
|
+undo.onclick = function(){
|
|
|
+ Drawable.instances.pop()
|
|
|
+ Drawable.drawAll()
|
|
|
+}
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
