rewritten to OOP
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@13 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Pavol Rusnak
parent
c00d1cf107
commit
750fce2357
910
canvas.js
910
canvas.js
|
|
@ -1,495 +1,445 @@
|
|||
var canvas = null;
|
||||
|
||||
function svgCanvasInit(event) {
|
||||
canvas = new svgCanvas(event.target.ownerDocument);
|
||||
top.svgCanvas = canvas;
|
||||
canvas = new SvgCanvas(event.target.ownerDocument);
|
||||
canvas.setup(event);
|
||||
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)
|
||||
function SvgCanvas(doc)
|
||||
{
|
||||
|
||||
if (this.signature_started == 1 )
|
||||
{
|
||||
this.signature_started = 0 ;
|
||||
// private members
|
||||
|
||||
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 svgdoc = doc;
|
||||
var svgroot = svgdoc.documentElement;
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
var d_attr = "";
|
||||
var signature_started = 0;
|
||||
var obj_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 element = this.svgdoc.getElementById("path_" + this.obj_num);
|
||||
element.parentNode.removeChild(element);
|
||||
// private functions
|
||||
|
||||
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 assignAttributes = function(node, attrs) {
|
||||
for (i in attrs) {
|
||||
node.setAttributeNS(null, i, attrs[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var element = this.svgdoc.getElementById("path_" + this.obj_num);
|
||||
element.parentNode.removeChild(element);
|
||||
var createSvgElementFromJson = function(data) {
|
||||
var shape = svgdoc.createElementNS(svgns, data.element);
|
||||
assignAttributes(shape, data.attr);
|
||||
svgdoc.documentElement.appendChild(shape);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
var 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 + 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// private events
|
||||
|
||||
this.mouseDown = function(evt)
|
||||
{
|
||||
var x = evt.pageX;
|
||||
var y = evt.pageY;
|
||||
switch (current_draw_element)
|
||||
{
|
||||
case "select":
|
||||
signature_started = 1;
|
||||
rect_x = x;
|
||||
rect_y = y;
|
||||
createSvgElementFromJson({
|
||||
"element": "rect",
|
||||
"attr": {
|
||||
"x": x,
|
||||
"y": y,
|
||||
"width": "1px",
|
||||
"height": "1px",
|
||||
"id": "rect_" + obj_num,
|
||||
"fill": 'none',
|
||||
"stroke": 'black',
|
||||
"stroke-width": '1px',
|
||||
"stroke-dasharray": "2,2"
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "fhellipse":
|
||||
d_attr = "M" + x + " " + y + " ";
|
||||
signature_started = 1;
|
||||
createSvgElementFromJson({
|
||||
"element": "path",
|
||||
"attr": {
|
||||
"d": d_attr,
|
||||
"id": "path_" + obj_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;
|
||||
createSvgElementFromJson({
|
||||
"element": "path",
|
||||
"attr": {
|
||||
"d": d_attr,
|
||||
"id": "path_" + obj_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;
|
||||
createSvgElementFromJson({
|
||||
"element": "path",
|
||||
"attr": {
|
||||
"d": d_attr,
|
||||
"id": "path_" + obj_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;
|
||||
createSvgElementFromJson({
|
||||
"element": "rect",
|
||||
"attr": {
|
||||
"x": x,
|
||||
"y": y,
|
||||
"width": "1px",
|
||||
"height": "1px",
|
||||
"id": "rect_" + obj_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;
|
||||
createSvgElementFromJson({
|
||||
"element": "line",
|
||||
"attr": {
|
||||
"x1": x,
|
||||
"y1": y,
|
||||
"x2": x + 1 + "px",
|
||||
"y2": y + 1 + "px",
|
||||
"id": "line_" + obj_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;
|
||||
createSvgElementFromJson({
|
||||
"element": "ellipse",
|
||||
"attr": {
|
||||
"cx": x,
|
||||
"cy": y,
|
||||
"rx": 1 + "px",
|
||||
"ry": 1 + "px",
|
||||
"id": "ellipse_" + obj_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;
|
||||
}
|
||||
}
|
||||
|
||||
this.mouseMove = function(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 = svgdoc.getElementById("path_" + obj_num);
|
||||
shape.setAttributeNS(null, "d", d_attr);
|
||||
break;
|
||||
case "line":
|
||||
var shape = svgdoc.getElementById("line_" + obj_num);
|
||||
shape.setAttributeNS(null, "x2", x);
|
||||
shape.setAttributeNS(null, "y2", y);
|
||||
break;
|
||||
case "square":
|
||||
var shape = svgdoc.getElementById("rect_" + obj_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 = svgdoc.getElementById("rect_" + obj_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 = svgdoc.getElementById("ellipse_" + 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 = svgdoc.getElementById("ellipse_" + 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":
|
||||
d_attr = d_attr + "L" + x + " " + y + " ";
|
||||
var shape = svgdoc.getElementById("path_" + obj_num);
|
||||
shape.setAttributeNS(null, "d", d_attr);
|
||||
freehand_min_x = Math.min(x, freehand_min_x);
|
||||
freehand_max_x = Math.max(x, freehand_max_x);
|
||||
freehand_min_y = Math.min(y, freehand_min_y);
|
||||
freehand_max_y = Math.max(y, freehand_max_y);
|
||||
break;
|
||||
case "fhrect":
|
||||
d_attr = d_attr + "L" + x + " " + y + " ";
|
||||
var shape = svgdoc.getElementById("path_" + obj_num);
|
||||
shape.setAttributeNS(null, "d", d_attr);
|
||||
freehand_min_x = Math.min(x, freehand_min_x);
|
||||
freehand_max_x = Math.max(x, freehand_max_x);
|
||||
freehand_min_y = Math.min(y, freehand_min_y);
|
||||
freehand_max_y = Math.max(y, freehand_max_y);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.mouseUp = function(evt)
|
||||
{
|
||||
if (signature_started == 1)
|
||||
{
|
||||
signature_started = 0;
|
||||
switch (current_draw_element)
|
||||
{
|
||||
case "select":
|
||||
var element = svgdoc.getElementById("rect_" + obj_num);
|
||||
element.parentNode.removeChild(element);
|
||||
break;
|
||||
case "path":
|
||||
d_attr = 0;
|
||||
var element = svgdoc.getElementById("path_" + obj_num);
|
||||
element.setAttribute("stroke-opacity", 1.0);
|
||||
obj_num++;
|
||||
break;
|
||||
case "line":
|
||||
var element = svgdoc.getElementById("line_" + obj_num);
|
||||
element.setAttribute("stroke-opacity", 1.0);
|
||||
obj_num++;
|
||||
break;
|
||||
case "square":
|
||||
case "rect":
|
||||
var element = svgdoc.getElementById("rect_" + obj_num);
|
||||
element.setAttribute("fill-opacity", 1.0);
|
||||
element.setAttribute("stroke-opacity", 1.0);
|
||||
obj_num++;
|
||||
break;
|
||||
case "circle":
|
||||
case "ellipse":
|
||||
var element = svgdoc.getElementById("ellipse_" + obj_num);
|
||||
element.setAttribute("fill-opacity", 1.0);
|
||||
element.setAttribute("stroke-opacity", 1.0);
|
||||
obj_num++;
|
||||
break;
|
||||
case "fhellipse":
|
||||
d_attr = 0;
|
||||
var element = svgdoc.getElementById("path_" + obj_num);
|
||||
element.parentNode.removeChild(element);
|
||||
createSvgElementFromJson({
|
||||
"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_" + obj_num,
|
||||
"fill": current_draw_element_fill,
|
||||
"stroke": current_draw_element_stroke,
|
||||
"stroke-width": current_draw_element_stroke_width
|
||||
}
|
||||
});
|
||||
obj_num++;
|
||||
break;
|
||||
case "fhrect":
|
||||
d_attr = 0;
|
||||
var element = svgdoc.getElementById("path_" + obj_num);
|
||||
element.parentNode.removeChild(element);
|
||||
createSvgElementFromJson({
|
||||
"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_" + obj_num,
|
||||
"fill": current_draw_element_fill,
|
||||
"stroke": current_draw_element_stroke,
|
||||
"stroke-width": current_draw_element_stroke_width
|
||||
}
|
||||
});
|
||||
obj_num++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// public functions
|
||||
|
||||
this.serialize = function(handler) {
|
||||
var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n"
|
||||
str += "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
|
||||
str += svgToString(svgroot, 0);
|
||||
handler(str);
|
||||
}
|
||||
|
||||
this.clear = function() {
|
||||
var nodes = svgroot.childNodes;
|
||||
var len = svgroot.childNodes.length;
|
||||
var i = 0;
|
||||
for(var rep = 0; rep < len; rep++){
|
||||
if (nodes[i].nodeType == 1) { // element
|
||||
nodes[i].parentNode.removeChild(nodes[i]);
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setMode = function(name) {
|
||||
current_draw_element = name;
|
||||
}
|
||||
|
||||
this.setStrokeColor = function(color) {
|
||||
current_draw_element_stroke = color;
|
||||
}
|
||||
|
||||
this.setFillColor = function(color) {
|
||||
current_draw_element_fill = color;
|
||||
}
|
||||
|
||||
this.setStrokeColor = function(val) {
|
||||
current_draw_element_stroke_width = val;
|
||||
}
|
||||
|
||||
this.setup = function(evt) {
|
||||
assignAttributes(svgroot, {
|
||||
"onmouseup": "canvas.mouseUp(evt)",
|
||||
"onmousedown": "canvas.mouseDown(evt)",
|
||||
"onmousemove": "canvas.mouseMove(evt)"
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $(document).ready(function(){
|
|||
$('#palette').append(str);
|
||||
|
||||
$('#stroke_width').change(function(){
|
||||
svgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
|
||||
SvgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
|
||||
});
|
||||
|
||||
$('.palette_item').click(function(){
|
||||
|
|
@ -19,7 +19,7 @@ $(document).ready(function(){
|
|||
} else {
|
||||
$('#fill_color').css('background', color);
|
||||
}
|
||||
svgCanvas.setFillColor(color);
|
||||
SvgCanvas.setFillColor(color);
|
||||
});
|
||||
|
||||
$('.palette_item').rightClick(function(){
|
||||
|
|
@ -30,59 +30,59 @@ $(document).ready(function(){
|
|||
} else {
|
||||
$('#stroke_color').css('background', color);
|
||||
}
|
||||
svgCanvas.setStrokeColor(color);
|
||||
SvgCanvas.setStrokeColor(color);
|
||||
});
|
||||
|
||||
$('#tool_select').click(function(){
|
||||
svgCanvas.setMode('select');
|
||||
SvgCanvas.setMode('select');
|
||||
});
|
||||
|
||||
$('#tool_path').click(function(){
|
||||
svgCanvas.setMode('path');
|
||||
SvgCanvas.setMode('path');
|
||||
});
|
||||
|
||||
$('#tool_line').click(function(){
|
||||
svgCanvas.setMode('line');
|
||||
SvgCanvas.setMode('line');
|
||||
});
|
||||
|
||||
$('#tool_square').click(function(){
|
||||
svgCanvas.setMode('square');
|
||||
SvgCanvas.setMode('square');
|
||||
});
|
||||
|
||||
$('#tool_rect').click(function(){
|
||||
svgCanvas.setMode('rect');
|
||||
SvgCanvas.setMode('rect');
|
||||
});
|
||||
|
||||
$('#tool_fhrect').click(function(){
|
||||
svgCanvas.setMode('fhrect');
|
||||
SvgCanvas.setMode('fhrect');
|
||||
});
|
||||
|
||||
$('#tool_circle').click(function(){
|
||||
svgCanvas.setMode('circle');
|
||||
SvgCanvas.setMode('circle');
|
||||
});
|
||||
|
||||
$('#tool_ellipse').click(function(){
|
||||
svgCanvas.setMode('ellipse');
|
||||
SvgCanvas.setMode('ellipse');
|
||||
});
|
||||
|
||||
$('#tool_fhellipse').click(function(){
|
||||
svgCanvas.setMode('fhellipse');
|
||||
SvgCanvas.setMode('fhellipse');
|
||||
});
|
||||
|
||||
$('#tool_delete').click(function(){
|
||||
svgCanvas.setMode('delete');
|
||||
SvgCanvas.setMode('delete');
|
||||
});
|
||||
|
||||
$('#tool_clear').click(function(){
|
||||
svgCanvas.clear();
|
||||
SvgCanvas.clear();
|
||||
});
|
||||
|
||||
$('#tool_submit').click(function(){
|
||||
svgCanvas.serialize(serializeHandler);
|
||||
SvgCanvas.serialize(serializeHandler);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
function serializeHandler(str){
|
||||
alert(str);
|
||||
function serializeHandler(svg) {
|
||||
alert(svg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue