start with cleaning up the code
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@12 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Pavol Rusnak
parent
732f86cdab
commit
c00d1cf107
|
|
@ -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 |
517
blanksvg.js
517
blanksvg.js
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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 |
|
Before Width: | Height: | Size: 663 B After Width: | Height: | Size: 663 B |
|
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
|
Before Width: | Height: | Size: 549 B After Width: | Height: | Size: 549 B |
|
Before Width: | Height: | Size: 665 B After Width: | Height: | Size: 665 B |
|
Before Width: | Height: | Size: 136 B After Width: | Height: | Size: 136 B |
|
Before Width: | Height: | Size: 801 B After Width: | Height: | Size: 801 B |
|
Before Width: | Height: | Size: 428 B After Width: | Height: | Size: 428 B |
|
Before Width: | Height: | Size: 456 B After Width: | Height: | Size: 456 B |
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
|
|
@ -21,7 +21,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#fill_color {
|
#fill_color {
|
||||||
background: url('none.png');
|
background: url('images/none.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
#stroke_color {
|
#stroke_color {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue