|
|
@@ -0,0 +1,278 @@
|
|
|
+var canvas = document.getElementById('canvas')
|
|
|
+var ctx = canvas.getContext('2d')
|
|
|
+
|
|
|
+var width = canvas.width;
|
|
|
+var height = canvas.height;
|
|
|
+
|
|
|
+function Drawable(){
|
|
|
+ Drawable.prototype.addInstance(this);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+Drawable.prototype.draw = function(){};
|
|
|
+Drawable.prototype.instances = [];
|
|
|
+Drawable.prototype.selected = [];
|
|
|
+Drawable.prototype.addInstance = function(item){
|
|
|
+ Drawable.prototype.instances.push(item);
|
|
|
+}
|
|
|
+
|
|
|
+Drawable.prototype.drawAll = function(){
|
|
|
+ ctx.clearRect(0,0,width,height);
|
|
|
+ for(var i = 0; i<Drawable.prototype.instances.length;i++){
|
|
|
+
|
|
|
+ Drawable.prototype.instances[i].draw(true);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+Drawable.prototype.forAll = function(callback){
|
|
|
+ for(var i = 0; i<Drawable.prototype.instances.length;i++){
|
|
|
+ callback(Drawable.prototype.instances[i])
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+Drawable.prototype.forSelected = function(callback){
|
|
|
+ for(var i = 0; i<Drawable.prototype.selected.length;i++){
|
|
|
+ callback(Drawable.prototype.selected[i])
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function Circle(x,y,radius,color, name){
|
|
|
+ Drawable.apply(this);
|
|
|
+
|
|
|
+ this.coords = {x: x || 0, y: y || 0}
|
|
|
+ this.radius = radius || 10;
|
|
|
+ this.color = color || "red";
|
|
|
+ this.name = name;
|
|
|
+}
|
|
|
+
|
|
|
+Circle.prototype = Object.create(Drawable.prototype);
|
|
|
+Circle.prototype.constructor = Circle;
|
|
|
+
|
|
|
+Circle.prototype.draw = function(){
|
|
|
+ console.log('DRAW');
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(this.coords.x, this.coords.y, this.radius, 0, 2 * Math.PI, false);
|
|
|
+ ctx.fillStyle = this.color;
|
|
|
+ ctx.closePath()
|
|
|
+ ctx.fill();
|
|
|
+}
|
|
|
+
|
|
|
+Circle.prototype.coords = {x: null, y: null};
|
|
|
+Circle.prototype.radius = null;
|
|
|
+Circle.prototype.color = "black";
|
|
|
+
|
|
|
+
|
|
|
+function Line(x1,y1,x2,y2,color,lineWidth){
|
|
|
+ Drawable.apply(this);
|
|
|
+
|
|
|
+ this.x1 = x1;
|
|
|
+ this.y1 = y1;
|
|
|
+ this.x2 = x2;
|
|
|
+ this.y2 = y2;
|
|
|
+ this.lineWidth = lineWidth;
|
|
|
+ this.color = color || "red";
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+Line.prototype = Object.create(Drawable.prototype);
|
|
|
+Line.prototype.constructor = Line;
|
|
|
+
|
|
|
+Line.prototype.draw = function(isShadow){
|
|
|
+ ctx.beginPath()
|
|
|
+ ctx.moveTo(this.x1,this.y1);
|
|
|
+ ctx.lineTo(this.x2,this.y2);
|
|
|
+ ctx.strokeStyle= this.color;
|
|
|
+ ctx.lineWidth = this.lineWidth;
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.closePath()
|
|
|
+}
|
|
|
+
|
|
|
+function Rectangle(x1,y1,x2,y2,color,lineWidth){
|
|
|
+ Drawable.apply(this)
|
|
|
+
|
|
|
+ this.x1 = x1;
|
|
|
+ this.y1 = y1;
|
|
|
+ this.x2 = x2;
|
|
|
+ this.y2 = y2;
|
|
|
+ this.color = color;
|
|
|
+ this.lineWidth = lineWidth;
|
|
|
+}
|
|
|
+Rectangle.prototype = Object.create(Drawable.prototype);
|
|
|
+Rectangle.prototype.constructor = Rectangle;
|
|
|
+Rectangle.prototype.draw = function(){
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.rect(this.x1,this.y1,this.x2,this.y2);
|
|
|
+ ctx.fillStyle = this.color;
|
|
|
+ ctx.fill();
|
|
|
+ ctx.closePath();
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//ctx.moveTo(0,0);
|
|
|
+//ctx.lineTo(width, height);
|
|
|
+//ctx.strokeStyle="#FF0000";
|
|
|
+//ctx.stroke();
|
|
|
+//ctx.closePath()
|
|
|
+//
|
|
|
+
|
|
|
+var lineStartCoords = {x: null, y: null};
|
|
|
+
|
|
|
+function draw(evt){
|
|
|
+ if(event.ctrlKey){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var tool = document.getElementById('tool').value;
|
|
|
+ var obj;
|
|
|
+ if (tool == 'line'){
|
|
|
+ if (evt.type == 'mousedown'){
|
|
|
+ lineStartCoords = {x: evt.clientX, y: evt.clientY};
|
|
|
+ }
|
|
|
+
|
|
|
+ if (evt.type == 'mouseup'){
|
|
|
+ obj = new Line(lineStartCoords.x, lineStartCoords.y, evt.clientX, evt.clientY, document.getElementById('color').value, document.getElementById("size").value)
|
|
|
+ }
|
|
|
+ if(evt.type == 'mousemove'){
|
|
|
+
|
|
|
+ obj = new Line(lineStartCoords.x, lineStartCoords.y, evt.clientX, evt.clientY, document.getElementById('color').value, document.getElementById("size").value)
|
|
|
+ Line.prototype.instances.splice(-1,1);
|
|
|
+ Line.prototype.drawAll();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (tool == 'circle'){
|
|
|
+ obj = new Circle(evt.clientX,evt.clientY,document.getElementById("size").value,document.getElementById('color').value, "circle")
|
|
|
+ }
|
|
|
+ else if (tool == 'rectangle'){
|
|
|
+ if (evt.type == 'mousedown'){
|
|
|
+ lineStartCoords = {x: evt.clientX, y: evt.clientY};
|
|
|
+ }
|
|
|
+
|
|
|
+ if (evt.type == 'mouseup'){
|
|
|
+ obj = new Rectangle(lineStartCoords.x, lineStartCoords.y, evt.clientX - lineStartCoords.x, evt.clientY - lineStartCoords.y, document.getElementById('color').value, document.getElementById("size").value)
|
|
|
+ }
|
|
|
+ if(evt.type == 'mousemove'){
|
|
|
+
|
|
|
+ obj = new Rectangle(lineStartCoords.x, lineStartCoords.y, evt.clientX - lineStartCoords.x, evt.clientY - lineStartCoords.y, document.getElementById('color').value, document.getElementById("size").value)
|
|
|
+ Line.prototype.instances.splice(-1,1)
|
|
|
+ Drawable.prototype.drawAll();
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ obj.draw()
|
|
|
+}
|
|
|
+
|
|
|
+canvas.onmousedown = draw
|
|
|
+canvas.onmousemove = function(evt){
|
|
|
+ var tool = document.getElementById('tool').value;
|
|
|
+ if (evt.buttons & 1){
|
|
|
+ draw(evt);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+canvas.onmouseup = draw
|
|
|
+
|
|
|
+
|
|
|
+//document.getElementById('color').onchange = function(){
|
|
|
+ //Drawable.prototype.forAll(function(item){
|
|
|
+ //item.color = document.getElementById('color').value;
|
|
|
+ //})
|
|
|
+ //Drawable.prototype.drawAll();
|
|
|
+//}
|
|
|
+
|
|
|
+var undo = document.getElementById("undo");
|
|
|
+undo.onclick = function(){
|
|
|
+ Drawable.prototype.instances.splice(-2,2)
|
|
|
+ Drawable.prototype.drawAll();
|
|
|
+ console.log(Drawable.prototype.instances)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function hexToRgbA(hex){
|
|
|
+ var c;
|
|
|
+ if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
|
|
|
+ c= hex.substring(1).split('');
|
|
|
+ if(c.length== 3){
|
|
|
+ c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
|
|
+ }
|
|
|
+ c= '0x'+c.join('');
|
|
|
+ return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.3)';
|
|
|
+ }
|
|
|
+ throw new Error('Bad Hex');
|
|
|
+}
|
|
|
+
|
|
|
+canvas.onclick = function(event){
|
|
|
+ if(!event.ctrlKey){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ Drawable.prototype.forAll(function(obj){
|
|
|
+
|
|
|
+ var x = event.clientX;
|
|
|
+ var y = event.clientY;
|
|
|
+ if(obj.name === "circle"){
|
|
|
+ if(obj.coords.x - obj.radius < x && x < obj.coords.x + obj.radius && obj.coords.y - obj.radius < y && y < obj.coords.y + obj.radius)
|
|
|
+ {
|
|
|
+ obj.color = "red";
|
|
|
+ Drawable.prototype.selected.push(obj);
|
|
|
+
|
|
|
+ Drawable.prototype.drawAll();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if((obj.x1 < x && x < obj.x2 + obj.x1 && obj.y1 < y && y < obj.y2 + obj.y1) || (obj.x1 < x && x < obj.x2 && obj.y1 < y && y < obj.y2)){
|
|
|
+ obj.color = "red";
|
|
|
+ Drawable.prototype.selected.push(obj);
|
|
|
+
|
|
|
+ Drawable.prototype.drawAll();
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+document.getElementById('color').onchange = function(){
|
|
|
+ Drawable.prototype.forSelected(function(obj){
|
|
|
+ obj.color = document.getElementById('color').value;
|
|
|
+ Drawable.prototype.drawAll();
|
|
|
+})
|
|
|
+}
|
|
|
+document.getElementById("size").onchange = function(){
|
|
|
+ Drawable.prototype.forSelected(function(obj){
|
|
|
+ obj.lineWidth = document.getElementById('size').value;
|
|
|
+ obj.radius = document.getElementById('size').value;
|
|
|
+ Drawable.prototype.drawAll();
|
|
|
+})
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+document.getElementById("delete").onclick = function(event){
|
|
|
+ for (var i = 0; i < Drawable.prototype.instances.length; i++) {
|
|
|
+ if(Drawable.prototype.instances[i].color === "red")
|
|
|
+ delete Drawable.prototype.instances[i];
|
|
|
+ Drawable.prototype.drawAll()
|
|
|
+ }
|
|
|
+ console.log(Drawable.prototype.instances)
|
|
|
+ console.log(Drawable.prototype.selected)
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+var save = document.getElementById("to-data-url");
|
|
|
+
|
|
|
+save.onclick = function(){
|
|
|
+ var xmlhttp = new XMLHttpRequest();
|
|
|
+ xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
|
|
|
+
|
|
|
+
|
|
|
+ var dataURL = canvas.toDataURL();
|
|
|
+ console.log(dataURL);
|
|
|
+ var resImg = "<img src="+dataURL+">"
|
|
|
+ xmlhttp.onreadystatechange = function(){
|
|
|
+ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
|
|
|
+ console.log(xmlhttp.responseText);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(xmlhttp.resImg);
|
|
|
+ xmlhttp.send(JSON.stringify({ func: 'addMessage', nick: "d", message: resImg}))
|
|
|
+}
|
|
|
+
|
