start with cleaning up the code

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@12 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Pavol Rusnak 2009-06-01 17:35:22 +00:00
parent 732f86cdab
commit c00d1cf107
16 changed files with 534 additions and 555 deletions

View File

@ -1,5 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xml:space="preserve" id="svg_image" onload="Initialize(evt)" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="blanksvg.js" type="text/ecmascript"/>
</svg>

Before

Width:  |  Height:  |  Size: 388 B

View File

@ -1,517 +0,0 @@
SVGDocument = null;
SVGRoot = null;
var svgns = "http://www.w3.org/2000/svg";
top.clear_svg = SVGclear_svg ;
top.set_draw_mode = SVGset_draw_mode ;
top.submit_svg = SVGsubmit_svg ;
top.set_stroke_color = SVGset_stroke_color;
top.set_fill_color = SVGset_fill_color;
top.set_stroke_width = SVGset_stroke_width ;
var d_attr = "" ;
var signature_started = 0 ;
var path_elememt = 0 ;
var path_num = 1 ;
var rect_num = 1 ;
var line_num = 1 ;
var ellipse_num = 1 ;
var rect_x = null ;
var rect_y = null ;
var current_draw_element = "path" ;
var current_draw_element_fill = "none" ;
var current_draw_element_stroke_width = "1px" ;
var current_draw_element_stroke = "black" ;
var freehand_min_x = null ;
var freehand_max_x = null ;
var freehand_min_y = null ;
var freehand_max_y = null ;
var freehand_min_x = null ;
var freehand_max_x = null ;
var freehand_min_y = null ;
var freehand_max_y = null ;
function SVGset_draw_mode(ele_name) {
current_draw_element = ele_name;
}
function SVGset_stroke_color(col_hex){
current_draw_element_stroke = col_hex;
}
function SVGset_fill_color(col_hex){
current_draw_element_fill = col_hex;
}
function SVGset_stroke_width(val){
current_draw_element_stroke_width = val;
}
function Initialize(LoadEvent)
{
SVGDocument = LoadEvent.target.ownerDocument;
SVGRoot = SVGDocument.documentElement ;
var Attr={
"onmouseup":"fun_mouseUP(evt)",
"onmousedown":"fun_mouseDOWN(evt)",
"onmousemove":"fun_mouseMOVE(evt)"
}
assignAttr(SVGRoot,Attr);
}
function fun_mouseUP(evt)
{
if (signature_started == 1 )
{
signature_started = 0 ;
switch (current_draw_element)
{
case "select":
var element = SVGDocument.getElementById("rect_" + rect_num);
element.parentNode.removeChild(element);
break;
case "path":
d_attr = 0 ;
var element = SVGDocument.getElementById("path_" + path_num);
element.setAttribute("stroke-opacity", 1.0);
path_num = path_num + 1 ;
break;
case "line":
var element = SVGDocument.getElementById("line_" + line_num);
element.setAttribute("stroke-opacity", 1.0);
line_num = line_num + 1 ;
break;
case "square":
case "rect":
var element = SVGDocument.getElementById("rect_" + rect_num);
element.setAttribute("fill-opacity", 1.0);
element.setAttribute("stroke-opacity", 1.0);
rect_num = rect_num + 1 ;
break;
case "circle":
case "ellipse":
var element = SVGDocument.getElementById("ellipse_" + ellipse_num);
element.setAttribute("fill-opacity", 1.0);
element.setAttribute("stroke-opacity", 1.0);
ellipse_num = ellipse_num + 1 ;
break;
case "fhellipse":
d_attr = 0 ;
var element = SVGDocument.getElementById("path_" + path_num);
element.parentNode.removeChild(element);
create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": (freehand_min_x + freehand_max_x ) / 2,
"cy": (freehand_min_y + freehand_max_y ) / 2,
"rx": (freehand_max_x - freehand_min_x ) / 2 + "px",
"ry": (freehand_max_y - freehand_min_y ) / 2 + "px",
"id": "ellipse_" + ellipse_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width
}
});
ellipse_num = ellipse_num + 1 ;
break;
case "fhrect":
d_attr = 0 ;
var element = SVGDocument.getElementById("path_" + path_num);
element.parentNode.removeChild(element);
create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": freehand_min_x,
"y": freehand_min_y,
"width": (freehand_max_x - freehand_min_x ) + "px",
"height": (freehand_max_y - freehand_min_y ) + "px",
"id": "rect_" + rect_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width
}
});
rect_num = rect_num + 1 ;
break;
}
}
}
function fun_mouseDOWN(evt)
{
var x = evt.pageX;
var y = evt.pageY;
switch (current_draw_element)
{
case "select":
signature_started = 1 ;
rect_x = x ;
rect_y = y ;
create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": x,
"y": y,
"width": "1px",
"height": "1px",
"id": "rect_" + rect_num,
"fill": 'none',
"stroke": 'black',
"stroke-width": '1px',
"stroke-dasharray": "2,2"
}
});
break;
case "fhellipse":
d_attr = "M" + x + " " + y + " ";
signature_started = 1 ;
create_svg_element_by_json({
"element": "path",
"Attr": {
"d": d_attr,
"id": "path_" + path_num,
"fill": "none",
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
freehand_min_x = x ;
freehand_max_x = x ;
freehand_min_y = y ;
freehand_max_y = y ;
break;
case "fhrect":
d_attr = "M" + x + " " + y + " ";
signature_started = 1 ;
create_svg_element_by_json({
"element": "path",
"Attr": {
"d": d_attr,
"id": "path_" + path_num,
"fill": "none",
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
freehand_min_x = x ;
freehand_max_x = x ;
freehand_min_y = y ;
freehand_max_y = y ;
break;
case "path":
d_attr = "M" + x + " " + y + " ";
signature_started = 1 ;
create_svg_element_by_json({
"element": "path",
"Attr": {
"d": d_attr,
"id": "path_" + path_num,
"fill": "none",
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
break;
case "square":
case "rect":
signature_started = 1 ;
rect_x = x ;
rect_y = y ;
create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": x,
"y": y,
"width": "1px",
"height": "1px",
"id": "rect_" + rect_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"fill-opacity": 0.5,
"stroke-opacity": 0.5
}
});
break;
case "line":
signature_started = 1 ;
create_svg_element_by_json({
"element": "line",
"Attr": {
"x1": x,
"y1": y,
"x2": x + 1 + "px",
"y2": y + 1 + "px",
"id": "line_" + line_num,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
break;
case "circle":
case "ellipse":
signature_started = 1 ;
create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": x,
"cy": y,
"rx": 1 + "px",
"ry": 1 + "px",
"id": "ellipse_" + ellipse_num,
"fill": current_draw_element_fill,
"stroke": current_draw_element_stroke,
"stroke-width": current_draw_element_stroke_width,
"fill-opacity": 0.5,
"stroke-opacity": 0.5
}
});
break;
case "delete":
var T=evt.target
if(SVGRoot == evt.target ) return ;
T.parentNode.removeChild(T);
break;
}
}
function fun_mouseMOVE(evt)
{
if (signature_started == 1 )
{
var x = evt.pageX;
var y = evt.pageY;
switch (current_draw_element)
{
case "path":
d_attr = d_attr + "L" + x + " " + y + " ";
var shape = SVGDocument.getElementById("path_" + path_num);
shape.setAttributeNS(null, "d", d_attr);
break;
case "line":
var shape = SVGDocument.getElementById("line_" + line_num);
shape.setAttributeNS(null, "x2", x);
shape.setAttributeNS(null, "y2", y);
break;
case "square":
var shape = SVGDocument.getElementById("rect_" + rect_num);
var size = Math.max( Math.abs(x-rect_x) , Math.abs(y-rect_y) );
shape.setAttributeNS(null, "width", size);
shape.setAttributeNS(null, "height", size);
if(rect_x < x ){
shape.setAttributeNS(null, "x", rect_x);
}else{
shape.setAttributeNS(null, "x", rect_x - size);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", rect_y);
}else{
shape.setAttributeNS(null, "y", rect_y - size);
}
break;
case "select":
case "rect":
var shape = SVGDocument.getElementById("rect_" + rect_num);
if(rect_x < x ){
shape.setAttributeNS(null, "x", rect_x);
shape.setAttributeNS(null, "width", x - rect_x);
}else{
shape.setAttributeNS(null, "x", x);
shape.setAttributeNS(null, "width", rect_x - x);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", rect_y);
shape.setAttributeNS(null, "height", y - rect_y);
}else{
shape.setAttributeNS(null, "y", y);
shape.setAttributeNS(null, "height", rect_y - y);
}
break;
case "circle":
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
shape.setAttributeNS(null, "rx", rad);
shape.setAttributeNS(null, "ry", rad);
break;
case "ellipse":
var shape = SVGDocument.getElementById("ellipse_" + ellipse_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
shape.setAttributeNS(null, "rx", Math.abs(x-cx));
shape.setAttributeNS(null, "ry", Math.abs(y-cy));
break;
case "fhellipse":
d_attr = d_attr + "L" + x + " " + y + " ";
var shape = SVGDocument.getElementById("path_" + path_num);
shape.setAttributeNS(null, "d", d_attr);
freehand_min_x = min_of(x , freehand_min_x ) ;
freehand_max_x = max_of(x , freehand_max_x ) ;
freehand_min_y = min_of(y , freehand_min_y ) ;
freehand_max_y = max_of(y , freehand_max_y ) ;
break;
case "fhrect":
d_attr = d_attr + "L" + x + " " + y + " ";
var shape = SVGDocument.getElementById("path_" + path_num);
shape.setAttributeNS(null, "d", d_attr);
freehand_min_x = min_of(x , freehand_min_x ) ;
freehand_max_x = max_of(x , freehand_max_x ) ;
freehand_min_y = min_of(y , freehand_min_y ) ;
freehand_max_y = max_of(y , freehand_max_y ) ;
break;
}
}
}
function min_of(a ,b){
if (a < b ) { return a ;}
else {return b ;}
}
function max_of(a ,b){
if (a > b ) { return a ;}
else {return b ;}
}
function create_svg_element_by_json(data)
{
var shape = SVGDocument.createElementNS(svgns, data.element);
assignAttr(shape, data.Attr);
SVGDocument.documentElement.appendChild(shape);
}
function assignAttr(Node,Attr){
for (i in Attr) {
Node.setAttributeNS(null, i, Attr[i]);
}
}
function SVGclear_svg()
{
var Nodes = SVGRoot.childNodes ;
var Length = SVGRoot.childNodes.length ;
var i = 0 ;
for(var Rep=0; Rep< Length; Rep++){
if(Nodes[i].nodeType == 1){
Nodes[i].parentNode.removeChild(Nodes[i]);
}
else{
i++;
}
}
}
function SvgToString(elem , indent)
{
var out = "" ;
if (elem)
{
var attrs = elem.attributes;
var attr;
var i;
var childs = elem.childNodes;
// don't include scripts in output svg
if (elem.nodeName == "script") return "";
for (i=0; i<indent; i++) out += " ";
out += "<" + elem.nodeName;
for (i=attrs.length-1; i>=0; i--)
{
attr = attrs.item(i);
// don't include events in output svg
if (attr.nodeName == "onload" ||
attr.nodeName == "onmousedown" ||
attr.nodeName == "onmousemove" ||
attr.nodeName == "onmouseup") continue;
out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
}
if (elem.hasChildNodes())
{
out += ">\n";
indent++;
for (i=0; i<childs.length; i++)
{
if (childs.item(i).nodeType == 1) // element node
out = out + SvgToString(childs.item(i) ,indent);
else if (childs.item(i).nodeType == 3) // text node
{
for (j=0; j<indent; j++) out += " ";
out += childs.item(i).nodeValue + "\n";
}
}
indent--;
for (i=0; i<indent; i++) out += " ";
out += "</" + elem.nodeName + ">\n";
}
else
{
out += " />\n";
}
}
return out;
}
function SVGsubmit_svg(){
var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
str = str + SvgToString(SVGRoot , 0);
top.serializeHandler(str);
}

495
canvas.js Normal file
View File

@ -0,0 +1,495 @@
var canvas = null;
function svgCanvasInit(event) {
canvas = new svgCanvas(event.target.ownerDocument);
top.svgCanvas = canvas;
}
function svgCanvas(doc) {
// functions
this.assignAttributes = function(node, attrs) {
for (i in attrs) {
node.setAttributeNS(null, i, attrs[i]);
}
}
this.create_svg_element_by_json = function(data) {
var shape = this.svgdoc.createElementNS(this.svgns, data.element);
this.assignAttributes(shape, data.Attr);
this.svgdoc.documentElement.appendChild(shape);
}
this.svgToString = function(elem , indent)
{
var out = "" ;
if (elem)
{
var attrs = elem.attributes;
var attr;
var i;
var childs = elem.childNodes;
// don't include scripts in output svg
if (elem.nodeName == "script") return "";
for (i=0; i<indent; i++) out += " ";
out += "<" + elem.nodeName;
for (i=attrs.length-1; i>=0; i--)
{
attr = attrs.item(i);
// don't include events in output svg
if (attr.nodeName == "onload" ||
attr.nodeName == "onmousedown" ||
attr.nodeName == "onmousemove" ||
attr.nodeName == "onmouseup") continue;
out += " " + attr.nodeName + "=\"" + attr.nodeValue+ "\"";
}
if (elem.hasChildNodes())
{
out += ">\n";
indent++;
for (i=0; i<childs.length; i++)
{
if (childs.item(i).nodeType == 1) // element node
out = out + this.svgToString(childs.item(i) ,indent);
else if (childs.item(i).nodeType == 3) // text node
{
for (j=0; j<indent; j++) out += " ";
out += childs.item(i).nodeValue + "\n";
}
}
indent--;
for (i=0; i<indent; i++) out += " ";
out += "</" + elem.nodeName + ">\n";
}
else
{
out += " />\n";
}
}
return out;
}
// constructor
this.svgdoc = doc;
this.svgroot = this.svgdoc.documentElement;
this.svgns = "http://www.w3.org/2000/svg";
this.d_attr = "" ;
this.signature_started = 0 ;
this.obj_num = 1 ;
this.rect_x = null ;
this.rect_y = null ;
this.current_draw_element = "path" ;
this.current_draw_element_fill = "none" ;
this.current_draw_element_stroke_width = "1px" ;
this.current_draw_element_stroke = "black" ;
this.freehand_min_x = null ;
this.freehand_max_x = null ;
this.freehand_min_y = null ;
this.freehand_max_y = null ;
this.assignAttributes(this.svgroot, {
"onmouseup": "canvas.mouseUp(evt)",
"onmousedown": "canvas.mouseDown(evt)",
"onmousemove": "canvas.mouseMove(evt)"
});
this.serialize = function(handler) {
var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
str = str + this.svgToString(this.svgroot, 0);
handler(str);
}
this.clear = function() {
var Nodes = SVGRoot.childNodes ;
var Length = SVGRoot.childNodes.length ;
var i = 0 ;
for(var Rep=0; Rep< Length; Rep++){
if(Nodes[i].nodeType == 1){
Nodes[i].parentNode.removeChild(Nodes[i]);
}
else{
i++;
}
}
}
this.setMode = function(name) {
this.current_draw_element = name;
}
this.setStrokeColor = function(color) {
this.current_draw_element_stroke = color;
}
this.setFillColor = function(color) {
this.current_draw_element_fill = color;
}
this.setStrokeColor = function(val) {
this.current_draw_element_stroke_width = val;
}
this.mouseUp = function(evt)
{
if (this.signature_started == 1 )
{
this.signature_started = 0 ;
switch (this.current_draw_element)
{
case "select":
var element = this.svgdoc.getElementById("rect_" + this.obj_num);
element.parentNode.removeChild(element);
break;
case "path":
this.d_attr = 0 ;
var element = this.svgdoc.getElementById("path_" + this.obj_num);
element.setAttribute("stroke-opacity", 1.0);
this.obj_num++;
break;
case "line":
var element = this.svgdoc.getElementById("line_" + this.obj_num);
element.setAttribute("stroke-opacity", 1.0);
this.obj_num++;
break;
case "square":
case "rect":
var element = this.svgdoc.getElementById("rect_" + this.obj_num);
element.setAttribute("fill-opacity", 1.0);
element.setAttribute("stroke-opacity", 1.0);
this.obj_num++;
break;
case "circle":
case "ellipse":
var element = this.svgdoc.getElementById("ellipse_" + this.obj_num);
element.setAttribute("fill-opacity", 1.0);
element.setAttribute("stroke-opacity", 1.0);
this.obj_num++;
break;
case "fhellipse":
this.d_attr = 0 ;
var element = this.svgdoc.getElementById("path_" + this.obj_num);
element.parentNode.removeChild(element);
this.create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": (this.freehand_min_x + this.freehand_max_x ) / 2,
"cy": (this.freehand_min_y + this.freehand_max_y ) / 2,
"rx": (this.freehand_max_x - this.freehand_min_x ) / 2 + "px",
"ry": (this.freehand_max_y - this.freehand_min_y ) / 2 + "px",
"id": "ellipse_" + this.obj_num,
"fill": this.current_draw_element_fill,
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width
}
});
this.obj_num++;
break;
case "fhrect":
this.d_attr = 0 ;
var element = this.svgdoc.getElementById("path_" + this.obj_num);
element.parentNode.removeChild(element);
this.create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": this.freehand_min_x,
"y": this.freehand_min_y,
"width": (this.freehand_max_x - this.freehand_min_x ) + "px",
"height": (this.freehand_max_y - this.freehand_min_y ) + "px",
"id": "rect_" + this.obj_num,
"fill": this.current_draw_element_fill,
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width
}
});
this.obj_num = obj_num + 1 ;
break;
}
}
}
this.mouseDown = function(evt)
{
var x = evt.pageX;
var y = evt.pageY;
switch (this.current_draw_element)
{
case "select":
this.signature_started = 1 ;
this.rect_x = x ;
this.rect_y = y ;
this.create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": x,
"y": y,
"width": "1px",
"height": "1px",
"id": "rect_" + this.obj_num,
"fill": 'none',
"stroke": 'black',
"stroke-width": '1px',
"stroke-dasharray": "2,2"
}
});
break;
case "fhellipse":
this.d_attr = "M" + x + " " + y + " ";
this.signature_started = 1 ;
this.create_svg_element_by_json({
"element": "path",
"Attr": {
"d": this.d_attr,
"id": "path_" + this.obj_num,
"fill": "none",
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
this.freehand_min_x = x ;
this.freehand_max_x = x ;
this.freehand_min_y = y ;
this.freehand_max_y = y ;
break;
case "fhrect":
this.d_attr = "M" + x + " " + y + " ";
this.signature_started = 1 ;
this.create_svg_element_by_json({
"element": "path",
"Attr": {
"d": this.d_attr,
"id": "path_" + this.obj_num,
"fill": "none",
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
this.freehand_min_x = x ;
this.freehand_max_x = x ;
this.freehand_min_y = y ;
this.freehand_max_y = y ;
break;
case "path":
this.d_attr = "M" + x + " " + y + " ";
this.signature_started = 1 ;
this.create_svg_element_by_json({
"element": "path",
"Attr": {
"d": this.d_attr,
"id": "path_" + this.obj_num,
"fill": "none",
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
break;
case "square":
case "rect":
this.signature_started = 1 ;
this.rect_x = x ;
this.rect_y = y ;
create_svg_element_by_json({
"element": "rect",
"Attr": {
"x": x,
"y": y,
"width": "1px",
"height": "1px",
"id": "rect_" + this.obj_num,
"fill": this.current_draw_element_fill,
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width,
"fill-opacity": 0.5,
"stroke-opacity": 0.5
}
});
break;
case "line":
this.signature_started = 1 ;
this.create_svg_element_by_json({
"element": "line",
"Attr": {
"x1": this.x,
"y1": this.y,
"x2": this.x + 1 + "px",
"y2": this.y + 1 + "px",
"id": "line_" + this.obj_num,
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width,
"stroke-opacity": 0.5
}
});
break;
case "circle":
case "ellipse":
this.signature_started = 1 ;
this.create_svg_element_by_json({
"element": "ellipse",
"Attr": {
"cx": x,
"cy": y,
"rx": 1 + "px",
"ry": 1 + "px",
"id": "ellipse_" + this.obj_num,
"fill": this.current_draw_element_fill,
"stroke": this.current_draw_element_stroke,
"stroke-width": this.current_draw_element_stroke_width,
"fill-opacity": 0.5,
"stroke-opacity": 0.5
}
});
break;
case "delete":
var T=evt.target
if(this.svgroot == evt.target ) return ;
T.parentNode.removeChild(T);
break;
}
}
this.mouseMove = function(evt)
{
if (this.signature_started == 1 )
{
var x = evt.pageX;
var y = evt.pageY;
switch (this.current_draw_element)
{
case "path":
this.d_attr = this.d_attr + "L" + x + " " + y + " ";
var shape = this.svgdoc.getElementById("path_" + this.obj_num);
shape.setAttributeNS(null, "d", this.d_attr);
break;
case "line":
var shape = this.svgdoc.getElementById("line_" + this.obj_num);
shape.setAttributeNS(null, "x2", x);
shape.setAttributeNS(null, "y2", y);
break;
case "square":
var shape = this.svgdoc.getElementById("rect_" + this.obj_num);
var size = Math.max( Math.abs(x-this.rect_x) , Math.abs(y-this.rect_y) );
shape.setAttributeNS(null, "width", this.size);
shape.setAttributeNS(null, "height", this.size);
if(rect_x < x ){
shape.setAttributeNS(null, "x", this.rect_x);
}else{
shape.setAttributeNS(null, "x", this.rect_x - size);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", this.rect_y);
}else{
shape.setAttributeNS(null, "y", this.rect_y - size);
}
break;
case "select":
case "rect":
var shape = this.svgdoc.getElementById("rect_" + this.obj_num);
if(rect_x < x ){
shape.setAttributeNS(null, "x", this.rect_x);
shape.setAttributeNS(null, "width", x - this.rect_x);
}else{
shape.setAttributeNS(null, "x", x);
shape.setAttributeNS(null, "width", this.rect_x - x);
}
if(rect_y < y ){
shape.setAttributeNS(null, "y", this.rect_y);
shape.setAttributeNS(null, "height", y - this.rect_y);
}else{
shape.setAttributeNS(null, "y", y);
shape.setAttributeNS(null, "height", this.rect_y - y);
}
break;
case "circle":
var shape = this.svgdoc.getElementById("ellipse_" + this.obj_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
shape.setAttributeNS(null, "rx", rad);
shape.setAttributeNS(null, "ry", rad);
break;
case "ellipse":
var shape = this.svgdoc.getElementById("ellipse_" + this.obj_num);
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
shape.setAttributeNS(null, "rx", Math.abs(x-cx));
shape.setAttributeNS(null, "ry", Math.abs(y-cy));
break;
case "fhellipse":
this.d_attr = this.d_attr + "L" + x + " " + y + " ";
var shape = this.svgdoc.getElementById("path_" + this.obj_num);
shape.setAttributeNS(null, "d", this.d_attr);
this.freehand_min_x = Math.min(x , this.freehand_min_x ) ;
this.freehand_max_x = Math.max(x , this.freehand_max_x ) ;
this.freehand_min_y = Math.min(y , this.freehand_min_y ) ;
this.freehand_max_y = Math.max(y , this.freehand_max_y ) ;
break;
case "fhrect":
this.d_attr = this.d_attr + "L" + x + " " + y + " ";
var shape = this.svgdoc.getElementById("path_" + this.obj_num);
shape.setAttributeNS(null, "d", this.d_attr);
this.freehand_min_x = Math.min(x , this.freehand_min_x ) ;
this.freehand_max_x = Math.max(x , this.freehand_max_x ) ;
this.freehand_min_y = Math.min(y , this.freehand_min_y ) ;
this.freehand_max_y = Math.max(y , this.freehand_max_y ) ;
break;
}
}
}
}

5
canvas.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xml:space="preserve" id="svg_image" onload="svgCanvasInit(evt)" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="canvas.js" type="text/ecmascript"/>
</svg>

After

Width:  |  Height:  |  Size: 389 B

View File

Before

Width:  |  Height:  |  Size: 663 B

After

Width:  |  Height:  |  Size: 663 B

View File

Before

Width:  |  Height:  |  Size: 373 B

After

Width:  |  Height:  |  Size: 373 B

View File

Before

Width:  |  Height:  |  Size: 549 B

After

Width:  |  Height:  |  Size: 549 B

View File

Before

Width:  |  Height:  |  Size: 665 B

After

Width:  |  Height:  |  Size: 665 B

View File

Before

Width:  |  Height:  |  Size: 136 B

After

Width:  |  Height:  |  Size: 136 B

View File

Before

Width:  |  Height:  |  Size: 801 B

After

Width:  |  Height:  |  Size: 801 B

View File

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 428 B

View File

Before

Width:  |  Height:  |  Size: 456 B

After

Width:  |  Height:  |  Size: 456 B

View File

Before

Width:  |  Height:  |  Size: 668 B

After

Width:  |  Height:  |  Size: 668 B

View File

@ -21,7 +21,7 @@
} }
#fill_color { #fill_color {
background: url('none.png'); background: url('images/none.png');
} }
#stroke_color { #stroke_color {

View File

@ -4,6 +4,7 @@
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rightClick.js"></script> <script type="text/javascript" src="jquery.rightClick.js"></script>
<script type="text/javascript" src="svg-editor.js"></script> <script type="text/javascript" src="svg-editor.js"></script>
<title>SVG-edit demo</title>
</head> </head>
<body> <body>
@ -12,21 +13,21 @@
<div id="tools"> <div id="tools">
<div> <div>
<img class="tool_button" id="tool_select" src="select.png" /> <img class="tool_button" id="tool_select" src="images/select.png" />
<img class="tool_button" id="tool_path" src="path.png" /> <img class="tool_button" id="tool_path" src="images/path.png" />
<img class="tool_button" id="tool_line" src="line.png" /> <img class="tool_button" id="tool_line" src="images/line.png" />
<br/> <br/>
<img class="tool_button" id="tool_square" src="rect.png" /> <img class="tool_button" id="tool_square" src="images/rect.png" />
<img class="tool_button" id="tool_rect" src="rect.png" /> <img class="tool_button" id="tool_rect" src="images/rect.png" />
<img class="tool_button" id="tool_fhrect" src="rect.png" /> <img class="tool_button" id="tool_fhrect" src="images/rect.png" />
<br/> <br/>
<img class="tool_button" id="tool_circle" src="circle.png" /> <img class="tool_button" id="tool_circle" src="images/circle.png" />
<img class="tool_button" id="tool_ellipse" src="circle.png" /> <img class="tool_button" id="tool_ellipse" src="images/circle.png" />
<img class="tool_button" id="tool_fhellipse" src="circle.png" /> <img class="tool_button" id="tool_fhellipse" src="images/circle.png" />
<br/> <br/>
<img class="tool_button" id="tool_delete" src="delete.png" /> <img class="tool_button" id="tool_delete" src="images/delete.png" />
<img class="tool_button" id="tool_clear" src="clear.png" /> <img class="tool_button" id="tool_clear" src="images/clear.png" />
<img class="tool_button" id="tool_submit" src="submit.png" /> <img class="tool_button" id="tool_submit" src="images/submit.png" />
</div> </div>
<div>Fill <div>Fill
@ -51,8 +52,8 @@
<div id="workarea"> <div id="workarea">
<div id="canvas"> <div id="canvas">
<object class="canvas" data="blank.svg" type="image/svg+xml"> <object class="canvas" data="canvas.svg" type="image/svg+xml">
<embed class="canvas" src="blank.svg" type="image/svg+xml" /> <embed class="canvas" src="canvas.svg" type="image/svg+xml" />
</object> </object>
</div> </div>

View File

@ -1,84 +1,84 @@
var palette = ["#000000","#202020","#404040","#606060","#808080","#A0A0A0","#C0C0C0","#E0E0E0","#FFFFFF","#800000","#FF0000","#808000","#FFFF00","#008000","#00FF00","#008080","#00FFFF","#000080","#0000FF","#800080","#FF00FF","#2B0000","#550000","#800000","#AA0000","#D40000","#FF0000","#FF2A2A","#FF5555","#FF8080","#FFAAAA","#FFD5D5","#280B0B","#501616","#782121","#A02C2C","#C83737","#D35F5F","#DE8787","#E9AFAF","#F4D7D7","#241C1C","#483737","#6C5353","#916F6F","#AC9393","#C8B7B7","#E3DBDB","#2B1100","#552200","#803300","#AA4400","#D45500","#FF6600","#FF7F2A","#FF9955","#FFB380","#FFCCAA","#FFE6D5","#28170B","#502D16","#784421","#A05A2C","#C87137","#D38D5F","#DEAA87","#E9C6AF","#F4E3D7","#241F1C","#483E37","#6C5D53","#917C6F","#AC9D93","#C8BEB7","#E3DEDB","#2B2200","#554400","#806600","#AA8800","#D4AA00","#FFCC00","#FFD42A","#FFDD55","#FFE680","#FFEEAA","#FFF6D5","#28220B","#504416","#786721","#A0892C","#C8AB37","#D3BC5F","#DECD87","#E9DDAF","#F4EED7","#24221C","#484537","#6C6753","#918A6F","#ACA793","#C8C4B7","#E3E2DB","#222B00","#445500","#668000","#88AA00","#AAD400","#CCFF00","#D4FF2A","#DDFF55","#E5FF80","#EEFFAA","#F6FFD5","#22280B","#445016","#677821","#89A02C","#ABC837","#BCD35F","#CDDE87","#DDE9AF","#EEF4D7","#22241C","#454837","#676C53","#8A916F","#A7AC93","#C4C8B7","#E2E3DB","#112B00","#225500","#338000","#44AA00","#55D400","#66FF00","#7FFF2A","#99FF55","#B3FF80","#CCFFAA","#E5FFD5","#17280B","#2D5016","#447821","#5AA02C","#71C837","#8DD35F","#AADE87","#C6E9AF","#E3F4D7","#1F241C","#3E4837","#5D6C53","#7C916F","#9DAC93","#BEC8B7","#DEE3DB","#002B00","#005500","#008000","#00AA00","#00D400","#00FF00","#2AFF2A","#55FF55","#80FF80","#AAFFAA","#D5FFD5","#0B280B","#165016","#217821","#2CA02C","#37C837","#5FD35F","#87DE87","#AFE9AF","#D7F4D7","#1C241C","#374837","#536C53","#6F916F","#93AC93","#B7C8B7","#DBE3DB","#002B11","#005522","#008033","#00AA44","#00D455","#00FF66","#2AFF80","#55FF99","#80FFB3","#AAFFCC","#D5FFE6","#0B2817","#16502D","#217844","#2CA05A","#37C871","#5FD38D","#87DEAA","#AFE9C6","#D7F4E3","#1C241F","#37483E","#536C5D","#6F917C","#93AC9D","#B7C8BE","#DBE3DE","#002B22","#005544","#008066","#00AA88","#00D4AA","#00FFCC","#2AFFD5","#55FFDD","#80FFE6","#AAFFEE","#D5FFF6","#0B2822","#165044","#217867","#2CA089","#37C8AB","#5FD3BC","#87DECD","#AFE9DD","#D7F4EE","#1C2422","#374845","#536C67","#6F918A","#93ACA7","#B7C8C4","#DBE3E2","#00222B","#004455","#006680","#0088AA","#00AAD4","#00CCFF","#2AD4FF","#55DDFF","#80E5FF","#AAEEFF","#D5F6FF","#0B2228","#164450","#216778","#2C89A0","#37ABC8","#5FBCD3","#87CDDE","#AFDDE9","#D7EEF4","#1C2224","#374548","#53676C","#6F8A91","#93A7AC","#B7C4C8","#DBE2E3","#00112B","#002255","#003380","#0044AA","#0055D4","#0066FF","#2A7FFF","#5599FF","#80B3FF","#AACCFF","#D5E5FF","#0B1728","#162D50","#214478","#2C5AA0","#3771C8","#5F8DD3","#87AADE","#AFC6E9","#D7E3F4","#1C1F24","#373E48","#535D6C","#6F7C91","#939DAC","#B7BEC8","#DBDEE3","#00002B","#000055","#000080","#0000AA","#0000D4","#0000FF","#2A2AFF","#5555FF","#8080FF","#AAAAFF","#D5D5FF","#0B0B28","#161650","#212178","#2C2CA0","#3737C8","#5F5FD3","#8787DE","#AFAFE9","#D7D7F4","#1C1C24","#373748","#53536C","#6F6F91","#9393AC","#B7B7C8","#DBDBE3","#11002B","#220055","#330080","#4400AA","#5500D4","#6600FF","#7F2AFF","#9955FF","#B380FF","#CCAAFF","#E5D5FF","#170B28","#2D1650","#442178","#5A2CA0","#7137C8","#8D5FD3","#AA87DE","#C6AFE9","#E3D7F4","#1F1C24","#3E3748","#5D536C","#7C6F91","#9D93AC","#BEB7C8","#DEDBE3","#22002B","#440055","#660080","#8800AA","#AA00D4","#CC00FF","#D42AFF","#DD55FF","#E580FF","#EEAAFF","#F6D5FF","#220B28","#441650","#672178","#892CA0","#AB37C8","#BC5FD3","#CD87DE","#DDAFE9","#EED7F4","#221C24","#453748","#67536C","#8A6F91","#A793AC","#C4B7C8","#E2DBE3","#2B0022","#550044","#800066","#AA0088","#D400AA","#FF00CC","#FF2AD4","#FF55DD","#FF80E5","#FFAAEE","#FFD5F6","#280B22","#501644","#782167","#A02C89","#C837AB","#D35FBC","#DE87CD","#E9AFDD","#F4D7EE","#241C22","#483745","#6C5367","#916F8A","#AC93A7","#C8B7C4","#E3DBE2","#2B0011","#550022","#800033","#AA0044","#D40055","#FF0066","#FF2A7F","#FF5599","#FF80B2","#FFAACC","#FFD5E5","#280B17","#50162D","#782144","#A02C5A","#C83771","#D35F8D","#DE87AA","#E9AFC6","#F4D7E3","#241C1F","#48373E","#6C535D","#916F7C","#AC939D","#C8B7BE","#E3DBDE"] var palette = ["#000000","#202020","#404040","#606060","#808080","#A0A0A0","#C0C0C0","#E0E0E0","#FFFFFF","#800000","#FF0000","#808000","#FFFF00","#008000","#00FF00","#008080","#00FFFF","#000080","#0000FF","#800080","#FF00FF","#2B0000","#550000","#800000","#AA0000","#D40000","#FF0000","#FF2A2A","#FF5555","#FF8080","#FFAAAA","#FFD5D5","#280B0B","#501616","#782121","#A02C2C","#C83737","#D35F5F","#DE8787","#E9AFAF","#F4D7D7","#241C1C","#483737","#6C5353","#916F6F","#AC9393","#C8B7B7","#E3DBDB","#2B1100","#552200","#803300","#AA4400","#D45500","#FF6600","#FF7F2A","#FF9955","#FFB380","#FFCCAA","#FFE6D5","#28170B","#502D16","#784421","#A05A2C","#C87137","#D38D5F","#DEAA87","#E9C6AF","#F4E3D7","#241F1C","#483E37","#6C5D53","#917C6F","#AC9D93","#C8BEB7","#E3DEDB","#2B2200","#554400","#806600","#AA8800","#D4AA00","#FFCC00","#FFD42A","#FFDD55","#FFE680","#FFEEAA","#FFF6D5","#28220B","#504416","#786721","#A0892C","#C8AB37","#D3BC5F","#DECD87","#E9DDAF","#F4EED7","#24221C","#484537","#6C6753","#918A6F","#ACA793","#C8C4B7","#E3E2DB","#222B00","#445500","#668000","#88AA00","#AAD400","#CCFF00","#D4FF2A","#DDFF55","#E5FF80","#EEFFAA","#F6FFD5","#22280B","#445016","#677821","#89A02C","#ABC837","#BCD35F","#CDDE87","#DDE9AF","#EEF4D7","#22241C","#454837","#676C53","#8A916F","#A7AC93","#C4C8B7","#E2E3DB","#112B00","#225500","#338000","#44AA00","#55D400","#66FF00","#7FFF2A","#99FF55","#B3FF80","#CCFFAA","#E5FFD5","#17280B","#2D5016","#447821","#5AA02C","#71C837","#8DD35F","#AADE87","#C6E9AF","#E3F4D7","#1F241C","#3E4837","#5D6C53","#7C916F","#9DAC93","#BEC8B7","#DEE3DB","#002B00","#005500","#008000","#00AA00","#00D400","#00FF00","#2AFF2A","#55FF55","#80FF80","#AAFFAA","#D5FFD5","#0B280B","#165016","#217821","#2CA02C","#37C837","#5FD35F","#87DE87","#AFE9AF","#D7F4D7","#1C241C","#374837","#536C53","#6F916F","#93AC93","#B7C8B7","#DBE3DB","#002B11","#005522","#008033","#00AA44","#00D455","#00FF66","#2AFF80","#55FF99","#80FFB3","#AAFFCC","#D5FFE6","#0B2817","#16502D","#217844","#2CA05A","#37C871","#5FD38D","#87DEAA","#AFE9C6","#D7F4E3","#1C241F","#37483E","#536C5D","#6F917C","#93AC9D","#B7C8BE","#DBE3DE","#002B22","#005544","#008066","#00AA88","#00D4AA","#00FFCC","#2AFFD5","#55FFDD","#80FFE6","#AAFFEE","#D5FFF6","#0B2822","#165044","#217867","#2CA089","#37C8AB","#5FD3BC","#87DECD","#AFE9DD","#D7F4EE","#1C2422","#374845","#536C67","#6F918A","#93ACA7","#B7C8C4","#DBE3E2","#00222B","#004455","#006680","#0088AA","#00AAD4","#00CCFF","#2AD4FF","#55DDFF","#80E5FF","#AAEEFF","#D5F6FF","#0B2228","#164450","#216778","#2C89A0","#37ABC8","#5FBCD3","#87CDDE","#AFDDE9","#D7EEF4","#1C2224","#374548","#53676C","#6F8A91","#93A7AC","#B7C4C8","#DBE2E3","#00112B","#002255","#003380","#0044AA","#0055D4","#0066FF","#2A7FFF","#5599FF","#80B3FF","#AACCFF","#D5E5FF","#0B1728","#162D50","#214478","#2C5AA0","#3771C8","#5F8DD3","#87AADE","#AFC6E9","#D7E3F4","#1C1F24","#373E48","#535D6C","#6F7C91","#939DAC","#B7BEC8","#DBDEE3","#00002B","#000055","#000080","#0000AA","#0000D4","#0000FF","#2A2AFF","#5555FF","#8080FF","#AAAAFF","#D5D5FF","#0B0B28","#161650","#212178","#2C2CA0","#3737C8","#5F5FD3","#8787DE","#AFAFE9","#D7D7F4","#1C1C24","#373748","#53536C","#6F6F91","#9393AC","#B7B7C8","#DBDBE3","#11002B","#220055","#330080","#4400AA","#5500D4","#6600FF","#7F2AFF","#9955FF","#B380FF","#CCAAFF","#E5D5FF","#170B28","#2D1650","#442178","#5A2CA0","#7137C8","#8D5FD3","#AA87DE","#C6AFE9","#E3D7F4","#1F1C24","#3E3748","#5D536C","#7C6F91","#9D93AC","#BEB7C8","#DEDBE3","#22002B","#440055","#660080","#8800AA","#AA00D4","#CC00FF","#D42AFF","#DD55FF","#E580FF","#EEAAFF","#F6D5FF","#220B28","#441650","#672178","#892CA0","#AB37C8","#BC5FD3","#CD87DE","#DDAFE9","#EED7F4","#221C24","#453748","#67536C","#8A6F91","#A793AC","#C4B7C8","#E2DBE3","#2B0022","#550044","#800066","#AA0088","#D400AA","#FF00CC","#FF2AD4","#FF55DD","#FF80E5","#FFAAEE","#FFD5F6","#280B22","#501644","#782167","#A02C89","#C837AB","#D35FBC","#DE87CD","#E9AFDD","#F4D7EE","#241C22","#483745","#6C5367","#916F8A","#AC93A7","#C8B7C4","#E3DBE2","#2B0011","#550022","#800033","#AA0044","#D40055","#FF0066","#FF2A7F","#FF5599","#FF80B2","#FFAACC","#FFD5E5","#280B17","#50162D","#782144","#A02C5A","#C83771","#D35F8D","#DE87AA","#E9AFC6","#F4D7E3","#241C1F","#48373E","#6C535D","#916F7C","#AC939D","#C8B7BE","#E3DBDE"]
$(document).ready(function(){ $(document).ready(function(){
var str = '<div class="palette_item" style="background: url(\'none.png\');"></div>' var str = '<div class="palette_item" style="background: url(\'images/none.png\');"></div>'
$.each(palette, function(i,item){ $.each(palette, function(i,item){
str += '<div class="palette_item" style="background: ' + item + ';"></div>'; str += '<div class="palette_item" style="background: ' + item + ';"></div>';
}); });
$('#palette').append(str); $('#palette').append(str);
$('#stroke_width').change(function(){ $('#stroke_width').change(function(){
window.set_stroke_width(this.options[this.selectedIndex].value); svgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
}); });
$('.palette_item').click(function(){ $('.palette_item').click(function(){
color = $(this).css('background-color'); color = $(this).css('background-color');
if (color == 'transparent') { if (color == 'transparent') {
color = 'none'; color = 'none';
$('#fill_color').css('background', 'url(\'none.png\')'); $('#fill_color').css('background', 'url(\'images/none.png\')');
} else { } else {
$('#fill_color').css('background', color); $('#fill_color').css('background', color);
} }
window.set_fill_color(color); svgCanvas.setFillColor(color);
}); });
$('.palette_item').rightClick(function(){ $('.palette_item').rightClick(function(){
color = $(this).css('background-color'); color = $(this).css('background-color');
if (color == 'transparent') { if (color == 'transparent') {
color = 'none'; color = 'none';
$('#stroke_color').css('background', 'url(\'none.png\')'); $('#stroke_color').css('background', 'url(\'images/none.png\')');
} else { } else {
$('#stroke_color').css('background', color); $('#stroke_color').css('background', color);
} }
window.set_stroke_color(color); svgCanvas.setStrokeColor(color);
}); });
$('#tool_select').click(function(){ $('#tool_select').click(function(){
window.set_draw_mode('select'); svgCanvas.setMode('select');
}); });
$('#tool_path').click(function(){ $('#tool_path').click(function(){
window.set_draw_mode('path'); svgCanvas.setMode('path');
}); });
$('#tool_line').click(function(){ $('#tool_line').click(function(){
window.set_draw_mode('line'); svgCanvas.setMode('line');
}); });
$('#tool_square').click(function(){ $('#tool_square').click(function(){
window.set_draw_mode('square'); svgCanvas.setMode('square');
}); });
$('#tool_rect').click(function(){ $('#tool_rect').click(function(){
window.set_draw_mode('rect'); svgCanvas.setMode('rect');
}); });
$('#tool_fhrect').click(function(){ $('#tool_fhrect').click(function(){
window.set_draw_mode('fhrect'); svgCanvas.setMode('fhrect');
}); });
$('#tool_circle').click(function(){ $('#tool_circle').click(function(){
window.set_draw_mode('circle'); svgCanvas.setMode('circle');
}); });
$('#tool_ellipse').click(function(){ $('#tool_ellipse').click(function(){
window.set_draw_mode('ellipse'); svgCanvas.setMode('ellipse');
}); });
$('#tool_fhellipse').click(function(){ $('#tool_fhellipse').click(function(){
window.set_draw_mode('fhellipse'); svgCanvas.setMode('fhellipse');
}); });
$('#tool_delete').click(function(){ $('#tool_delete').click(function(){
window.set_draw_mode('delete'); svgCanvas.setMode('delete');
}); });
$('#tool_clear').click(function(){ $('#tool_clear').click(function(){
window.clear_svg(); svgCanvas.clear();
}); });
$('#tool_submit').click(function(){ $('#tool_submit').click(function(){
window.submit_svg(); svgCanvas.serialize(serializeHandler);
}); });
}) })