From c516af15e9eadc9f562a4c76ff4bbd55305abef7 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Mon, 11 Feb 2013 17:24:53 -0500 Subject: [PATCH 01/22] added code to drawing tools to take border offset into account --- dtools.js | 68 +++++++++++++++++++++++++++++++++--------------------- index.html | 25 +++++++++++--------- 2 files changed, 56 insertions(+), 37 deletions(-) diff --git a/dtools.js b/dtools.js index a2b8735..bb0a920 100644 --- a/dtools.js +++ b/dtools.js @@ -32,10 +32,12 @@ function rect_tool(id){ if(e.data.click === true && e.data.drawn == false){ //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("rect").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.update(e.data.rectX,e.data.rectY,e.offsetX,e.offsetY); } @@ -52,10 +54,12 @@ function rect_create(e){ this.rect.drag(this.move, this.start, this.stop, this, this, this); //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("rect").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } this.rectX = e.offsetX; this.rectY = e.offsetY; @@ -71,7 +75,7 @@ function rect_update(startX, startY, endX, endY){ function rect_start(){ this.rect.ox = this.rect.attr("x"); this.rect.oy = this.rect.attr("y"); - this.rect.animate({opacity:.25},500,">"); + this.rect.animate({opacity:.25},500,"<>"); }; function rect_move(dx,dy){ this.rect.attr({ @@ -80,7 +84,7 @@ function rect_move(dx,dy){ }); }; function rect_stop(){ - this.rect.animate({opacity: 1}, 500, ">"); + this.rect.animate({opacity: 1}, 500, "<>"); }; function rect_delete(){ this.rect.remove(); @@ -119,10 +123,12 @@ function ellipse_tool(id){ if(e.data.click === true && e.data.drawn === false){ //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("ellipse").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.update(e.data.startX, e.data.startY, e.offsetX, e.offsetY); } @@ -139,10 +145,12 @@ function ellipse_create(e){ this.ellipse.drag(this.move, this.start, this.stop, this, this, this); //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("ellipse").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } this.startX = e.offsetX; this.startY = e.offsetY; @@ -196,10 +204,12 @@ function pen_tool(id){ if(e.data.erase_mode){ //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("pen").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.erase([e.offsetX,e.offsetY]); } @@ -216,10 +226,12 @@ function pen_tool(id){ if(e.data.erase_mode == true){ //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("pen").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.erase([e.offsetX,e.offsetY]); } @@ -234,20 +246,24 @@ function pen_down(e){ e.data.ml.push('M'); //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("pen").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.xy.push([e.offsetX,e.offsetY]); } function pen_move(e){ //e.offsetX = undefined workaround for FF //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET - //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF + //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - e.offsetX = (e.pageX - $(e.delegateTarget).position().top); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top); + var bord=document.getElementById("pen").style.border; + var bordpx=parseInt(bord); + e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.ml.push('L'); e.data.xy.push([e.offsetX,e.offsetY]); diff --git a/index.html b/index.html index f2930a0..9c29f2e 100644 --- a/index.html +++ b/index.html @@ -16,33 +16,31 @@ } #layer_picker{ position:absolute; - top:510px; + top:530px; } .options{ position:absolute; - top: 510px; + top: 530px; left: 150px; } -
-
-
+
+ + +
+
Pen Tool
From e6eea387d272677dab229eb9c045fe85109655ef Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Mon, 11 Feb 2013 18:12:13 -0500 Subject: [PATCH 02/22] users can input stroke and fill colors for rects and ellipses --- dtools.js | 36 ++++++++++++++++++++++++++++------- index.html | 55 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 70 insertions(+), 21 deletions(-) diff --git a/dtools.js b/dtools.js index bb0a920..53530db 100644 --- a/dtools.js +++ b/dtools.js @@ -45,11 +45,22 @@ function rect_tool(id){ }; function rect_create(e){ this.rect = this.paper.rect(0,0,0,0); + var strokecolor=document.getElementById("strokecolor").value; + var fillcolor=document.getElementById("fillcolor").value; + if(strokecolor.length!=6) + { + strokecolor="000000"; + } + if(fillcolor.length!=6) + { + fillcolor="ffffff"; + } this.rect.attr({ - "stroke-width":3, + "stroke-width":"3", "stroke-opacity":1, - "fill-opacity":0, - "fill":"white" + "stroke":"#"+strokecolor, + "fill-opacity":.5, + "fill":"#"+fillcolor }); this.rect.drag(this.move, this.start, this.stop, this, this, this); //e.offsetX = undefined workaround for FF @@ -136,11 +147,22 @@ function ellipse_tool(id){ }; function ellipse_create(e){ this.ellipse = this.paper.ellipse(0,0,0,0); + var strokecolor=document.getElementById("strokecolor").value; + var fillcolor=document.getElementById("fillcolor").value; + if(strokecolor.length!=6) + { + strokecolor="000000"; + } + if(fillcolor.length!=6) + { + fillcolor="ffffff"; + } this.ellipse.attr({ - "stroke-width": 3, - "stroke-opacity": 1, - "fill-opacity": 0, - "fill":"white" + "stroke-width":"3", + "stroke-opacity":1, + "stroke":"#"+strokecolor, + "fill-opacity":.5, + "fill":"#"+fillcolor }); this.ellipse.drag(this.move, this.start, this.stop, this, this, this); //e.offsetX = undefined workaround for FF diff --git a/index.html b/index.html index 9c29f2e..559ff16 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,17 @@ } .options{ position:absolute; - top: 530px; - left: 150px; + top:530px; + left:150px; + } + .color_options{ + position:absolute; + top:530px; + left:280px; + } + .color_option{ + margin:5px; + width:50px; } -
- - +
+
+
- Pen Tool
- Ellipse Tool
- Rectangle Tool + Pen Tool +
+ Ellipse Tool +
+ Rectangle Tool
+
- Draw
- Erase
+ Draw +
+ Erase +
+
+
-
+
+ +
+ Stroke color: +
+      + Fill color: +
From 5b93df7f6ea7bc3d4eef251f434e20733e2965b8 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Mon, 11 Feb 2013 21:18:03 -0500 Subject: [PATCH 03/22] fixed a position bug in dtools.js and added a Clear All button --- dtools.js | 26 +++++++++++++++++--------- index.html | 48 +++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 60 insertions(+), 14 deletions(-) diff --git a/dtools.js b/dtools.js index 53530db..49c32e9 100644 --- a/dtools.js +++ b/dtools.js @@ -36,7 +36,7 @@ function rect_tool(id){ if(!e.offsetX){ var bord=document.getElementById("rect").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.update(e.data.rectX,e.data.rectY,e.offsetX,e.offsetY); @@ -69,7 +69,7 @@ function rect_create(e){ if(!e.offsetX){ var bord=document.getElementById("rect").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } this.rectX = e.offsetX; @@ -138,7 +138,7 @@ function ellipse_tool(id){ if(!e.offsetX){ var bord=document.getElementById("ellipse").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.update(e.data.startX, e.data.startY, e.offsetX, e.offsetY); @@ -171,7 +171,7 @@ function ellipse_create(e){ if(!e.offsetX){ var bord=document.getElementById("ellipse").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } this.startX = e.offsetX; @@ -230,7 +230,7 @@ function pen_tool(id){ if(!e.offsetX){ var bord=document.getElementById("pen").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.erase([e.offsetX,e.offsetY]); @@ -252,7 +252,7 @@ function pen_tool(id){ if(!e.offsetX){ var bord=document.getElementById("pen").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.erase([e.offsetX,e.offsetY]); @@ -270,9 +270,9 @@ function pen_down(e){ //DOES NOT TAKE INTO ACCOUNT BORDERS OFFSET //IF BORDER IS LARGE, THE DRAWINGS WILL BE OFF (FIXED) if(!e.offsetX){ - var bord=document.getElementById("pen").style.border; + var bord=document.getElementById("pen").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.xy.push([e.offsetX,e.offsetY]); @@ -284,7 +284,7 @@ function pen_move(e){ if(!e.offsetX){ var bord=document.getElementById("pen").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.ml.push('L'); @@ -315,9 +315,17 @@ function pen_draw(){ this.pathArray = this.paths.split('M') } //console.log("split into paths"); + + var strokecolor=document.getElementById("strokecolor").value; + if(strokecolor.length!=6) + { + strokecolor="000000"; + } + for(var i = 1; i < this.pathArray.length; i++){ this.pathObjects[i-1] = this.paper.path('M'+this.pathArray[i]); this.pathObjects[i-1].attr({ + "stroke":"#"+strokecolor, "stroke-width": 3, "stroke-opacity": 1, "stroke-linejoin":"round", diff --git a/index.html b/index.html index 559ff16..9737957 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,11 @@ margin:5px; width:50px; } + #clear_all_div{ + position:absolute; + top:530px; + left:450px; + } + + + + + + +
+ + + + + + + + + +
+ + From bcd4e54a36e1cf2e46959c92bd31a79b9450c20a Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sun, 24 Feb 2013 13:26:26 -0500 Subject: [PATCH 05/22] added pen/erase functionality to alt.html --- alt.html | 344 +++++++++++++++++++++++++++++++++++++++++---------- dtools.js | 7 +- marquee.html | 234 ++++++++++++++++++----------------- 3 files changed, 406 insertions(+), 179 deletions(-) diff --git a/alt.html b/alt.html index 0a98f58..0fa0404 100644 --- a/alt.html +++ b/alt.html @@ -36,6 +36,12 @@ margin:5px; width:50px; } + #draw_options + { + position:absolute; + top:120px; + left:550px; + } #ellipse_button { position:absolute; @@ -44,6 +50,16 @@ width:80px; height:40px; } + #eraser_button + { + position:absolute; + top:70px; + left:550px; + padding-top:4px; + padding-left:3px; + width:40px; + height:40px; + } .options { position:absolute; @@ -60,6 +76,16 @@ width:40px; height:40px; } + #manip_button + { + position:absolute; + top:70px; + left:600px; + padding-top:4px; + padding-left:3px; + width:170px; + height:40px; + } #rect_button { position:absolute; @@ -71,13 +97,28 @@ #test_layers_div { position:absolute; - top:200px; - left:700px; + top:550px; + left:20px; }
+ onclick="set_mode(1)">pen + + + + + +
+ Pen color: + +
+ Pen opacity: + +
+ Rectangle stroke color: + +
+ Rectangle stroke opacity: + +
+ Rectangle fill color: + +
+ Rectangle fill opacity: + +
+ Ellipse stroke color: + +
+ Ellipse stroke opacity: + +
+ Ellipse fill color: + +
+ Ellipse fill opacity: + +
diff --git a/dtools.js b/dtools.js index 49c32e9..66f0878 100644 --- a/dtools.js +++ b/dtools.js @@ -22,6 +22,7 @@ function rect_tool(id){ //console.log("mouse up!"); e.data.click = false; e.data.drawn = true; + }).mouseleave(this,function(e){ //disabled becuase of IE bug which thinks //hitting raphael objects is a mouseleave @@ -36,8 +37,8 @@ function rect_tool(id){ if(!e.offsetX){ var bord=document.getElementById("rect").style.border; var bordpx=parseInt(bord); - e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); - e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); + e.offsetX = (e.pageX - $(e.delegateTarget).position().left-bordpx); + e.offsetY = (e.pageY - $(e.delegateTarget).position().top-bordpx); } e.data.update(e.data.rectX,e.data.rectY,e.offsetX,e.offsetY); } @@ -260,7 +261,7 @@ function pen_tool(id){ else{ e.data.pen_move(e) } - } + } }); }; diff --git a/marquee.html b/marquee.html index ceca115..7ec56b0 100755 --- a/marquee.html +++ b/marquee.html @@ -81,67 +81,79 @@ .resizable({disabled: true}) .css({opacity: 1}); - $("#canvas").mousedown(function(e){ - if(mode === 4){ - return - } - click = true; - switch(mode) { - case 0: - ml.push('M'); - xy.push([e.offsetX,e.offsetY]); - break; - case 1: - rect = createRect(); - rectX = e.offsetX; - rectY = e.offsetY; - break; - case 2: - spot = createSpot(); - rectX = e.offsetX; - rectY = e.offsetY; - break; - case 3: - erase([e.offsetX,e.offsetY]); - break; - } - }).mouseup(function(){ - if(mode === 4){ - return - } - click = false; - }).mouseleave(function(){ - if(mode === 4){ - return - } - if(click === true){ + $("#canvas").mousedown(function(e) + { + if(mode === 4) + { + return + } + click = true; + switch(mode) + { + case 0: + ml.push('M'); + xy.push([e.offsetX,e.offsetY]); + break; + case 1: + rect = createRect(); + rectX = e.offsetX; + rectY = e.offsetY; + break; + case 2: + spot = createSpot(); + rectX = e.offsetX; + rectY = e.offsetY; + break; + case 3: + erase([e.offsetX,e.offsetY]); + break; + } + }).mouseup(function() + { + if(mode === 4) + { + return + } click = false; - } - }).mousemove(function(e){ - if(mode === 4){ - return - } - $("#canvas").css('cursor','crosshair'); - if(click === false) - return; - switch(mode){ - case 0: - ml.push('L'); - xy.push([e.offsetX,e.offsetY]); - drawPaths(); - break; - case 1: - updateRect(rect, rectX, rectY, e.offsetX, e.offsetY); - break; - case 2: - updateSpot(spot, rectX, rectY, e.offsetX, e.offsetY); - break; - case 3: - erase([e.offsetX,e.offsetY]); - break; - } - }).hover(function(e){ - $("#canvas").css('cursor', "pointer") + }).mouseleave(function() + { + if(mode === 4) + { + return + } + if(click === true) + { + click = false; + } + }).mousemove(function(e) + { + if(mode === 4) + { + return + } + $("#canvas").css('cursor','crosshair'); + if(click === false) + return; + switch(mode) + { + case 0: + ml.push('L'); + xy.push([e.offsetX,e.offsetY]); + drawPaths(); + break; + case 1: + updateRect(rect, rectX, rectY, e.offsetX, e.offsetY); + break; + case 2: + updateSpot(spot, rectX, rectY, e.offsetX, e.offsetY); + break; + case 3: + erase([e.offsetX,e.offsetY]); + break; + } + }).hover(function(e) + { + $("#canvas").css('cursor', "pointer") }); function setmode(new_mode){ @@ -152,37 +164,37 @@ console.log("mode set to: " + mode); }; - function drawPaths(){ - var paths; - //removes all objects in pathObjects to be redrawn - var len = pathObjects.length; - for(var i = 0; i < pathObjects.length; i++){ - pathObjects[i].remove(); - } - for(var i = 0; i < len; i++){ - pathObjects.shift(); - } - for(var i = 0; i < ml.length; i ++){ - if(ml[i] !== 'X'){ - paths += ml[i] + xy[i][0] + ',' + xy[i][1];; - } - } - if(paths.length > 0){ - var path = paths.split('M'); - //console.log(path); - //console.log(path.length-1); - } - for(var i = 1; i < path.length; i++){ - var drawing = paper.path('M'+path[i]); - drawing.attr({ - "stroke-width": strokeWidth, - "stroke-opacity": opacity, - "stroke-linejoin":"round", - "stroke-linecap":"round" - }) - pathObjects.push(drawing); - } - //console.log(pathObjects.length); + function drawPaths() + { + var paths; + //removes all objects in pathObjects to be redrawn + var len = pathObjects.length; + for(var i = 0; i < pathObjects.length; i++){ + pathObjects[i].remove(); + } + for(var i = 0; i < len; i++){ + pathObjects.shift(); + } + for(var i = 0; i < ml.length; i ++){ + if(ml[i] !== 'X'){ + paths += ml[i] + xy[i][0] + ',' + xy[i][1];; + } + } + if(paths.length > 0){ + var path = paths.split('M'); + //console.log(path); + //console.log(path.length-1); + } + for(var i = 1; i < path.length; i++){ + var drawing = paper.path('M'+path[i]); + drawing.attr({ + "stroke-width": strokeWidth, + "stroke-opacity": opacity, + "stroke-linejoin":"round", + "stroke-linecap":"round" + }) + pathObjects.push(drawing); + } } function clearPaths(){ @@ -264,27 +276,27 @@ }); } - function erase(location){ - var range = 10 - //console.log("searching " + location[0] + ',' + location[1]); - for(var i = 0; i < xy.length; i++){ - if(location[0] - range <= xy[i][0] && xy[i][0] <= location[0] + range){ - if(location[1] - range <= xy[i][1] && xy[i][1] <= location[1] + range){ - console.log("MATCH FOUND"); - if(ml[i+1] === 'L'){ - ml[i+1] = 'M'; - } - ml.splice(i,1); - xy.splice(i,1); - - //ml[i] = 'X'; - //if(ml[i+1] === 'L'){ - //ml[i+1] = 'M'; - //} - drawPaths(); - } + function erase(location) + { + var range = 10 + //console.log("searching " + location[0] + ',' + location[1]); + for(var i = 0; i < xy.length; i++) + { + if(location[0] - range <= xy[i][0] && xy[i][0] <= location[0] + range) + { + if(location[1] - range <= xy[i][1] && xy[i][1] <= location[1] + range) + { + console.log("MATCH FOUND"); + if(ml[i+1] === 'L') + { + ml[i+1] = 'M'; + } + ml.splice(i,1); + xy.splice(i,1); + drawPaths(); + } + } } - } } function setDraggable(option){ From 9d41f9a8afacd3f57f455ea355c1a399690ec19d Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sun, 24 Feb 2013 16:32:55 -0500 Subject: [PATCH 06/22] added basic marquee functionality --- alt.html | 363 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 330 insertions(+), 33 deletions(-) diff --git a/alt.html b/alt.html index 0fa0404..5504149 100644 --- a/alt.html +++ b/alt.html @@ -60,6 +60,40 @@ width:40px; height:40px; } + #manip_shapes_button + { + position:absolute; + top:70px; + left:600px; + padding-top:4px; + padding-left:3px; + width:170px; + height:40px; + } + #manip_marquee_button + { + position:absolute; + top:70px; + left:780px; + padding-top:4px; + padding-left:3px; + width:170px; + height:40px; + } + #marquee_button + { + position:absolute; + top:20px; + left:780px; + width:80px; + height:40px; + } + #mode_div + { + position:absolute; + top:550px; + left:400px; + } .options { position:absolute; @@ -76,16 +110,6 @@ width:40px; height:40px; } - #manip_button - { - position:absolute; - top:70px; - left:600px; - padding-top:4px; - padding-left:3px; - width:170px; - height:40px; - } #rect_button { position:absolute; @@ -100,22 +124,29 @@ top:550px; left:20px; } + #toggle_marquees_button + { + position:absolute; + top:20px; + left:870px; + width:80px; + height:40px; + } @@ -402,9 +687,19 @@ - + + + + + + + @@ -450,6 +745,8 @@ value=".5" />
+
mode: shapes
+ From 4b30eebb3447efcad206443832dcc1bf7d58e589 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sun, 24 Feb 2013 16:49:54 -0500 Subject: [PATCH 07/22] marquees with fill colors --- alt.html | 59 ++++++++++++++++++++++---------------------------------- 1 file changed, 23 insertions(+), 36 deletions(-) diff --git a/alt.html b/alt.html index 5504149..273580a 100644 --- a/alt.html +++ b/alt.html @@ -259,19 +259,28 @@ elt.mouseover(function(){ if(!noglow && (mode==3)) { - gl=elt.glow({"width":15,"color":"#33ff00","opacity":.8}); + gl=elt.glow({"width":10,"color":"#33ff00","opacity":.8}); } - }) + }); elt.mouseout(function(){ gl.remove(); - }) + }); elt.attr({ - "stroke-width":5, + "stroke-width":1, "stroke":"#222222", - "fill":"#ffff00", - "fill-opacity":.5 + "fill":"#ffffff", + "fill-opacity":"0" + }); + var mset=paper.set(); + mset.push(marq.rn,marq.re,marq.rs,marq.rw); + mset.attr({ + "stroke-width":1, + "stroke":"#222222", + "fill":"#222222", + "fill-opacity":".8" }); + //drag(move, start, stop,...) elt.drag(function(dx,dy,mousex,mousey){ //onmove @@ -453,36 +462,6 @@ m.rc.show(); } } - - function updateSpot(array, startX, startY, endX, endY) - { - var canvasWidth = $("#canvas").width(); - var canvasHeight = $("#canvas").height(); - array[0].attr({ - x: 0, - y: 0, - width: canvasWidth, - height: Math.min(endY,startY), - }); - array[1].attr({ - x: 0, - y: Math.min(endY,startY), - width: Math.min(startX, endX), - height: Math.abs(endY-startY) - }); - array[2].attr({ - x: Math.max(endX, startX), - y: Math.min(endY, startY), - width: canvasHeight - Math.max(startX, endX), - height: Math.abs(endY-startY) - }); - array[3].attr({ - x: 0, - y: Math.max(endY, startY), - width: canvasWidth, - height: canvasHeight - Math.max(endY, startY) - }); - } function drawPaths() { @@ -743,6 +722,14 @@ Ellipse fill opacity: +
+ Marquee fill: + +
+ Marquee opacity: +
mode: shapes
From 0791e958de8233f43ada6654522ae473193d7347 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sun, 24 Feb 2013 17:48:19 -0500 Subject: [PATCH 08/22] fixed marquee rectangles --- alt.html | 72 +++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 27 deletions(-) diff --git a/alt.html b/alt.html index 273580a..9f03102 100644 --- a/alt.html +++ b/alt.html @@ -221,8 +221,18 @@ origmousex=x; origmousey=y; var bbox=this.getBBox(); - document.getElementById("test_layers_div").innerHTML="x = "+x+"
bbox.x = "+(bbox.x)+"
y = "+y+"
bbox.y = "+(bbox.y); - if((x>(bbox.x+bbox.width*0.75)) && (y>(bbox.y+bbox.height*0.75))) + resize=0; + var canvx=parseInt($("#canv").css("left")); + var canvbx=parseInt($("#canv").css("border-left")); + var canvy=parseInt($("#canv").css("top")); + var canvby=parseInt($("#canv").css("border-top")); + + document.getElementById("test_layers_div").innerHTML="x = "+x+"
\ + relevant x = "+(bbox.x+bbox.width+canvx+canvbx)+"
y = "+y+"
\ + relevant y = "+(bbox.y+bbox.height+canvy+canvby)+"
canvx = "+canvx+"\ +
canvbx = "+canvbx+"
canvy = "+canvy+"\ +
canvby = "+canvby; + if((x>(bbox.x+bbox.width*0.75+canvx+canvbx)) && (y>(bbox.y+bbox.height*0.75+canvy+canvby))) { resize=1; } @@ -266,7 +276,7 @@ gl.remove(); }); elt.attr({ - "stroke-width":1, + "stroke-width":0, "stroke":"#222222", "fill":"#ffffff", "fill-opacity":"0" @@ -274,7 +284,7 @@ var mset=paper.set(); mset.push(marq.rn,marq.re,marq.rs,marq.rw); mset.attr({ - "stroke-width":1, + "stroke-width":0, "stroke":"#222222", "fill":"#222222", "fill-opacity":".8" @@ -290,23 +300,11 @@ var bbox=this.getBBox(); if(!resize) { - //drag an element + //drag an marquee -- need to update all relevant rectangles var currx=parseInt(this.data("currx"));//x position at the start of drag var curry=parseInt(this.data("curry")); var xpos=currx+dx; //to get new x position, just add dx var ypos=curry+dy; - // marq.rn.attr({ - // height:ypos - // }); - // marq.re.attr({ - // width:w-xpos-bbox.width - // }); - // marq.rs.attr({ - // height:h-ypos-bbox.height - // }); - // marq.rw.attr({ - // width:xpos - // }) this.attr({ x:xpos, y:ypos @@ -316,20 +314,24 @@ }); marq.re.attr({ x:xpos+bbox.width, - width:w-(xpos+bbox.width) + y:ypos, + width:w-(xpos+bbox.width), + height:bbox.height }); marq.rs.attr({ y:ypos+bbox.height, height:h-(ypos+bbox.height) }) marq.rw.attr({ - width:xpos + y:ypos, + width:xpos, + height:bbox.height }) } else { - //resize an element + //resize a marquee -- need to update all relevant rectangle this.attr({ width:bbox.width+mousex-origmousex, height:bbox.height+mousey-origmousey @@ -340,7 +342,11 @@ }); marq.re.attr({ x:bbox.x+bbox.width+mousex-origmousex, - width:w-(bbox.x+bbox.width+mousex-origmousex) + width:w-(bbox.x+bbox.width+mousex-origmousex), + height:bbox.height+mousey-origmousey + }) + marq.rw.attr({ + height:bbox.height+mousey-origmousey }) } origmousex=mousex; @@ -353,8 +359,12 @@ origmousex=x; origmousey=y; var bbox=this.getBBox(); + var canvx=parseInt($("#canv").css("left")); + var canvbx=parseInt($("#canv").css("border-left")); + var canvy=parseInt($("#canv").css("top")); + var canvby=parseInt($("#canv").css("border-top")); document.getElementById("test_layers_div").innerHTML="x = "+x+"
bbox.x = "+(bbox.x)+"
y = "+y+"
bbox.y = "+(bbox.y); - if((x>(bbox.x+bbox.width*0.75)) && (y>(bbox.y+bbox.height*0.75))) + if((x>(bbox.x+bbox.width*0.75+canvx+canvbx)) && (y>(bbox.y+bbox.height*0.75+canvy+canvby))) { resize=1; } @@ -413,15 +423,15 @@ var rn=paper.rect(0,0,w,topy); rn.data("currx",0); rn.data("curry",0); - var re=paper.rect(botx,0,w-botx,h); + var re=paper.rect(botx,topy,w-botx,boty-topy); re.data("currx",botx); - re.data("curry",0); + re.data("curry",topy); var rs=paper.rect(0,boty,w,h-boty); rs.data("currx",0); rs.data("curry",boty); - var rw=paper.rect(0,0,topx,h); + var rw=paper.rect(0,topy,topx,boty-topy); rw.data("currx",0); - rw.data("curry",0); + rw.data("curry",topy); var rc=paper.rect(topx,topy,botx-topx,boty-topy); rc.data("currx",topx); rc.data("curry",topy); @@ -555,10 +565,14 @@ } }).mousemove(function(e) { - if(mode) + if((mode==1) || (mode==2)) { $("#canv").css('cursor','crosshair'); } + else + { + $("#canv").css('cursor','pointer'); + } if(click === false) return; switch(mode) @@ -691,6 +705,10 @@
+ Eraser width: + +
Rectangle stroke color: From 11e22c47e78b8a2b8623e64432eeef540136f848 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sun, 24 Feb 2013 18:21:40 -0500 Subject: [PATCH 09/22] color options added --- alt.html | 79 +++++++++++++++++++++++++++++--------------------------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/alt.html b/alt.html index 9f03102..2e554be 100644 --- a/alt.html +++ b/alt.html @@ -164,6 +164,11 @@ var noglow=0; //if 1, glowing is disabled var origmousex; var origmousey; + var strokeWidth=document.getElementById("shape_stroke_width").value; + var strokeColor=document.getElementById("shape_stroke_color").value; + var strokeOpacity=document.getElementById("shape_stroke_opacity").value; + var fillColor=document.getElementById("shape_fill_color").value; + var fillOpacity=document.getElementById("shape_fill_opacity").value; elt.mouseover(function(){ if(!noglow && (mode==0)) { @@ -174,10 +179,11 @@ gl.remove(); }) elt.attr({ - "stroke-width":5, - "stroke":"#222222", - "fill":"#ffff00", - "fill-opacity":.5 + "stroke-width":strokeWidth, + "stroke":"#"+strokeColor, + "stroke-opacity":strokeOpacity, + "fill":"#"+fillColor, + "fill-opacity":fillOpacity }); //drag(move, start, stop,...) @@ -265,7 +271,9 @@ var origmousey; var w=parseInt($('#canv').css("width")); var h=parseInt($('#canv').css("height")); - + var marqFillColor=document.getElementById("marq_color").value; + var marqFillOpacity=document.getElementById("marq_opacity").value; + elt.mouseover(function(){ if(!noglow && (mode==3)) { @@ -286,8 +294,8 @@ mset.attr({ "stroke-width":0, "stroke":"#222222", - "fill":"#222222", - "fill-opacity":".8" + "fill":"#"+marqFillColor, + "fill-opacity":marqFillOpacity }); @@ -416,7 +424,7 @@ function add_marquee() { set_mode(3); - var topx=40+Math.floor(Math.random()*10), botx=80+Math.floor(Math.random()*10), topy=40+Math.floor(Math.random()*10), boty=80+Math.floor(Math.random()*10); + var topx=200+Math.floor(Math.random()*10), botx=300+Math.floor(Math.random()*10), topy=200+Math.floor(Math.random()*10), boty=300+Math.floor(Math.random()*10); //var topx=40, botx=80, topy=40, boty=80; var w=parseInt($('#canv').css("width")); var h=parseInt($('#canv').css("height")); @@ -475,7 +483,9 @@ function drawPaths() { - + var strokeColor=document.getElementById("pen_color").value; + var strokeOpacity=document.getElementById("pen_opacity").value; + var strokeWidth=document.getElementById("pen_width").value; var paths; //removes all objects in pathObjects to be redrawn var len = pathObjects.length; @@ -502,8 +512,9 @@ { var drawing = paper.path('M'+path[i]); drawing.attr({ - "stroke-width": strokeWidth, - "stroke-opacity": opacity, + "stroke-width":strokeWidth, + "stroke-opacity":strokeOpacity, + "stroke":"#"+strokeColor, "stroke-linejoin":"round", "stroke-linecap":"round" }) @@ -513,7 +524,7 @@ function erase(location) { - var range=5; + var range=parseInt(document.getElementById("eraser_width").value); for(var i = 0; i < xy.length; i++) { if(location[0] - range <= xy[i][0] && xy[i][0] <= location[0] + range) @@ -705,48 +716,40 @@
+ Pen width: + +
Eraser width:
- Rectangle stroke color: - -
- Rectangle stroke opacity: - -
- Rectangle fill color: - -
- Rectangle fill opacity: - + Shape stroke width: +
- Ellipse stroke color: -
- Ellipse stroke opacity: -
- Ellipse fill color: -
- Ellipse fill opacity: -
Marquee fill: - +
Marquee opacity: - From a0f60001635db5b5790ef8c4b4a7d3af2656db43 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Mon, 25 Feb 2013 20:42:30 -0500 Subject: [PATCH 10/22] modified the readme --- README.md | 11 ++++++++++- alt.html | 5 +++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dffe9cd..9f183af 100644 --- a/README.md +++ b/README.md @@ -11,4 +11,13 @@ This is a drawing tool I created for LADS, a project I was working on with the B ## Todo - Allow resizing of shapes - Better layer manipulation - - More drawing options \ No newline at end of file + - More drawing options + + # alt.html README + ================= + The alt.html file contains modified drawing tools. Drawing is not done in layers, so arbitrary numbers + of rectangles and ellipses are allowed. Shapes can be dragged and resized (by dragging the lower right corner + of the shape). Similar to the marquee.html file, there is a marquee tool. Marquees can be manipulated in the + same way as rectangles and ellipses. Multiple marquees can be applied, but since marquees completely cover + the canvas, it is impossible to manipulate any but the most recent. The settings for the drawing tools are + provided by the user. \ No newline at end of file diff --git a/alt.html b/alt.html index 2e554be..61d566c 100644 --- a/alt.html +++ b/alt.html @@ -224,6 +224,7 @@ },function(x,y){ if(!mode) { + origmousex=x; origmousey=y; var bbox=this.getBBox(); @@ -339,7 +340,7 @@ } else { - //resize a marquee -- need to update all relevant rectangle + //resize a marquee -- need to update all relevant rectangles this.attr({ width:bbox.width+mousex-origmousex, height:bbox.height+mousey-origmousey @@ -388,9 +389,9 @@ this.data("curry",this.getBBox().y); marq.re.data("currx",this.getBBox().x+this.getBBox().width); marq.rs.data("curry",this.getBBox().y+this.getBBox().height); - noglow=0; resize=0; this.animate({opacity:1},500,"<>"); + noglow=0; } }); } From 02db1dfa0b2dd4cc50e91e12d4a50072957f9d07 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Tue, 26 Feb 2013 18:50:03 -0500 Subject: [PATCH 11/22] get attributes in a string to export --- alt.html | 93 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 79 insertions(+), 14 deletions(-) diff --git a/alt.html b/alt.html index 61d566c..db4a586 100644 --- a/alt.html +++ b/alt.html @@ -25,6 +25,14 @@ width:80px; height:40px; } + #show_datastring_button + { + position:absolute; + top:420px; + left:550px; + width:80px; + height:40px; + } .color_options { position:absolute; @@ -121,7 +129,7 @@ #test_layers_div { position:absolute; - top:550px; + top:580px; left:20px; } #toggle_marquees_button @@ -136,7 +144,7 @@ @@ -758,6 +820,9 @@ + +
From c4b54db13822be68e1162ddbea469c7a082dff7f Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Tue, 26 Feb 2013 23:23:20 -0500 Subject: [PATCH 12/22] put javascript in alt.js, css in alt.css, and added functionality to return string with shape info --- alt.css | 133 ++++++++++ alt.html | 743 +------------------------------------------------------ alt.js | 598 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 736 insertions(+), 738 deletions(-) create mode 100644 alt.css create mode 100644 alt.js diff --git a/alt.css b/alt.css new file mode 100644 index 0000000..2dbdad3 --- /dev/null +++ b/alt.css @@ -0,0 +1,133 @@ +#canv +{ + position:absolute; + left:10px; + top:25px; + height:500px; + width:500px; + border:10px solid blue; + z-index:0 +} +#clear_button +{ + position:absolute; + top:470px; + left:550px; + width:80px; + height:40px; +} +.color_option +{ + margin:5px; + width:50px; +} +.color_options +{ + position:absolute; + top:530px; + left:700px; +} +#draw_options +{ + position:absolute; + top:120px; + left:550px; +} +#ellipse_button +{ + position:absolute; + top:20px; + left:690px; + width:80px; + height:40px; +} +#eraser_button +{ + position:absolute; + top:70px; + left:550px; + padding-top:4px; + padding-left:3px; + width:40px; + height:40px; +} +#manip_marquee_button +{ + position:absolute; + top:70px; + left:780px; + padding-top:4px; + padding-left:3px; + width:170px; + height:40px; +} +#manip_shapes_button +{ + position:absolute; + top:70px; + left:600px; + padding-top:4px; + padding-left:3px; + width:170px; + height:40px; +} +#marquee_button +{ + position:absolute; + top:20px; + left:780px; + width:80px; + height:40px; +} +#mode_div +{ + position:absolute; + top:550px; + left:400px; +} +.options +{ + position:absolute; + top:600px; + left:600px; +} +#pen_button +{ + position:absolute; + top:20px; + left:550px; + padding-top:4px; + padding-left:3px; + width:40px; + height:40px; +} +#rect_button +{ + position:absolute; + top:20px; + left:600px; + width:80px; + height:40px; +} +#show_datastring_button +{ + position:absolute; + top:420px; + left:550px; + width:80px; + height:40px; +} +#test_layers_div +{ + position:absolute; + top:580px; + left:20px; +} +#toggle_marquees_button +{ + position:absolute; + top:20px; + left:870px; + width:80px; + height:40px; +} \ No newline at end of file diff --git a/alt.html b/alt.html index db4a586..d8ecbb9 100644 --- a/alt.html +++ b/alt.html @@ -1,747 +1,14 @@ -Index3 +Drawing Tool - - - + + +
@@ -826,4 +93,4 @@
- + \ No newline at end of file diff --git a/alt.js b/alt.js new file mode 100644 index 0000000..217c91b --- /dev/null +++ b/alt.js @@ -0,0 +1,598 @@ +window.onload = load; +var paper; +var mode=1; +var click; +var ml=[]; +var xy=[]; +var paths=[]; +var pathObjects=[]; +var strokeWidth=10; +var opacity=1; +var marquees=[]; +var marquees_on=1; +var currpaths=""; //this will be the string representing all of our paths + //to get the paths individually, split at 'M' +var pathattrs=""; +var datastring=""; + +//if the pointer icon is clicked, switch to default mode (0) +//if the pen icon is clicked, switch to pen mode (1) +//if the eraser icon is clicked, switch to eraser mode (2) + +function add_attributes(elt) +{ + //var strokewidth=document.getElementById("strokewidth"); + //var strokecolor=document.getElementById("strokecolor"); + //var fillcolor=document.getElementById("fillcolor"); + //var fillopacity=document.getElementById("fillopacity"); + //$("#canvas").mousedown(); + var canv=document.getElementById("canv"); + var gl; + var resize=0; //if 1, we are in zoom mode rather than pan mode + var noglow=0; //if 1, glowing is disabled + var origmousex; + var origmousey; + var strokeWidth=document.getElementById("shape_stroke_width").value; + var strokeColor=document.getElementById("shape_stroke_color").value; + var strokeOpacity=document.getElementById("shape_stroke_opacity").value; + var fillColor=document.getElementById("shape_fill_color").value; + var fillOpacity=document.getElementById("shape_fill_opacity").value; + elt.mouseover(function(){ + if(!noglow && (mode==0)) + { + gl=elt.glow({"width":15,"color":"#33ff00","opacity":.8}); + } + }) + elt.mouseout(function(){ + gl.remove(); + }) + elt.attr({ + "stroke-width":strokeWidth, + "stroke":"#"+strokeColor, + "stroke-opacity":strokeOpacity, + "fill":"#"+fillColor, + "fill-opacity":fillOpacity + }); + + //drag(move, start, stop,...) + elt.drag(function(dx,dy,mousex,mousey){ + if(!mode) + { + this.toFront(); + if(!resize) + { + //drag an element + var currx=parseInt(this.data("currx"));//x position at the start of drag + var curry=parseInt(this.data("curry")); + var xpos=currx+dx; //to get new x position, just add dx + var ypos=curry+dy; + this.attr({ + cx:xpos+parseInt(this.data("curr_rx")), //xcenter is left+xradius + cy:ypos+parseInt(this.data("curr_ry")), //ycenter is top+yradius + x:xpos, + y:ypos + }); + } + else + { + //resize an element + var bbox=this.getBBox(); + this.attr({ + cx:bbox.x+bbox.width*0.5+(mousex-origmousex)*0.5, + cy:bbox.y+bbox.height*0.5+(mousey-origmousey)*0.5, + rx:bbox.width/2.0+(mousex-origmousex)*0.5, + ry:bbox.height/2.0+(mousey-origmousey)*0.5, + width:bbox.width+mousex-origmousex, + height:bbox.height+mousey-origmousey + }); + } + origmousex=mousex; + origmousey=mousey; + } + },function(x,y){ + if(!mode) + { + + origmousex=x; + origmousey=y; + var bbox=this.getBBox(); + resize=0; + var canvx=parseInt($("#canv").css("left")); + var canvbx=parseInt($("#canv").css("border-left")); + var canvy=parseInt($("#canv").css("top")); + var canvby=parseInt($("#canv").css("border-top")); + + // document.getElementById("test_layers_div").innerHTML="x = "+x+"
\ + // relevant x = "+(bbox.x+bbox.width+canvx+canvbx)+"
y = "+y+"
\ + // relevant y = "+(bbox.y+bbox.height+canvy+canvby)+"
canvx = "+canvx+"\ + //
canvbx = "+canvbx+"
canvy = "+canvy+"\ + //
canvby = "+canvby; + if((x>(bbox.x+bbox.width*0.5+canvx+canvbx)) && (y>(bbox.y+bbox.height*0.5+canvy+canvby))) + { + resize=1; + } + gl.remove(); + noglow=1; + this.animate({opacity:.25},500,"<>"); + } + },function(){ + if(!mode) + { + this.data("currx",this.getBBox().x); //reset data using bounding box coords + this.data("curry",this.getBBox().y); + this.data("curr_rx",this.getBBox().width/2.0); + this.data("curr_ry",this.getBBox().height/2.0); + noglow=0; + resize=0; + this.animate({opacity:1},500,"<>"); + } + }); +} + +function add_marq_attributes(marq) +{ + var elt=marq.rc; + var canv=document.getElementById("canv"); + var gl; + var resize=0; //if 1, we are in zoom mode rather than pan mode + var noglow=0; //if 1, glowing is disabled + var origmousex; + var origmousey; + var w=parseInt($('#canv').css("width")); + var h=parseInt($('#canv').css("height")); + var marqFillColor=document.getElementById("marq_color").value; + var marqFillOpacity=document.getElementById("marq_opacity").value; + + elt.mouseover(function(){ + if(!noglow && (mode==3)) + { + gl=elt.glow({"width":10,"color":"#33ff00","opacity":.8}); + } + }); + elt.mouseout(function(){ + gl.remove(); + }); + elt.attr({ + "stroke-width":0, + "stroke":"#222222", + "fill":"#ffffff", + "fill-opacity":"0" + }); + elt.data("surr-fill","#"+marqFillColor); + elt.data("surr-opac",marqFillOpacity); + var mset=paper.set(); + mset.push(marq.rn,marq.re,marq.rs,marq.rw); + mset.attr({ + "stroke-width":0, + "stroke":"#222222", + "fill":"#"+marqFillColor, + "fill-opacity":marqFillOpacity + }); + + + //drag(move, start, stop,...) + elt.drag(function(dx,dy,mousex,mousey){ + //onmove + if(mode==3) + { + this.toFront(); + var bbox=this.getBBox(); + if(!resize) + { + //drag an marquee -- need to update all relevant rectangles + var currx=parseInt(this.data("currx"));//x position at the start of drag + var curry=parseInt(this.data("curry")); + var xpos=currx+dx; //to get new x position, just add dx + var ypos=curry+dy; + this.attr({ + x:xpos, + y:ypos + }); + marq.rn.attr({ + height:ypos + }); + marq.re.attr({ + x:xpos+bbox.width, + y:ypos, + width:w-(xpos+bbox.width), + height:bbox.height + }); + marq.rs.attr({ + y:ypos+bbox.height, + height:h-(ypos+bbox.height) + }) + marq.rw.attr({ + y:ypos, + width:xpos, + height:bbox.height + }) + + } + else + { + //resize a marquee -- need to update all relevant rectangles + this.attr({ + width:bbox.width+mousex-origmousex, + height:bbox.height+mousey-origmousey + }); + marq.rs.attr({ + y:bbox.y+bbox.height+mousey-origmousey, + height:h-(bbox.y+bbox.height+mousey-origmousey) + }); + marq.re.attr({ + x:bbox.x+bbox.width+mousex-origmousex, + width:w-(bbox.x+bbox.width+mousex-origmousex), + height:bbox.height+mousey-origmousey + }) + marq.rw.attr({ + height:bbox.height+mousey-origmousey + }) + } + origmousex=mousex; + origmousey=mousey; + } + },function(x,y){ + //onstart + if(mode==3) + { + origmousex=x; + origmousey=y; + var bbox=this.getBBox(); + var canvx=parseInt($("#canv").css("left")); + var canvbx=parseInt($("#canv").css("border-left")); + var canvy=parseInt($("#canv").css("top")); + var canvby=parseInt($("#canv").css("border-top")); + //document.getElementById("test_layers_div").innerHTML="x = "+x+"
bbox.x = "+(bbox.x)+"
y = "+y+"
bbox.y = "+(bbox.y); + if((x>(bbox.x+bbox.width*0.5+canvx+canvbx)) && (y>(bbox.y+bbox.height*0.5+canvy+canvby))) + { + resize=1; + } + gl.remove(); + noglow=1; + this.animate({opacity:.25},500,"<>"); + } + },function(){ + //onend + if(mode==3) + { + this.data("currx",this.getBBox().x); //reset data using bounding box coords + this.data("curry",this.getBBox().y); + marq.re.data("currx",this.getBBox().x+this.getBBox().width); + marq.rs.data("curry",this.getBBox().y+this.getBBox().height); + resize=0; + this.animate({opacity:1},500,"<>"); + noglow=0; + } + }); +} + +function add_rectangle() +{ + set_mode(0); + var x=Math.floor(Math.random()*300); + var y=Math.floor(Math.random()*300); + rect=paper.rect(x,y,50,50); + rect.data("currx",x); + rect.data("curry",y); + rect.data("type","rect"); + add_attributes(rect); +} + +function add_ellipse() +{ + set_mode(0); + var x=Math.floor(Math.random()*300); + var y=Math.floor(Math.random()*300); + var rx=20+Math.floor(Math.random()*40); + var ry=20+Math.floor(Math.random()*40); + ellipse=paper.ellipse(x,y,rx,ry); + ellipse.data("currx",ellipse.getBBox().x); + ellipse.data("curry",ellipse.getBBox().y); + ellipse.data("curr_rx",rx); + ellipse.data("curr_ry",ry); + ellipse.data("type","ellipse"); + add_attributes(ellipse); +} + +function add_marquee() +{ + set_mode(3); + var topx=200+Math.floor(Math.random()*10), botx=300+Math.floor(Math.random()*10), topy=200+Math.floor(Math.random()*10), boty=300+Math.floor(Math.random()*10); + //var topx=40, botx=80, topy=40, boty=80; + var w=parseInt($('#canv').css("width")); + var h=parseInt($('#canv').css("height")); + var rn=paper.rect(0,0,w,topy); + rn.data("currx",0); + rn.data("curry",0); + var re=paper.rect(botx,topy,w-botx,boty-topy); + re.data("currx",botx); + re.data("curry",topy); + var rs=paper.rect(0,boty,w,h-boty); + rs.data("currx",0); + rs.data("curry",boty); + var rw=paper.rect(0,topy,topx,boty-topy); + rw.data("currx",0); + rw.data("curry",topy); + var rc=paper.rect(topx,topy,botx-topx,boty-topy); + rc.data("currx",topx); + rc.data("curry",topy); + rc.data("type","marquee"); + var m=new marquee(rn,re,rs,rw,rc); + add_marq_attributes(m); + marquees.push(m); + show_marquees(); + marquees_on=1; + // var elt=document.getElementById("test_layers_div"); + // elt.innerHTML=marquees; +} + +function hide_marquees() +{ + var i; + var len=marquees.length; + for(i=0;i 0) + { + var path = paths.split('M'); + } + for(var i = 1; i < path.length; i++) + { + var drawing = paper.path('M'+path[i]); + drawing.data("type","path"); + drawing.attr({ + "stroke-width":strokeWidth, + "stroke-opacity":strokeOpacity, + "stroke":"#"+strokeColor, + "stroke-linejoin":"round", + "stroke-linecap":"round" + }) + pathObjects.push(drawing); + } + currpaths=paths; + pathattrs="[stroke]"+strokeColor+"[strokeo]"+strokeOpacity+"[strokew]"+strokeWidth; +} + +function erase(location) +{ + var range=parseInt(document.getElementById("eraser_width").value); + for(var i = 0; i < xy.length; i++) + { + if(location[0] - range <= xy[i][0] && xy[i][0] <= location[0] + range) + { + if(location[1] - range <= xy[i][1] && xy[i][1] <= location[1] + range) + { + if(ml[i+1] === 'L') + { + ml[i+1] = 'M'; + } + ml.splice(i,1); + xy.splice(i,1); + drawPaths(); + } + } + } +} + +function load() +{ + paper=Raphael(document.getElementById("canv"),500,500); + set_up_icons(); + set_mode(1); + $("#canv").mousedown(function(e) + { + click = true; + switch(mode) + { + case 1: + ml.push('M'); + xy.push([e.offsetX,e.offsetY]); + ml.push('L'); //to allow drawing single dots + xy.push([e.offsetX,e.offsetY]); + drawPaths(); + //document.getElementById("test_layers_div").innerHTML="ml = "+ml+"
xy = "+xy; + break; + case 2: + erase([e.offsetX,e.offsetY]); + break; + } + //update_datastring(); + //document.getElementById("test_layers_div").innerHTML+="
currpaths = "+currpaths.split("undefined")[1]; + }).mouseup(function() + { + click = false; + }).mouseleave(function() + { + if(click === true) + { + click = false; + } + }).mousemove(function(e) + { + if((mode==1) || (mode==2)) + { + $("#canv").css('cursor','crosshair'); + } + else + { + $("#canv").css('cursor','pointer'); + } + if(click === false) + return; + switch(mode) + { + case 1: + ml.push('L'); + xy.push([e.offsetX,e.offsetY]); + drawPaths(); + break; + case 2: + erase([e.offsetX,e.offsetY]); + break; + } + }).hover(function(e) + { + if(mode==1) + { + $("#canv").css('cursor', "pointer"); + } + }); +}; + +function marquee(rectN,rectE,rectS,rectW,rectC) +{ + //constructor for the marquee class + this.rn=rectN; + this.re=rectE; + this.rs=rectS; + this.rw=rectW; + this.rc=rectC; +} + +function remove_all() +{ + //removes all Raphael elements from the canvas + paper.remove(); + paper=Raphael(document.getElementById("canv"),500,500); + ml=[]; + xy=[]; + paths=[]; + pathObjects=[]; + marquees=[]; + currpaths=""; + update_datastring(); +} + +function set_mode(i) +{ + i=parseInt(i); + if((i<1) || (i>3)) + { + mode=0; + } + else + { + mode=i; + } + var elt=document.getElementById("mode_div"); + switch(mode) + { + case 0: + elt.innerHTML="mode: shapes"; + break; + case 1: + elt.innerHTML="mode: pen"; + break; + case 2: + elt.innerHTML="mode: eraser"; + break; + case 3: + elt.innerHTML="mode: marquee"; + break; + } +} + +function set_up_icons() +{ + var paper=Raphael(document.getElementById("pen_button"),35,35); paper.path("M13.587,12.074c-0.049-0.074-0.11-0.147-0.188-0.202c-0.333-0.243-0.803-0.169-1.047,0.166c-0.244,0.336-0.167,0.805,0.167,1.048c0.303,0.22,0.708,0.167,0.966-0.091l-7.086,9.768l-2.203,7.997l6.917-4.577L26.865,4.468l-4.716-3.42l-1.52,2.096c-0.087-0.349-0.281-0.676-0.596-0.907c-0.73-0.529-1.751-0.369-2.28,0.363C14.721,6.782,16.402,7.896,13.587,12.074zM10.118,25.148L6.56,27.503l1.133-4.117L10.118,25.148zM14.309,11.861c2.183-3.225,1.975-4.099,3.843-6.962c0.309,0.212,0.664,0.287,1.012,0.269L14.309,11.861z").attr({fill: "#000", stroke: "none"}); + //var paper2=Raphael(document.getElementById("pointer_button"),35,35); + //paper2.path("M15.834,29.084 15.834,16.166 2.917,16.166 29.083,2.917z").attr({fill: "#000", stroke:"none"}); +} + +function toggle_marquees() +{ + marquees_on=1-marquees_on; + if(marquees_on) + { + show_marquees(); + } + else + { + hide_marquees(); + } +} + +function update_datastring() +{ + document.getElementById("test_layers_div").innerHTML=""; + datastring=""; + if(currpaths!="") + { + var pth="PATH::[pathstring]"+currpaths.split("undefined")[1]+pathattrs; + //document.getElementById("test_layers_div").innerHTML+=pth+"
"; + datastring+=pth; + } + paper.forEach(function(elt){ + if(elt.data("type")=="rect") + { + var pth="RECT::[x]"+elt.attr("x")+"[y]"+elt.attr("y")+"[w]"+elt.attr("width")+"[h]"+elt.attr("height"); + pth+="[fillc]"+elt.attr("fill")+"[fillo]"+elt.attr("fill-opacity"); + pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width"); + //document.getElementById("test_layers_div").innerHTML+=pth+"
"; + datastring+=pth; + } + else if(elt.data("type")=="ellipse") + { + var pth="ELLIPSE::[cx]"+elt.attr("cx")+"[cy]"+elt.attr("cy")+"[rx]"+elt.attr("rx")+"[ry]"+elt.attr("ry"); + pth+="[fillc]"+elt.attr("fill")+"[fillo]"+elt.attr("fill-opacity"); + pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width"); + //document.getElementById("test_layers_div").innerHTML+=pth+"
"; + datastring+=pth; + } + else if(elt.data("type")=="marquee") + { + var pth="MARQUEE::[x]"+elt.attr("x")+"[y]"+elt.attr("y")+"[w]"+elt.attr("width")+"[h]"+elt.attr("height"); + pth+="[surrfillc]"+elt.data("surr-fill")+"[surrfillo]"+elt.data("surr-opac"); + //document.getElementById("test_layers_div").innerHTML+=pth+"
"; + datastring+=pth; + } + }); + document.getElementById("test_layers_div").innerHTML+="

DATASTRING:
"+datastring; + return datastring; +} \ No newline at end of file From 4d56038fd8ec737d1a70acaee70c47b4bb727fc6 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Wed, 27 Feb 2013 10:57:02 -0500 Subject: [PATCH 13/22] added ink loading functionality to the inkAuthoring class --- alt.js | 398 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 301 insertions(+), 97 deletions(-) diff --git a/alt.js b/alt.js index 217c91b..6bdf014 100644 --- a/alt.js +++ b/alt.js @@ -19,7 +19,7 @@ var datastring=""; //if the pen icon is clicked, switch to pen mode (1) //if the eraser icon is clicked, switch to eraser mode (2) -function add_attributes(elt) +function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,strokeWidth) { //var strokewidth=document.getElementById("strokewidth"); //var strokecolor=document.getElementById("strokecolor"); @@ -32,11 +32,16 @@ function add_attributes(elt) var noglow=0; //if 1, glowing is disabled var origmousex; var origmousey; - var strokeWidth=document.getElementById("shape_stroke_width").value; - var strokeColor=document.getElementById("shape_stroke_color").value; - var strokeOpacity=document.getElementById("shape_stroke_opacity").value; - var fillColor=document.getElementById("shape_fill_color").value; - var fillOpacity=document.getElementById("shape_fill_opacity").value; + if(fillColor==undefined) + fillColor="#"+document.getElementById("shape_fill_color").value; + if(fillOpacity==undefined) + fillOpacity=document.getElementById("shape_fill_opacity").value; + if(strokeColor==undefined) + strokeColor="#"+document.getElementById("shape_stroke_color").value; + if(strokeOpacity==undefined) + strokeOpacity=document.getElementById("shape_stroke_opacity").value; + if(strokeWidth==undefined) + strokeWidth=document.getElementById("shape_stroke_width").value; elt.mouseover(function(){ if(!noglow && (mode==0)) { @@ -48,9 +53,9 @@ function add_attributes(elt) }) elt.attr({ "stroke-width":strokeWidth, - "stroke":"#"+strokeColor, + "stroke":strokeColor, "stroke-opacity":strokeOpacity, - "fill":"#"+fillColor, + "fill":fillColor, "fill-opacity":fillOpacity }); @@ -129,7 +134,23 @@ function add_attributes(elt) }); } -function add_marq_attributes(marq) +function add_ellipse() +{ + set_mode(0); + var x=Math.floor(Math.random()*300); + var y=Math.floor(Math.random()*300); + var rx=20+Math.floor(Math.random()*40); + var ry=20+Math.floor(Math.random()*40); + ellipse=paper.ellipse(x,y,rx,ry); + ellipse.data("currx",ellipse.getBBox().x); + ellipse.data("curry",ellipse.getBBox().y); + ellipse.data("curr_rx",rx); + ellipse.data("curr_ry",ry); + ellipse.data("type","ellipse"); + add_attributes(ellipse); +} + +function add_marq_attributes(marq,marqFillColor,marqFillOpacity) { var elt=marq.rc; var canv=document.getElementById("canv"); @@ -140,8 +161,10 @@ function add_marq_attributes(marq) var origmousey; var w=parseInt($('#canv').css("width")); var h=parseInt($('#canv').css("height")); - var marqFillColor=document.getElementById("marq_color").value; - var marqFillOpacity=document.getElementById("marq_opacity").value; + if(marqFillColor==undefined) + marqFillColor="#"+document.getElementById("marq_color").value; + if(marqFillOpacity==undefined) + marqFillOpacity=document.getElementById("marq_opacity").value; elt.mouseover(function(){ if(!noglow && (mode==3)) @@ -158,14 +181,14 @@ function add_marq_attributes(marq) "fill":"#ffffff", "fill-opacity":"0" }); - elt.data("surr-fill","#"+marqFillColor); + elt.data("surr-fill",marqFillColor); elt.data("surr-opac",marqFillOpacity); var mset=paper.set(); mset.push(marq.rn,marq.re,marq.rs,marq.rw); mset.attr({ "stroke-width":0, "stroke":"#222222", - "fill":"#"+marqFillColor, + "fill":marqFillColor, "fill-opacity":marqFillOpacity }); @@ -266,34 +289,6 @@ function add_marq_attributes(marq) }); } -function add_rectangle() -{ - set_mode(0); - var x=Math.floor(Math.random()*300); - var y=Math.floor(Math.random()*300); - rect=paper.rect(x,y,50,50); - rect.data("currx",x); - rect.data("curry",y); - rect.data("type","rect"); - add_attributes(rect); -} - -function add_ellipse() -{ - set_mode(0); - var x=Math.floor(Math.random()*300); - var y=Math.floor(Math.random()*300); - var rx=20+Math.floor(Math.random()*40); - var ry=20+Math.floor(Math.random()*40); - ellipse=paper.ellipse(x,y,rx,ry); - ellipse.data("currx",ellipse.getBBox().x); - ellipse.data("curry",ellipse.getBBox().y); - ellipse.data("curr_rx",rx); - ellipse.data("curr_ry",ry); - ellipse.data("type","ellipse"); - add_attributes(ellipse); -} - function add_marquee() { set_mode(3); @@ -326,58 +321,48 @@ function add_marquee() // elt.innerHTML=marquees; } -function hide_marquees() +function add_rectangle() { - var i; - var len=marquees.length; - for(i=0;i 0) { var path = paths.split('M'); @@ -389,7 +374,7 @@ function drawPaths() drawing.attr({ "stroke-width":strokeWidth, "stroke-opacity":strokeOpacity, - "stroke":"#"+strokeColor, + "stroke":strokeColor, "stroke-linejoin":"round", "stroke-linecap":"round" }) @@ -420,13 +405,156 @@ function erase(location) } } +function hide_marquees() +{ + var i; + var len=marquees.length; + for(i=0;i[stroke]\ + [strokeo][y][w][h]\ + [fillc][fillo][strokec]\ + [strokeo][strokew][] + + -Ellipses are stored individually in the following format: + + ELLIPSE::[cx]
[cy]
[rx][ry]\ + [fillc][fillo][strokec]\ + [strokeo][strokew][] + + -The substrings are separated by "|" characters. + */ document.getElementById("test_layers_div").innerHTML=""; datastring=""; if(currpaths!="") { - var pth="PATH::[pathstring]"+currpaths.split("undefined")[1]+pathattrs; + var pth="PATH::[pathstring]"+currpaths.split("undefined")[1]+pathattrs+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; - datastring+=pth; + datastring+=pth+"|"; } paper.forEach(function(elt){ if(elt.data("type")=="rect") { var pth="RECT::[x]"+elt.attr("x")+"[y]"+elt.attr("y")+"[w]"+elt.attr("width")+"[h]"+elt.attr("height"); pth+="[fillc]"+elt.attr("fill")+"[fillo]"+elt.attr("fill-opacity"); - pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width"); + pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width")+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; - datastring+=pth; + datastring+=pth+"|"; } else if(elt.data("type")=="ellipse") { var pth="ELLIPSE::[cx]"+elt.attr("cx")+"[cy]"+elt.attr("cy")+"[rx]"+elt.attr("rx")+"[ry]"+elt.attr("ry"); pth+="[fillc]"+elt.attr("fill")+"[fillo]"+elt.attr("fill-opacity"); - pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width"); + pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width")+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; - datastring+=pth; + datastring+=pth+"|"; } else if(elt.data("type")=="marquee") { var pth="MARQUEE::[x]"+elt.attr("x")+"[y]"+elt.attr("y")+"[w]"+elt.attr("width")+"[h]"+elt.attr("height"); - pth+="[surrfillc]"+elt.data("surr-fill")+"[surrfillo]"+elt.data("surr-opac"); + pth+="[surrfillc]"+elt.data("surr-fill")+"[surrfillo]"+elt.data("surr-opac")+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; - datastring+=pth; + datastring+=pth+"|"; } }); document.getElementById("test_layers_div").innerHTML+="

DATASTRING:
"+datastring; return datastring; +} + +function update_ml_xy(str) +{ + /* + When we load a pen path, we need to add its information to the ml and + xy arrays. + */ + + var i,j; + + //add info to ml + for(i=0;i0) + { + var arr2=arr1[i].split("M"); + for(j=0;j0) + { + var arr3=arr2[j].split(","); + xy.push([arr3[0],arr3[1]]); + } + } + } + } + click=false; } \ No newline at end of file From 4cc625ed85341a1339ab5249679f5412c83a85e8 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Wed, 27 Feb 2013 23:47:59 -0500 Subject: [PATCH 14/22] added an easy way to load Inks (could be helpful for UI) --- alt.css | 18 +++++++++++- alt.html | 10 +++++-- alt.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 102 insertions(+), 10 deletions(-) diff --git a/alt.css b/alt.css index 2dbdad3..bdd97ab 100644 --- a/alt.css +++ b/alt.css @@ -11,7 +11,7 @@ #clear_button { position:absolute; - top:470px; + top:500px; left:550px; width:80px; height:40px; @@ -51,6 +51,22 @@ width:40px; height:40px; } +#ink_to_load +{ + position:absolute; + top:470px; + left:550px; + width:250px; + height:20px; +} +#load_input_ink +{ + position:absolute; + top:470px; + left:810px; + width:80px; + height:25px; +} #manip_marquee_button { position:absolute; diff --git a/alt.html b/alt.html index d8ecbb9..761e100 100644 --- a/alt.html +++ b/alt.html @@ -85,12 +85,16 @@
mode: shapes
- - + + + + +
\ No newline at end of file diff --git a/alt.js b/alt.js index 6bdf014..c7be6e0 100644 --- a/alt.js +++ b/alt.js @@ -1,5 +1,6 @@ window.onload = load; var paper; +var iA; var mode=1; var click; var ml=[]; @@ -537,13 +538,79 @@ function inkAuthoring(canvasId) break; } } - } -} + }; + this.addRectangle=function(){add_rectangle();}; + this.addEllipse=function(){add_ellipse();}; + this.addMarquee=function(){add_marquee();}; + + // allow drawing on the Raphael paper + $("#"+canvasId).mousedown(function(e) + { + //alert("ml = "+ml+", xy = "+xy); + click = true; + switch(mode) + { + case 1: + ml.push('M'); + xy.push([e.offsetX,e.offsetY]); + ml.push('L'); //to allow drawing single dots + xy.push([e.offsetX,e.offsetY]); + drawPaths(); + //document.getElementById("test_layers_div").innerHTML="ml = "+ml+"
xy = "+xy; + break; + case 2: + erase([e.offsetX,e.offsetY]); + break; + } + //update_datastring(); + //document.getElementById("test_layers_div").innerHTML+="
currpaths = "+currpaths.split("undefined")[1]; + }).mouseup(function() + { + click = false; + }).mouseleave(function() + { + if(click === true) + { + click = false; + } + }).mousemove(function(e) + { + if((mode==1) || (mode==2)) + { + $("#canv").css('cursor','crosshair'); + } + else + { + $("#canv").css('cursor','pointer'); + } + if(click === false) + return; + switch(mode) + { + case 1: + ml.push('L'); + xy.push([e.offsetX,e.offsetY]); + drawPaths(); + break; + case 2: + erase([e.offsetX,e.offsetY]); + break; + } + }).hover(function(e) + { + if(mode==1) + { + $("#canv").css('cursor', "pointer"); + } + }); + + +} function load() { - var iA=new inkAuthoring("canv"); + iA=new inkAuthoring("canv"); //paper=Raphael(document.getElementById("canv"),500,500); paper=iA.paper; datastring=""; @@ -552,7 +619,7 @@ function load() //iA.loadInk(teststr); set_up_icons(); set_mode(1); - $("#canv").mousedown(function(e) + /*$("#canv").mousedown(function(e) { //alert("ml = "+ml+", xy = "+xy); click = true; @@ -610,9 +677,14 @@ function load() { $("#canv").css('cursor', "pointer"); } - }); + });*/ }; +function load_ink() +{ + iA.loadInk(document.getElementById("ink_to_load").value); +} + function marquee(rectN,rectE,rectS,rectW,rectC) { //constructor for the marquee class @@ -759,7 +831,7 @@ function update_datastring() datastring+=pth+"|"; } }); - document.getElementById("test_layers_div").innerHTML+="

DATASTRING:
"+datastring; + document.getElementById("test_layers_div").innerHTML+="DATASTRING:
"+datastring; return datastring; } From ef01cea9fd7d9c1643103a837a63559c26e719db Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Thu, 28 Feb 2013 01:24:38 -0500 Subject: [PATCH 15/22] added getters, setters, and pretty simple UI interaction --- alt.html | 22 +++---- alt.js | 172 ++++++++++++++++++++++++++++++++----------------------- 2 files changed, 112 insertions(+), 82 deletions(-) diff --git a/alt.html b/alt.html index 761e100..d44b5f0 100644 --- a/alt.html +++ b/alt.html @@ -39,47 +39,47 @@
Pen color: -
Pen opacity: -
Pen width: -
Eraser width: -
Shape stroke width: -
Shape stroke color: -
Shape stroke opacity: -
Shape fill color: -
Shape fill opacity: -
Marquee fill: -
Marquee opacity: -
diff --git a/alt.js b/alt.js index c7be6e0..40afef3 100644 --- a/alt.js +++ b/alt.js @@ -34,15 +34,15 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro var origmousex; var origmousey; if(fillColor==undefined) - fillColor="#"+document.getElementById("shape_fill_color").value; + fillColor=iA.shapeFillColor;//"#"+document.getElementById("shape_fill_color").value; if(fillOpacity==undefined) - fillOpacity=document.getElementById("shape_fill_opacity").value; + fillOpacity=iA.shapeFillOpacity;//document.getElementById("shape_fill_opacity").value; if(strokeColor==undefined) - strokeColor="#"+document.getElementById("shape_stroke_color").value; + strokeColor=iA.shapeStrokeColor;//"#"+document.getElementById("shape_stroke_color").value; if(strokeOpacity==undefined) - strokeOpacity=document.getElementById("shape_stroke_opacity").value; + strokeOpacity=iA.shapeStrokeOpacity;//document.getElementById("shape_stroke_opacity").value; if(strokeWidth==undefined) - strokeWidth=document.getElementById("shape_stroke_width").value; + strokeWidth=iA.shapeStrokeWidth;//document.getElementById("shape_stroke_width").value; elt.mouseover(function(){ if(!noglow && (mode==0)) { @@ -356,11 +356,11 @@ function drawPaths(paths,strokeColor,strokeOpacity,strokeWidth) } } if(strokeColor==undefined) - strokeColor="#"+document.getElementById("pen_color").value; + strokeColor=iA.penColor;//"#"+document.getElementById("pen_color").value; if(strokeOpacity==undefined) - strokeOpacity=document.getElementById("pen_opacity").value; + strokeOpacity=iA.penOpacity;//document.getElementById("pen_opacity").value; if(strokeWidth==undefined) - strokeWidth=document.getElementById("pen_width").value; + strokeWidth=iA.penWidth;//document.getElementById("pen_width").value; //var paths; //removes all objects in pathObjects to be redrawn @@ -445,6 +445,19 @@ function inkAuthoring(canvasId) var cw=parseInt($("#"+canvasId).css("width")); var ch=parseInt($("#"+canvasId).css("height")); this.paper=Raphael(document.getElementById(canvasId),cw,ch); + + this.penColor="#000000"; + this.penOpacity=1.0; + this.penWidth=5; + this.eraserWidth=5; + this.shapeStrokeColor="#000000"; + this.shapeStrokeOpacity=1.0; + this.shapeStrokeWidth=3; + this.shapeFillColor="#ffff00"; + this.shapeFillOpacity=0.0; + this.marqueeFillColor="#222222"; + this.marqueeFillOpacity=0.8; + this.loadInk=function(datastr){ var shapes=datastr.split("|"); var i; @@ -605,79 +618,96 @@ function inkAuthoring(canvasId) } }); - + this.setPenColor=function(c){this.penColor=c;}; + this.setPenOpacity=function(o){this.penOpacity=o;}; + this.setPenWidth=function(w){this.penWidth=w;}; + this.setEraserWidth=function(w){this.eraserWidth=w;}; + this.setShapeStrokeColor=function(c){this.shapeStrokeColor=c;}; + this.setShapeStrokeOpacity=function(o){this.shapeStrokeOpacity=o;}; + this.setShapeStrokeWidth=function(w){this.shapeStrokeWidth=w;}; + this.setMarqueeFillColor=function(c){this.marqueeFillColor=c;}; + this.setMarqueeFillOpacity=function(o){this.marqueeFillOpacity=o;}; + + this.getPenColor=function(){return this.setPenColor;}; + this.getPenOpacity=function(){return this.penOpacity;}; + this.getPenWidth=function(){return this.penWidth;}; + this.getEraserWidth=function(){return this.eraserWidth;}; + this.getShapeStrokeColor=function(){return this.shapeStrokeColor;}; + this.getShapeStrokeOpacity=function(){return this.shapeStrokeOpacity;}; + this.getShapeStrokeWidth=function(){return this.shapeStrokeWidth;}; + this.getMarqueeFillColor=function(){return this.marqueeFillColor;}; + this.getMarqueeFillOpacity=function(){return this.marqueeFillOpacity;}; + + this.updatePenColor=function(id) + { + var val=document.getElementById(id).value; + if(val.length==6) + this.penColor="#"+val; + } + this.updatePenOpacity=function(id) + { + var val=document.getElementById(id).value; + if(val!=undefined) + this.penOpacity=val; + } + this.updatePenWidth=function(id) + { + var val=document.getElementById(id).value; + if(val!=undefined) + this.penWidth=val; + } + this.updateShapeStrokeColor=function(id) + { + var val=document.getElementById(id).value; + if(val.length==6) + this.shapeStrokeColor=val; + } + this.updateShapeStrokeOpacity=function(id) + { + var val=document.getElementById(id).value; + if(val!=undefined) + this.shapeStrokeOpacity=val; + } + this.updateShapeStrokeWidth=function(id) + { + var val=document.getElementById(id).value; + if(val!=undefined) + this.shapeStrokeWidth=val; + } + this.updateShapeFillColor=function(id) + { + var val=document.getElementById(id).value; + if(val.length==6) + this.shapeFillColor=val; + } + this.updateShapeFillOpacity=function(id) + { + var val=document.getElementById(id).value; + if(val!=undefined) + this.shapeFillOpacity=val; + } + this.updateMarqueeColor=function(id) + { + var val=document.getElementById(id).value; + if(val.length==6) + this.marqueeFillColor=val; + } + this.updateMarqueeColor=function(id) + { + var val=document.getElementById(id).value; + if(val!=undefined) + this.marqueeFillOpacity=val; + } } function load() { iA=new inkAuthoring("canv"); - //paper=Raphael(document.getElementById("canv"),500,500); paper=iA.paper; datastring=""; currpaths=""; - //var teststr="PATH::[pathstring]M276,234L276,234L276,237L271,248M256,273L251,279L247,283L245,285L243,286L241,288L239,290L237,293M236,297M236,300L236,303L237,307L242,309L247,311L255,314L262,314L270,314L277,314L283,314L289,314L295,314L301,312M312,307M320,305M335,307M342,313L343,316L345,320L346,324L347,326L348,330M350,337M446,79L446,79L446,82L446,90L446,98L448,102L449,109L450,113L451,117L452,123M421,245L402,256M332,288L318,296M329,331L340,346M336,431L324,434M257,429L229,421L203,413L190,406L176,393M137,173L137,173L137,172L137,168L142,162L160,138L179,120L194,109M235,101L246,105L260,112L271,119L277,123L281,127L283,129L284,129M322,170L322,170L319,172L304,172L274,172L238,167M188,153L174,148L166,146L161,145L160,144L159,144L158,147L157,152L153,161L150,167L149,172L147,175L144,180L144,184L142,188L141,193L141,195L141,196M141,199L141,199M347,80L347,80M371,118L371,118L369,123L372,137L376,155L378,165L380,175L381,180L381,183L382,184L382,185[stroke]#000000[strokeo]1[strokew]10[]|RECT::[x]137[y]259[w]50[h]50[fillc]#ffff00[fillo]0.5[strokec]#000000[strokeo]1[strokew]3[]|ELLIPSE::[cx]95[cy]3[rx]43[ry]35[fillc]#ffff00[fillo]0.5[strokec]#000000[strokeo]1[strokew]3[]|MARQUEE::[x]205[y]208[w]103[h]98[surrfillc]#222222[surrfillo]0.8[]|RECT::[x]352[y]192[w]50[h]50[fillc]#ffff00[fillo].5[strokec]#000000[strokeo]1[strokew]3[]|ELLIPSE::[cx]273[cy]198[rx]75.96404506583949[ry]94.5[fillc]#ffff00[fillo].5[strokec]#000000[strokeo]1[strokew]3[]|MARQUEE::[x]183[y]106[w]260[h]183[surrfillc]#222222[surrfillo].8[]|"; - //iA.loadInk(teststr); set_up_icons(); set_mode(1); - /*$("#canv").mousedown(function(e) - { - //alert("ml = "+ml+", xy = "+xy); - click = true; - switch(mode) - { - case 1: - ml.push('M'); - xy.push([e.offsetX,e.offsetY]); - ml.push('L'); //to allow drawing single dots - xy.push([e.offsetX,e.offsetY]); - drawPaths(); - //document.getElementById("test_layers_div").innerHTML="ml = "+ml+"
xy = "+xy; - break; - case 2: - erase([e.offsetX,e.offsetY]); - break; - } - //update_datastring(); - //document.getElementById("test_layers_div").innerHTML+="
currpaths = "+currpaths.split("undefined")[1]; - }).mouseup(function() - { - click = false; - }).mouseleave(function() - { - if(click === true) - { - click = false; - } - }).mousemove(function(e) - { - if((mode==1) || (mode==2)) - { - $("#canv").css('cursor','crosshair'); - } - else - { - $("#canv").css('cursor','pointer'); - } - if(click === false) - return; - switch(mode) - { - case 1: - ml.push('L'); - xy.push([e.offsetX,e.offsetY]); - drawPaths(); - break; - case 2: - erase([e.offsetX,e.offsetY]); - break; - } - }).hover(function(e) - { - if(mode==1) - { - $("#canv").css('cursor', "pointer"); - } - });*/ }; function load_ink() From 39641e3a88fe99d2a5a09afeca093492edd288d6 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sat, 2 Mar 2013 14:54:52 -0500 Subject: [PATCH 16/22] to add to code base --- alt.html | 2 +- alt.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/alt.html b/alt.html index d44b5f0..6960eee 100644 --- a/alt.html +++ b/alt.html @@ -72,7 +72,7 @@
Shape fill opacity: + value="0" />
Marquee fill: Date: Sat, 2 Mar 2013 15:26:51 -0500 Subject: [PATCH 17/22] fixed some color parameter bugs --- alt.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/alt.js b/alt.js index 57fce5c..a1388fb 100644 --- a/alt.js +++ b/alt.js @@ -33,6 +33,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro var noglow=0; //if 1, glowing is disabled var origmousex; var origmousey; + if(fillColor==undefined) fillColor=iA.shapeFillColor;//"#"+document.getElementById("shape_fill_color").value; if(fillOpacity==undefined) @@ -43,7 +44,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro strokeOpacity=iA.shapeStrokeOpacity;//document.getElementById("shape_stroke_opacity").value; if(strokeWidth==undefined) strokeWidth=iA.shapeStrokeWidth;//document.getElementById("shape_stroke_width").value; - //alert("fillOpacity = "+fillOpacity+" "+iA.shapeFillOpacity); + elt.mouseover(function(){ if(!noglow && (mode==0)) { @@ -661,7 +662,9 @@ function inkAuthoring(canvasId) { var val=document.getElementById(id).value; if(val.length==6) - this.shapeStrokeColor=val; + { + this.shapeStrokeColor="#"+val; + } } this.updateShapeStrokeOpacity=function(id) { @@ -679,7 +682,7 @@ function inkAuthoring(canvasId) { var val=document.getElementById(id).value; if(val.length==6) - this.shapeFillColor=val; + this.shapeFillColor="#"+val; } this.updateShapeFillOpacity=function(id) { From e249949c0f7cde6a6cd42338b927269a9f6f5574 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sun, 3 Mar 2013 23:31:08 -0500 Subject: [PATCH 18/22] up to date for demo --- alt.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/alt.js b/alt.js index a1388fb..3140ab1 100644 --- a/alt.js +++ b/alt.js @@ -706,7 +706,7 @@ function inkAuthoring(canvasId) function load() { - iA=new inkAuthoring("canv"); + iA=new inkAuthoring("canv"); //buildcore buildexperiences in rin.tools. paper=iA.paper; datastring=""; currpaths=""; From 8b39d9e5699b6e6e05b0cb6b295dfd17617c3eb8 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Tue, 19 Mar 2013 16:10:23 -0400 Subject: [PATCH 19/22] added relative size functionality --- alt.js | 130 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 99 insertions(+), 31 deletions(-) diff --git a/alt.js b/alt.js index 3140ab1..7c42266 100644 --- a/alt.js +++ b/alt.js @@ -426,7 +426,7 @@ function get_attr(str,attr,parsetype) { //parse==0: return as string, parse==1: return as int, parse==2: return as float if(parsetype==undefined) - parsetype="i"; + parsetype="f"; if(parsetype=="s") return str.split("["+attr+"]")[1].split("[")[0]; @@ -436,6 +436,15 @@ function get_attr(str,attr,parsetype) return parseFloat(str.split("["+attr+"]")[1].split("[")[0]); } +function rel_dims(abs_dim,canv_dim) +{ + return parseFloat(abs_dim)/canv_dim; +} +function abs_dims(rel_dim,canv_dim) +{ + return parseFloat(rel_dim)*canv_dim; +} + function inkAuthoring(canvasId) { /* @@ -472,10 +481,11 @@ function inkAuthoring(canvasId) { case "rect": //[x]73[y]196[w]187[h]201[fillc]#ffff00[fillo].5[strokec]#000000[strokeo]1[strokew]3[] - var x=get_attr(shape,"x"); - var y=get_attr(shape,"y"); - var w=get_attr(shape,"w"); - var h=get_attr(shape,"h"); + var x=abs_dims(get_attr(shape,"x"),cw); + var y=abs_dims(get_attr(shape,"y"),ch); + var w=abs_dims(get_attr(shape,"w"),cw); + var h=abs_dims(get_attr(shape,"h"),ch); + var fillc=get_attr(shape,"fillc","s"); var fillo=get_attr(shape,"fillo","f"); var strokec=get_attr(shape,"strokec","s"); @@ -489,10 +499,11 @@ function inkAuthoring(canvasId) break; case "ellipse": //[cx]81[cy]131[rx]40[ry]27[fillc]#ffff00[fillo].5[strokec]#000000[strokeo]1[strokew]3[] - var cx=get_attr(shape,"cx"); - var cy=get_attr(shape,"cy"); - var rx=get_attr(shape,"rx"); - var ry=get_attr(shape,"ry"); + var cx=abs_dims(get_attr(shape,"cx"),cw); + var cy=abs_dims(get_attr(shape,"cy"),ch); + var rx=abs_dims(get_attr(shape,"rx"),cw); + var ry=abs_dims(get_attr(shape,"ry"),ch); + var fillc=get_attr(shape,"fillc","s"); var fillo=get_attr(shape,"fillo","f"); var strokec=get_attr(shape,"strokec","s"); @@ -508,24 +519,24 @@ function inkAuthoring(canvasId) break; case "marquee": //[x]206[y]207[w]102[h]93[surrfillc]#222222[surrfillo].8[] - var canvw=parseInt($('#canv').css("width")); - var canvh=parseInt($('#canv').css("height")); - var topx=get_attr(shape,"x"); - var topy=get_attr(shape,"y"); - var w=get_attr(shape,"w"); - var h=get_attr(shape,"h"); + // var canvw=parseInt($('#canv').css("width")); + // var canvh=parseInt($('#canv').css("height")); + var topx=abs_dims(get_attr(shape,"x"),cw); + var topy=abs_dims(get_attr(shape,"y"),ch); + var w=abs_dims(get_attr(shape,"w"),cw); + var h=abs_dims(get_attr(shape,"h"),ch); var surrfillc=get_attr(shape,"surrfillc","s"); var surrfillo=get_attr(shape,"surrfillo","f"); //alert("surrfillc = "+surrfillc+", surrfillo = "+surrfillo); var botx=topx+w; var boty=topy+h; - var rn=paper.rect(0,0,canvw,topy); + var rn=paper.rect(0,0,cw,topy); rn.data("currx",0); rn.data("curry",0); - var re=paper.rect(botx,topy,canvw-botx,boty-topy); + var re=paper.rect(botx,topy,cw-botx,boty-topy); re.data("currx",botx); re.data("curry",topy); - var rs=paper.rect(0,boty,canvw,canvh-boty); + var rs=paper.rect(0,boty,cw,ch-boty); rs.data("currx",0); rs.data("curry",boty); var rw=paper.rect(0,topy,topx,boty-topy); @@ -542,14 +553,17 @@ function inkAuthoring(canvasId) marquees_on=1; break; case "path": - //[pathstring]M284,193L284,193[stroke]000000[strokeo]1[strokew]10[] + //[pathstring]M0.588,0.572L0.588,0.572[stroke]#000000[strokeo]1[strokew]5[] var pathstring=get_attr(shape,"pathstring","s"); var strokec=get_attr(shape,"stroke","s"); var strokeo=get_attr(shape,"strokeo","f"); var strokew=get_attr(shape,"strokew"); - currpaths=pathstring; - update_ml_xy(pathstring); - drawPaths(pathstring,strokec,strokeo,strokew); + //alert("pathstring = "+pathstring); + currpaths=transform_pathstring(pathstring,cw,ch,"round"); + document.getElementById("test_layers_div").innerHTML+="PATH TEST:::::"+currpaths; + ///alert(currpaths); + update_ml_xy(currpaths); + drawPaths(currpaths,strokec,strokeo,strokew); break; } } @@ -807,11 +821,44 @@ function toggle_marquees() } } -function update_datastring() +function transform_pathstring(currpaths, trans_factor_x, trans_factor_y, rnd) +{ + //the trans_factors will be 1/w, 1/h if we are going from absolute to relative + //to keep representations short, currently only storing three decimal points + if(rnd==undefined){ rnd=0; } + else{ rnd=1; } + + var nums=currpaths.match(/[0-9.]+/g); + var newpath=""; + var j=0, i=0, n=currpaths.length; + for(i=0;i[stroke]\ @@ -832,18 +879,32 @@ function update_datastring() -The substrings are separated by "|" characters. */ + if(canvid==undefined) + { + canvid="canv"; + } + var canv_height=parseInt($("#"+canvid).css("height")); + var canv_width=parseInt($("#"+canvid).css("width")); + document.getElementById("test_layers_div").innerHTML=""; datastring=""; if(currpaths!="") { - var pth="PATH::[pathstring]"+currpaths.split("undefined")[1]+pathattrs+"[]"; + var nound=currpaths; + if(currpaths.split("undefined").length>1) + nound=currpaths.split("undefined")[1] + var newpath=transform_pathstring(nound,1.0/canv_height,1.0/canv_width); + //alert("hi"); + var pth="PATH::[pathstring]"+newpath+pathattrs+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; datastring+=pth+"|"; } paper.forEach(function(elt){ + //alert("canv_height = "+canv_height); if(elt.data("type")=="rect") { - var pth="RECT::[x]"+elt.attr("x")+"[y]"+elt.attr("y")+"[w]"+elt.attr("width")+"[h]"+elt.attr("height"); + var pth="RECT::[x]"+rel_dims(elt.attr("x"),canv_width)+"[y]"+rel_dims(elt.attr("y"),canv_height); + pth+="[w]"+rel_dims(elt.attr("width"),canv_width)+"[h]"+rel_dims(elt.attr("height"),canv_height); pth+="[fillc]"+elt.attr("fill")+"[fillo]"+elt.attr("fill-opacity"); pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width")+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; @@ -851,7 +912,8 @@ function update_datastring() } else if(elt.data("type")=="ellipse") { - var pth="ELLIPSE::[cx]"+elt.attr("cx")+"[cy]"+elt.attr("cy")+"[rx]"+elt.attr("rx")+"[ry]"+elt.attr("ry"); + var pth="ELLIPSE::[cx]"+rel_dims(elt.attr("cx"),canv_width)+"[cy]"+rel_dims(elt.attr("cy"),canv_height); + pth+="[rx]"+rel_dims(elt.attr("rx"),canv_width)+"[ry]"+rel_dims(elt.attr("ry"),canv_height); pth+="[fillc]"+elt.attr("fill")+"[fillo]"+elt.attr("fill-opacity"); pth+="[strokec]"+elt.attr("stroke")+"[strokeo]"+elt.attr("stroke-opacity")+"[strokew]"+elt.attr("stroke-width")+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; @@ -859,25 +921,31 @@ function update_datastring() } else if(elt.data("type")=="marquee") { - var pth="MARQUEE::[x]"+elt.attr("x")+"[y]"+elt.attr("y")+"[w]"+elt.attr("width")+"[h]"+elt.attr("height"); + var pth="MARQUEE::[x]"+rel_dims(elt.attr("x"),canv_width)+"[y]"+rel_dims(elt.attr("y"),canv_height); + pth+="[w]"+rel_dims(elt.attr("width"),canv_width)+"[h]"+rel_dims(elt.attr("height"),canv_height); pth+="[surrfillc]"+elt.data("surr-fill")+"[surrfillo]"+elt.data("surr-opac")+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; datastring+=pth+"|"; } }); - document.getElementById("test_layers_div").innerHTML+="DATASTRING:
"+datastring; + document.getElementById("test_layers_div").innerHTML+=datastring; return datastring; } -function update_ml_xy(str) +function update_ml_xy(str, canvasId) { /* When we load a pen path, we need to add its information to the ml and xy arrays. */ + if(canvasId==undefined) + { + canvasId="canv"; + } var i,j; - + var cw=parseInt($("#"+canvasId).css("width")); + var ch=parseInt($("#"+canvasId).css("height")); //add info to ml for(i=0;i Date: Tue, 19 Mar 2013 16:18:23 -0400 Subject: [PATCH 20/22] refactored canv --> inkCanv --- alt.css | 2 +- alt.html | 2 +- alt.js | 42 +++++++++++++++++++++--------------------- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/alt.css b/alt.css index bdd97ab..529684d 100644 --- a/alt.css +++ b/alt.css @@ -1,4 +1,4 @@ -#canv +#inkCanv { position:absolute; left:10px; diff --git a/alt.html b/alt.html index 6960eee..51f668c 100644 --- a/alt.html +++ b/alt.html @@ -10,7 +10,7 @@ -
+
diff --git a/alt.js b/alt.js index 7c42266..c06c2ed 100644 --- a/alt.js +++ b/alt.js @@ -27,7 +27,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro //var fillcolor=document.getElementById("fillcolor"); //var fillopacity=document.getElementById("fillopacity"); //$("#canvas").mousedown(); - var canv=document.getElementById("canv"); + var canv=document.getElementById("inkCanv"); var gl; var resize=0; //if 1, we are in zoom mode rather than pan mode var noglow=0; //if 1, glowing is disabled @@ -105,10 +105,10 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro origmousey=y; var bbox=this.getBBox(); resize=0; - var canvx=parseInt($("#canv").css("left")); - var canvbx=parseInt($("#canv").css("border-left")); - var canvy=parseInt($("#canv").css("top")); - var canvby=parseInt($("#canv").css("border-top")); + var canvx=parseInt($("#inkCanv").css("left")); + var canvbx=parseInt($("#inkCanv").css("border-left")); + var canvy=parseInt($("#inkCanv").css("top")); + var canvby=parseInt($("#inkCanv").css("border-top")); // document.getElementById("test_layers_div").innerHTML="x = "+x+"
\ // relevant x = "+(bbox.x+bbox.width+canvx+canvbx)+"
y = "+y+"
\ @@ -156,14 +156,14 @@ function add_ellipse() function add_marq_attributes(marq,marqFillColor,marqFillOpacity) { var elt=marq.rc; - var canv=document.getElementById("canv"); + var canv=document.getElementById("inkCanv"); var gl; var resize=0; //if 1, we are in zoom mode rather than pan mode var noglow=0; //if 1, glowing is disabled var origmousex; var origmousey; - var w=parseInt($('#canv').css("width")); - var h=parseInt($('#canv').css("height")); + var w=parseInt($('#inkCanv').css("width")); + var h=parseInt($('#inkCanv').css("height")); if(marqFillColor==undefined) marqFillColor="#"+document.getElementById("marq_color").value; if(marqFillOpacity==undefined) @@ -264,10 +264,10 @@ function add_marq_attributes(marq,marqFillColor,marqFillOpacity) origmousex=x; origmousey=y; var bbox=this.getBBox(); - var canvx=parseInt($("#canv").css("left")); - var canvbx=parseInt($("#canv").css("border-left")); - var canvy=parseInt($("#canv").css("top")); - var canvby=parseInt($("#canv").css("border-top")); + var canvx=parseInt($("#inkCanv").css("left")); + var canvbx=parseInt($("#inkCanv").css("border-left")); + var canvy=parseInt($("#inkCanv").css("top")); + var canvby=parseInt($("#inkCanv").css("border-top")); //document.getElementById("test_layers_div").innerHTML="x = "+x+"
bbox.x = "+(bbox.x)+"
y = "+y+"
bbox.y = "+(bbox.y); if((x>(bbox.x+bbox.width*0.5+canvx+canvbx)) && (y>(bbox.y+bbox.height*0.5+canvy+canvby))) { @@ -297,8 +297,8 @@ function add_marquee() set_mode(3); var topx=200+Math.floor(Math.random()*10), botx=300+Math.floor(Math.random()*10), topy=200+Math.floor(Math.random()*10), boty=300+Math.floor(Math.random()*10); //var topx=40, botx=80, topy=40, boty=80; - var w=parseInt($('#canv').css("width")); - var h=parseInt($('#canv').css("height")); + var w=parseInt($('#inkCanv').css("width")); + var h=parseInt($('#inkCanv').css("height")); var rn=paper.rect(0,0,w,topy); rn.data("currx",0); rn.data("curry",0); @@ -607,11 +607,11 @@ function inkAuthoring(canvasId) { if((mode==1) || (mode==2)) { - $("#canv").css('cursor','crosshair'); + $("#inkCanv").css('cursor','crosshair'); } else { - $("#canv").css('cursor','pointer'); + $("#inkCanv").css('cursor','pointer'); } if(click === false) return; @@ -630,7 +630,7 @@ function inkAuthoring(canvasId) { if(mode==1) { - $("#canv").css('cursor', "pointer"); + $("#inkCanv").css('cursor', "pointer"); } }); @@ -720,7 +720,7 @@ function inkAuthoring(canvasId) function load() { - iA=new inkAuthoring("canv"); //buildcore buildexperiences in rin.tools. + iA=new inkAuthoring("inkCanv"); //buildcore buildexperiences in rin.tools. paper=iA.paper; datastring=""; currpaths=""; @@ -747,7 +747,7 @@ function remove_all() { //removes all Raphael elements from the canvas paper.remove(); - paper=Raphael(document.getElementById("canv"),500,500); + paper=Raphael(document.getElementById("inkCanv"),500,500); ml=[]; xy=[]; paths=[]; @@ -881,7 +881,7 @@ function update_datastring(canvid) */ if(canvid==undefined) { - canvid="canv"; + canvid="inkCanv"; } var canv_height=parseInt($("#"+canvid).css("height")); var canv_width=parseInt($("#"+canvid).css("width")); @@ -941,7 +941,7 @@ function update_ml_xy(str, canvasId) if(canvasId==undefined) { - canvasId="canv"; + canvasId="inkCanv"; } var i,j; var cw=parseInt($("#"+canvasId).css("width")); From b28801716d1cb87fb278b54cd36303a273c2b8ad Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Wed, 20 Mar 2013 01:08:20 -0400 Subject: [PATCH 21/22] added resizing and dragging functionality, similar to marquee.html --- alt.css | 12 +++- alt.html | 7 +- alt.js | 199 +++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 194 insertions(+), 24 deletions(-) diff --git a/alt.css b/alt.css index 529684d..001c474 100644 --- a/alt.css +++ b/alt.css @@ -5,7 +5,7 @@ top:25px; height:500px; width:500px; - border:10px solid blue; + border:1px solid blue; z-index:0 } #clear_button @@ -67,6 +67,16 @@ width:80px; height:25px; } +#manip_canvas_button +{ + position:absolute; + top:70px; + left:960px; + padding-top:4px; + padding-left:3px; + width:170px; + height:40px; +} #manip_marquee_button { position:absolute; diff --git a/alt.html b/alt.html index 51f668c..723b4dd 100644 --- a/alt.html +++ b/alt.html @@ -3,10 +3,12 @@ Drawing Tool + - + + @@ -36,6 +38,9 @@ + +
Pen color: diff --git a/alt.js b/alt.js index c06c2ed..64310ed 100644 --- a/alt.js +++ b/alt.js @@ -16,10 +16,17 @@ var currpaths=""; //this will be the string representing all of our paths var pathattrs=""; var datastring=""; +var originalHeight, originalWidth; + //if the pointer icon is clicked, switch to default mode (0) //if the pen icon is clicked, switch to pen mode (1) //if the eraser icon is clicked, switch to eraser mode (2) +function abs_dims(rel_dim,canv_dim) +{ + return parseFloat(rel_dim)*canv_dim; +} + function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,strokeWidth) { //var strokewidth=document.getElementById("strokewidth"); @@ -30,7 +37,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro var canv=document.getElementById("inkCanv"); var gl; var resize=0; //if 1, we are in zoom mode rather than pan mode - var noglow=0; //if 1, glowing is disabled + var noglow=1; //if 1, glowing is disabled var origmousex; var origmousey; @@ -85,6 +92,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro { //resize an element var bbox=this.getBBox(); + document.getElementById("test_layers_div").innerHTML="bbox: x="+bbox.x+", y="+bbox.y+", w="+bbox.width+", h="+bbox.height; this.attr({ cx:bbox.x+bbox.width*0.5+(mousex-origmousex)*0.5, cy:bbox.y+bbox.height*0.5+(mousey-origmousey)*0.5, @@ -100,7 +108,6 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro },function(x,y){ if(!mode) { - origmousex=x; origmousey=y; var bbox=this.getBBox(); @@ -119,6 +126,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro { resize=1; } + gl.remove(); noglow=1; this.animate({opacity:.25},500,"<>"); @@ -130,7 +138,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro this.data("curry",this.getBBox().y); this.data("curr_rx",this.getBBox().width/2.0); this.data("curr_ry",this.getBBox().height/2.0); - noglow=0; + //noglow=0; resize=0; this.animate({opacity:1},500,"<>"); } @@ -140,10 +148,12 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro function add_ellipse() { set_mode(0); - var x=Math.floor(Math.random()*300); - var y=Math.floor(Math.random()*300); - var rx=20+Math.floor(Math.random()*40); - var ry=20+Math.floor(Math.random()*40); + var w=parseInt($('#inkCanv').css("width")); + var h=parseInt($('#inkCanv').css("height")); + var x=Math.floor(Math.random()*w); + var y=Math.floor(Math.random()*h); + var rx=Math.floor(Math.random()*(w-x-1)); + var ry=Math.floor(Math.random()*(h-y-1)); ellipse=paper.ellipse(x,y,rx,ry); ellipse.data("currx",ellipse.getBBox().x); ellipse.data("curry",ellipse.getBBox().y); @@ -198,6 +208,8 @@ function add_marq_attributes(marq,marqFillColor,marqFillOpacity) //drag(move, start, stop,...) elt.drag(function(dx,dy,mousex,mousey){ + w=parseInt($('#inkCanv').css("width")); + h=parseInt($('#inkCanv').css("height")); //onmove if(mode==3) { @@ -237,20 +249,25 @@ function add_marq_attributes(marq,marqFillColor,marqFillOpacity) else { //resize a marquee -- need to update all relevant rectangles + //rs.y:bbox.y+bbox.height+mousey-origmousey, + var X=this.attr("x"); + var Y=this.attr("y"); this.attr({ width:bbox.width+mousex-origmousex, height:bbox.height+mousey-origmousey }); marq.rs.attr({ - y:bbox.y+bbox.height+mousey-origmousey, + y:Y+bbox.height+mousey-origmousey, height:h-(bbox.y+bbox.height+mousey-origmousey) }); marq.re.attr({ x:bbox.x+bbox.width+mousex-origmousex, + y:Y, width:w-(bbox.x+bbox.width+mousex-origmousex), height:bbox.height+mousey-origmousey }) marq.rw.attr({ + y:Y, height:bbox.height+mousey-origmousey }) } @@ -302,15 +319,19 @@ function add_marquee() var rn=paper.rect(0,0,w,topy); rn.data("currx",0); rn.data("curry",0); + rn.data("type","marq_rect"); var re=paper.rect(botx,topy,w-botx,boty-topy); re.data("currx",botx); re.data("curry",topy); + re.data("type","marq_rect"); var rs=paper.rect(0,boty,w,h-boty); rs.data("currx",0); rs.data("curry",boty); + rs.data("type","marq_rect"); var rw=paper.rect(0,topy,topx,boty-topy); rw.data("currx",0); rw.data("curry",topy); + rw.data("type","marq_rect"); var rc=paper.rect(topx,topy,botx-topx,boty-topy); rc.data("currx",topx); rc.data("curry",topy); @@ -327,9 +348,13 @@ function add_marquee() function add_rectangle() { set_mode(0); - var x=Math.floor(Math.random()*300); - var y=Math.floor(Math.random()*300); - rect=paper.rect(x,y,50,50); + var w=parseInt($('#inkCanv').css("width")); + var h=parseInt($('#inkCanv').css("height")); + var x=Math.floor(Math.random()*w); + var y=Math.floor(Math.random()*h); + var wid=Math.floor(Math.random()*(w-x-1)); + var hei=Math.floor(Math.random()*(h-y-1)); + rect=paper.rect(x,y,wid,hei); rect.data("currx",x); rect.data("curry",y); rect.data("type","rect"); @@ -436,15 +461,6 @@ function get_attr(str,attr,parsetype) return parseFloat(str.split("["+attr+"]")[1].split("[")[0]); } -function rel_dims(abs_dim,canv_dim) -{ - return parseFloat(abs_dim)/canv_dim; -} -function abs_dims(rel_dim,canv_dim) -{ - return parseFloat(rel_dim)*canv_dim; -} - function inkAuthoring(canvasId) { /* @@ -455,7 +471,7 @@ function inkAuthoring(canvasId) */ var cw=parseInt($("#"+canvasId).css("width")); var ch=parseInt($("#"+canvasId).css("height")); - this.paper=Raphael(document.getElementById(canvasId),cw,ch); + this.paper=Raphael(document.getElementById(canvasId),"100%","100%"); this.penColor="#000000"; this.penOpacity=1.0; @@ -470,6 +486,8 @@ function inkAuthoring(canvasId) this.marqueeFillOpacity=0.8; this.loadInk=function(datastr){ + cw=parseInt($("#"+canvasId).css("width")); + ch=parseInt($("#"+canvasId).css("height")); var shapes=datastr.split("|"); var i; for(i=0;i3)) + if((i<1) || (i>4)) { mode=0; } @@ -783,7 +827,14 @@ function set_mode(i) case 3: elt.innerHTML="mode: marquee"; break; + case 4: + elt.innerHTML="mode: canvas"; + break; } + if(mode < 4) + { + setDraggable(false); + } } function set_up_icons() @@ -973,4 +1024,108 @@ function update_ml_xy(str, canvasId) } } click=false; +} + +///////// + +function manipCanvas() +{ + setDraggable(true); +} + +function setDraggable(option) +{ + if(option === true) + { + set_mode(4); + $("#inkCanv").draggable({disabled: false}); + $("#inkCanv").resizable({disabled: false}); + } + else + { + //console.log("set not draggable"); + $("#inkCanv").draggable({disabled: true}); + $("#inkCanv").resizable({disabled: true}); + //CSS bug, sets undraggable opacity to 0.35 + $("#inkCanv").css({opacity: 1}); + } +} + +function resizeObjects(orig_pos,orig_size,pos,size,scale_x,scale_y) +{ + //alert("hi"); + paper.forEach(function(elt){ + //alert("canv_height = "+canv_height); + if(elt.data("type")!="path") + { + elt.attr({ + x:elt.attr("x")*scale_x, + y:elt.attr("y")*scale_y, + cx:elt.attr("cx")*scale_x, + cy:elt.attr("cy")*scale_y, + rx:elt.attr("rx")*scale_x, + ry:elt.attr("ry")*scale_y, + width:elt.attr("width")*scale_x, + height:elt.attr("height")*scale_y, + }); + + if(elt.data("type")=="ellipse") + { + elt.data("currx",elt.attr("cx")-elt.attr("rx")); + elt.data("curry",elt.attr("cy")-elt.attr("ry")); + elt.data("curr_rx",elt.attr("rx")); + elt.data("curr_ry",elt.attr("ry")); + } + else + { + elt.data("currx",elt.attr("x")); + elt.data("curry",elt.attr("y")); + } + var gl=elt.glow({"width":15,"color":"#33ff00","opacity":0.8}); + gl.remove(); + + + + + // document.getElementById("test_layers_div").innerHTML="scale = ("+scale_x+","+scale_y+")"; + // var old_x=elt.data("currx"); + // var old_y=elt.data("curry"); + // var new_x=old_x*scale_x; + // var new_y=old_y*scale_y; + // document.getElementById("test_layers_div").innerHTML+="
oldattrx = "+elt.attr("x")+", oldattry"+elt.attr("y"); + // document.getElementById("test_layers_div").innerHTML+="
oldbbox.wh = "+elt.getBBox().width+","+elt.getBBox().height; + // //elt.scale(scale_x,scale_y,0,0); + // document.getElementById("test_layers_div").innerHTML+="
newattrx = "+elt.attr("x")+", newattry"+elt.attr("y"); + // document.getElementById("test_layers_div").innerHTML+="
newbbox.wh = "+elt.getBBox().width+","+elt.getBBox().height; + // document.getElementById("test_layers_div").innerHTML+="
elt.data(currx) = "+elt.data("currx"); + // elt.data("currx",new_x); + // elt.data("curry",new_y); + // if(elt.data("type")=="ellipse") + // { + // var new_rx=elt.data("curr_rx")*scale_x; + // var new_ry=elt.data("curr_ry")*scale_y; + // elt.data("curr_rx",new_rx); + // elt.data("curr_ry",new_ry); + // } + // var bbox=elt.getBBox(); + // elt.attr({ + // x:new_x, + // y:new_y, + // cx:bbox.x+bbox.width*0.5+(new_x-old_x)*0.5, + // cy:bbox.y+bbox.height*0.5+(new_y-old_y)*0.5, + // rx:bbox.width/2.0+(new_x-old_x)*0.5, + // ry:bbox.height/2.0+(new_y-old_y)*0.5, + // width:bbox.width+new_x-old_x, + // height:bbox.height+new_y-old_y + // }); + + } + }); + for(var i = 0; i < pathObjects.length; i++){ + pathObjects[i].scale(scale_x,scale_y,0,0); + } + for(var i = 0; i < xy.length; i++){ + xy[i][0] = xy[i][0] * scale_x; + xy[i][1] = xy[i][1] * scale_y; + } } \ No newline at end of file From 4b335dfccba59832f0fa375c61c0a4d7bd4de7d2 Mon Sep 17 00:00:00 2001 From: Ben LeVeque Date: Sat, 23 Mar 2013 18:54:30 -0400 Subject: [PATCH 22/22] fixed path loading --- alt.css | 12 ++++++++ alt.html | 5 ++- alt.js | 93 ++++++++++++++++---------------------------------------- 3 files changed, 43 insertions(+), 67 deletions(-) diff --git a/alt.css b/alt.css index 001c474..857929c 100644 --- a/alt.css +++ b/alt.css @@ -51,6 +51,18 @@ width:40px; height:40px; } +#info_panel +{ + position:absolute; + top:150px; + left:960px; +} +#update_info_panel +{ + position:absolute; + top:210px; + left:960px; +} #ink_to_load { position:absolute; diff --git a/alt.html b/alt.html index 723b4dd..a207b3c 100644 --- a/alt.html +++ b/alt.html @@ -6,7 +6,7 @@ - + @@ -14,6 +14,9 @@
+
+
+ diff --git a/alt.js b/alt.js index 64310ed..c943bdf 100644 --- a/alt.js +++ b/alt.js @@ -116,7 +116,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro var canvbx=parseInt($("#inkCanv").css("border-left")); var canvy=parseInt($("#inkCanv").css("top")); var canvby=parseInt($("#inkCanv").css("border-top")); - + // document.getElementById("test_layers_div").innerHTML="x = "+x+"
\ // relevant x = "+(bbox.x+bbox.width+canvx+canvbx)+"
y = "+y+"
\ // relevant y = "+(bbox.y+bbox.height+canvy+canvby)+"
canvx = "+canvx+"\ @@ -126,7 +126,7 @@ function add_attributes(elt,fillColor,fillOpacity,strokeColor,strokeOpacity,stro { resize=1; } - + gl.remove(); noglow=1; this.animate({opacity:.25},500,"<>"); @@ -244,7 +244,7 @@ function add_marq_attributes(marq,marqFillColor,marqFillOpacity) width:xpos, height:bbox.height }) - + } else { @@ -742,10 +742,12 @@ function load() { iA=new inkAuthoring("inkCanv"); //buildcore buildexperiences in rin.tools. paper=iA.paper; + remove_all(); datastring=""; currpaths=""; set_up_icons(); set_mode(1); + click=false; originalHeight = $("#inkCanv").height(); originalWidth = $("#inkCanv").width(); @@ -754,11 +756,15 @@ function load() $("#inkCanv").resizable({ resize: function(e,ui){ + document.getElementById("info_panel").innerHTML=parseFloat($("#inkCanv").css("width"))+","+parseFloat($("#inkCanv").css("height"))+"
"; + document.getElementById("info_panel").innerHTML+=$("#inkCanv").width()+","+$("#inkCanv").height(); + document.getElementById("info_panel").innerHTML+="
"+currpaths; newWidth = ui.size.width; newHeight = ui.size.height; scale_x = newWidth/originalWidth; scale_y = newHeight/originalHeight; - resizeObjects(ui.originalPosition,ui.originalSize,ui.position,ui.size,scale_x,scale_y); + currpaths = transform_pathstring(currpaths, scale_x, scale_y) + resizeObjects(scale_x,scale_y); originalWidth = newWidth; originalHeight = newHeight; }, @@ -791,7 +797,7 @@ function remove_all() { //removes all Raphael elements from the canvas paper.remove(); - paper=Raphael(document.getElementById("inkCanv"),500,500); + paper=Raphael(document.getElementById("inkCanv"),"100%","100%"); ml=[]; xy=[]; paths=[]; @@ -876,9 +882,7 @@ function transform_pathstring(currpaths, trans_factor_x, trans_factor_y, rnd) { //the trans_factors will be 1/w, 1/h if we are going from absolute to relative //to keep representations short, currently only storing three decimal points - if(rnd==undefined){ rnd=0; } - else{ rnd=1; } - + var nums=currpaths.match(/[0-9.]+/g); var newpath=""; var j=0, i=0, n=currpaths.length; @@ -886,17 +890,8 @@ function transform_pathstring(currpaths, trans_factor_x, trans_factor_y, rnd) { if((currpaths[i]=="M") || (currpaths[i]=="L")) { - if(rnd) - { - //alert(newpath); - newpath=newpath+currpaths[i]+Math.round(parseFloat(nums[j])*trans_factor_x)+","; - newpath+=Math.round(parseFloat(nums[j+1])*trans_factor_y); - } - else - { - newpath=newpath+currpaths[i]+(parseFloat(nums[j])*trans_factor_x).toFixed(3)+","; - newpath+=(parseFloat(nums[j+1])*trans_factor_y).toFixed(3); - } + newpath=newpath+currpaths[i]+(parseFloat(nums[j])*trans_factor_x).toFixed(6)+","; + newpath+=(parseFloat(nums[j+1])*trans_factor_y).toFixed(6); j=j+2; } } @@ -934,17 +929,19 @@ function update_datastring(canvid) { canvid="inkCanv"; } - var canv_height=parseInt($("#"+canvid).css("height")); - var canv_width=parseInt($("#"+canvid).css("width")); + var canv_height=parseFloat($("#"+canvid).css("height")); + var canv_width=parseFloat($("#"+canvid).css("width")); + document.getElementById("update_info_panel").innerHTML=canv_width+","+canv_height; document.getElementById("test_layers_div").innerHTML=""; datastring=""; - if(currpaths!="") + if((currpaths!="") && (currpaths!=undefined)) { - var nound=currpaths; + var no_und=currpaths; if(currpaths.split("undefined").length>1) - nound=currpaths.split("undefined")[1] - var newpath=transform_pathstring(nound,1.0/canv_height,1.0/canv_width); + no_und=currpaths.split("undefined")[1]; + document.getElementById("update_info_panel").innerHTML+="
"+no_und; + var newpath=transform_pathstring(no_und,1.0/canv_width,1.0/canv_height); //alert("hi"); var pth="PATH::[pathstring]"+newpath+pathattrs+"[]"; //document.getElementById("test_layers_div").innerHTML+=pth+"
"; @@ -1051,7 +1048,7 @@ function setDraggable(option) } } -function resizeObjects(orig_pos,orig_size,pos,size,scale_x,scale_y) +function resizeObjects(scale_x,scale_y) { //alert("hi"); paper.forEach(function(elt){ @@ -1068,7 +1065,7 @@ function resizeObjects(orig_pos,orig_size,pos,size,scale_x,scale_y) width:elt.attr("width")*scale_x, height:elt.attr("height")*scale_y, }); - + if(elt.data("type")=="ellipse") { elt.data("currx",elt.attr("cx")-elt.attr("rx")); @@ -1083,49 +1080,13 @@ function resizeObjects(orig_pos,orig_size,pos,size,scale_x,scale_y) } var gl=elt.glow({"width":15,"color":"#33ff00","opacity":0.8}); gl.remove(); - - - - - // document.getElementById("test_layers_div").innerHTML="scale = ("+scale_x+","+scale_y+")"; - // var old_x=elt.data("currx"); - // var old_y=elt.data("curry"); - // var new_x=old_x*scale_x; - // var new_y=old_y*scale_y; - // document.getElementById("test_layers_div").innerHTML+="
oldattrx = "+elt.attr("x")+", oldattry"+elt.attr("y"); - // document.getElementById("test_layers_div").innerHTML+="
oldbbox.wh = "+elt.getBBox().width+","+elt.getBBox().height; - // //elt.scale(scale_x,scale_y,0,0); - // document.getElementById("test_layers_div").innerHTML+="
newattrx = "+elt.attr("x")+", newattry"+elt.attr("y"); - // document.getElementById("test_layers_div").innerHTML+="
newbbox.wh = "+elt.getBBox().width+","+elt.getBBox().height; - // document.getElementById("test_layers_div").innerHTML+="
elt.data(currx) = "+elt.data("currx"); - // elt.data("currx",new_x); - // elt.data("curry",new_y); - // if(elt.data("type")=="ellipse") - // { - // var new_rx=elt.data("curr_rx")*scale_x; - // var new_ry=elt.data("curr_ry")*scale_y; - // elt.data("curr_rx",new_rx); - // elt.data("curr_ry",new_ry); - // } - // var bbox=elt.getBBox(); - // elt.attr({ - // x:new_x, - // y:new_y, - // cx:bbox.x+bbox.width*0.5+(new_x-old_x)*0.5, - // cy:bbox.y+bbox.height*0.5+(new_y-old_y)*0.5, - // rx:bbox.width/2.0+(new_x-old_x)*0.5, - // ry:bbox.height/2.0+(new_y-old_y)*0.5, - // width:bbox.width+new_x-old_x, - // height:bbox.height+new_y-old_y - // }); - } }); - for(var i = 0; i < pathObjects.length; i++){ - pathObjects[i].scale(scale_x,scale_y,0,0); - } for(var i = 0; i < xy.length; i++){ xy[i][0] = xy[i][0] * scale_x; xy[i][1] = xy[i][1] * scale_y; } + for(var i = 0; i < pathObjects.length; i++){ + pathObjects[i].scale(scale_x,scale_y,0,0); + } } \ No newline at end of file