rewritten to OOP
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@13 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Pavol Rusnak
910
canvas.js
910
canvas.js
@@ -1,495 +1,445 @@
|
|||||||
var canvas = null;
|
var canvas = null;
|
||||||
|
|
||||||
function svgCanvasInit(event) {
|
function svgCanvasInit(event) {
|
||||||
canvas = new svgCanvas(event.target.ownerDocument);
|
canvas = new SvgCanvas(event.target.ownerDocument);
|
||||||
top.svgCanvas = canvas;
|
canvas.setup(event);
|
||||||
|
top.SvgCanvas = canvas;
|
||||||
}
|
}
|
||||||
|
|
||||||
function svgCanvas(doc) {
|
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 )
|
// private members
|
||||||
{
|
|
||||||
this.signature_started = 0 ;
|
|
||||||
|
|
||||||
switch (this.current_draw_element)
|
var svgdoc = doc;
|
||||||
{
|
var svgroot = svgdoc.documentElement;
|
||||||
case "select":
|
var svgns = "http://www.w3.org/2000/svg";
|
||||||
var element = this.svgdoc.getElementById("rect_" + this.obj_num);
|
var d_attr = "";
|
||||||
element.parentNode.removeChild(element);
|
var signature_started = 0;
|
||||||
break;
|
var obj_num = 1;
|
||||||
case "path":
|
var rect_x = null;
|
||||||
this.d_attr = 0 ;
|
var rect_y = null;
|
||||||
var element = this.svgdoc.getElementById("path_" + this.obj_num);
|
var current_draw_element = "path";
|
||||||
element.setAttribute("stroke-opacity", 1.0);
|
var current_draw_element_fill = "none";
|
||||||
this.obj_num++;
|
var current_draw_element_stroke_width = "1px";
|
||||||
break;
|
var current_draw_element_stroke = "black";
|
||||||
case "line":
|
var freehand_min_x = null;
|
||||||
var element = this.svgdoc.getElementById("line_" + this.obj_num);
|
var freehand_max_x = null;
|
||||||
element.setAttribute("stroke-opacity", 1.0);
|
var freehand_min_y = null;
|
||||||
this.obj_num++;
|
var freehand_max_y = null;
|
||||||
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);
|
// private functions
|
||||||
element.parentNode.removeChild(element);
|
|
||||||
|
|
||||||
this.create_svg_element_by_json({
|
var assignAttributes = function(node, attrs) {
|
||||||
"element": "ellipse",
|
for (i in attrs) {
|
||||||
"Attr": {
|
node.setAttributeNS(null, i, attrs[i]);
|
||||||
"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);
|
var createSvgElementFromJson = function(data) {
|
||||||
element.parentNode.removeChild(element);
|
var shape = svgdoc.createElementNS(svgns, data.element);
|
||||||
|
assignAttributes(shape, data.attr);
|
||||||
|
svgdoc.documentElement.appendChild(shape);
|
||||||
|
}
|
||||||
|
|
||||||
this.create_svg_element_by_json({
|
var svgToString = function(elem, indent) {
|
||||||
"element": "rect",
|
var out = "";
|
||||||
"Attr": {
|
if (elem) {
|
||||||
"x": this.freehand_min_x,
|
var attrs = elem.attributes;
|
||||||
"y": this.freehand_min_y,
|
var attr;
|
||||||
"width": (this.freehand_max_x - this.freehand_min_x ) + "px",
|
var i;
|
||||||
"height": (this.freehand_max_y - this.freehand_min_y ) + "px",
|
var childs = elem.childNodes;
|
||||||
"id": "rect_" + this.obj_num,
|
// don't include scripts in output svg
|
||||||
"fill": this.current_draw_element_fill,
|
if (elem.nodeName == "script") return "";
|
||||||
"stroke": this.current_draw_element_stroke,
|
for (i=0; i<indent; i++) out += " ";
|
||||||
"stroke-width": this.current_draw_element_stroke_width
|
out += "<" + elem.nodeName;
|
||||||
}
|
for (i=attrs.length-1; i>=0; i--) {
|
||||||
});
|
attr = attrs.item(i);
|
||||||
this.obj_num = obj_num + 1 ;
|
// don't include events in output svg
|
||||||
break;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
// private events
|
||||||
|
|
||||||
}
|
this.mouseDown = function(evt)
|
||||||
|
{
|
||||||
|
var x = evt.pageX;
|
||||||
this.mouseDown = function(evt)
|
var y = evt.pageY;
|
||||||
{
|
switch (current_draw_element)
|
||||||
|
{
|
||||||
var x = evt.pageX;
|
case "select":
|
||||||
var y = evt.pageY;
|
signature_started = 1;
|
||||||
|
rect_x = x;
|
||||||
switch (this.current_draw_element)
|
rect_y = y;
|
||||||
{
|
createSvgElementFromJson({
|
||||||
case "select":
|
"element": "rect",
|
||||||
this.signature_started = 1 ;
|
"attr": {
|
||||||
this.rect_x = x ;
|
"x": x,
|
||||||
this.rect_y = y ;
|
"y": y,
|
||||||
this.create_svg_element_by_json({
|
"width": "1px",
|
||||||
"element": "rect",
|
"height": "1px",
|
||||||
"Attr": {
|
"id": "rect_" + obj_num,
|
||||||
"x": x,
|
"fill": 'none',
|
||||||
"y": y,
|
"stroke": 'black',
|
||||||
"width": "1px",
|
"stroke-width": '1px',
|
||||||
"height": "1px",
|
"stroke-dasharray": "2,2"
|
||||||
"id": "rect_" + this.obj_num,
|
}
|
||||||
"fill": 'none',
|
});
|
||||||
"stroke": 'black',
|
break;
|
||||||
"stroke-width": '1px',
|
case "fhellipse":
|
||||||
"stroke-dasharray": "2,2"
|
d_attr = "M" + x + " " + y + " ";
|
||||||
}
|
signature_started = 1;
|
||||||
});
|
createSvgElementFromJson({
|
||||||
break;
|
"element": "path",
|
||||||
case "fhellipse":
|
"attr": {
|
||||||
this.d_attr = "M" + x + " " + y + " ";
|
"d": d_attr,
|
||||||
this.signature_started = 1 ;
|
"id": "path_" + obj_num,
|
||||||
|
"fill": "none",
|
||||||
this.create_svg_element_by_json({
|
"stroke": current_draw_element_stroke,
|
||||||
"element": "path",
|
"stroke-width": current_draw_element_stroke_width,
|
||||||
"Attr": {
|
"stroke-opacity": 0.5
|
||||||
"d": this.d_attr,
|
}
|
||||||
"id": "path_" + this.obj_num,
|
});
|
||||||
"fill": "none",
|
freehand_min_x = x;
|
||||||
"stroke": this.current_draw_element_stroke,
|
freehand_max_x = x;
|
||||||
"stroke-width": this.current_draw_element_stroke_width,
|
freehand_min_y = y;
|
||||||
"stroke-opacity": 0.5
|
freehand_max_y = y;
|
||||||
}
|
break;
|
||||||
|
case "fhrect":
|
||||||
});
|
d_attr = "M" + x + " " + y + " ";
|
||||||
|
signature_started = 1;
|
||||||
this.freehand_min_x = x ;
|
createSvgElementFromJson({
|
||||||
this.freehand_max_x = x ;
|
"element": "path",
|
||||||
this.freehand_min_y = y ;
|
"attr": {
|
||||||
this.freehand_max_y = y ;
|
"d": d_attr,
|
||||||
|
"id": "path_" + obj_num,
|
||||||
break;
|
"fill": "none",
|
||||||
case "fhrect":
|
"stroke": current_draw_element_stroke,
|
||||||
this.d_attr = "M" + x + " " + y + " ";
|
"stroke-width": current_draw_element_stroke_width,
|
||||||
this.signature_started = 1 ;
|
"stroke-opacity": 0.5
|
||||||
|
}
|
||||||
this.create_svg_element_by_json({
|
});
|
||||||
"element": "path",
|
freehand_min_x = x;
|
||||||
"Attr": {
|
freehand_max_x = x;
|
||||||
"d": this.d_attr,
|
freehand_min_y = y;
|
||||||
"id": "path_" + this.obj_num,
|
freehand_max_y = y;
|
||||||
"fill": "none",
|
break;
|
||||||
"stroke": this.current_draw_element_stroke,
|
case "path":
|
||||||
"stroke-width": this.current_draw_element_stroke_width,
|
d_attr = "M" + x + " " + y + " ";
|
||||||
"stroke-opacity": 0.5
|
signature_started = 1;
|
||||||
}
|
createSvgElementFromJson({
|
||||||
|
"element": "path",
|
||||||
});
|
"attr": {
|
||||||
|
"d": d_attr,
|
||||||
this.freehand_min_x = x ;
|
"id": "path_" + obj_num,
|
||||||
this.freehand_max_x = x ;
|
"fill": "none",
|
||||||
this.freehand_min_y = y ;
|
"stroke": current_draw_element_stroke,
|
||||||
this.freehand_max_y = y ;
|
"stroke-width": current_draw_element_stroke_width,
|
||||||
|
"stroke-opacity": 0.5
|
||||||
break;
|
}
|
||||||
case "path":
|
});
|
||||||
this.d_attr = "M" + x + " " + y + " ";
|
break;
|
||||||
this.signature_started = 1 ;
|
case "square":
|
||||||
|
case "rect":
|
||||||
this.create_svg_element_by_json({
|
signature_started = 1;
|
||||||
"element": "path",
|
rect_x = x;
|
||||||
"Attr": {
|
rect_y = y;
|
||||||
"d": this.d_attr,
|
createSvgElementFromJson({
|
||||||
"id": "path_" + this.obj_num,
|
"element": "rect",
|
||||||
"fill": "none",
|
"attr": {
|
||||||
"stroke": this.current_draw_element_stroke,
|
"x": x,
|
||||||
"stroke-width": this.current_draw_element_stroke_width,
|
"y": y,
|
||||||
"stroke-opacity": 0.5
|
"width": "1px",
|
||||||
}
|
"height": "1px",
|
||||||
|
"id": "rect_" + obj_num,
|
||||||
});
|
"fill": current_draw_element_fill,
|
||||||
|
"stroke": current_draw_element_stroke,
|
||||||
break;
|
"stroke-width": current_draw_element_stroke_width,
|
||||||
case "square":
|
"fill-opacity": 0.5,
|
||||||
case "rect":
|
"stroke-opacity": 0.5
|
||||||
this.signature_started = 1 ;
|
}
|
||||||
this.rect_x = x ;
|
});
|
||||||
this.rect_y = y ;
|
break;
|
||||||
create_svg_element_by_json({
|
case "line":
|
||||||
"element": "rect",
|
signature_started = 1;
|
||||||
"Attr": {
|
createSvgElementFromJson({
|
||||||
"x": x,
|
"element": "line",
|
||||||
"y": y,
|
"attr": {
|
||||||
"width": "1px",
|
"x1": x,
|
||||||
"height": "1px",
|
"y1": y,
|
||||||
"id": "rect_" + this.obj_num,
|
"x2": x + 1 + "px",
|
||||||
"fill": this.current_draw_element_fill,
|
"y2": y + 1 + "px",
|
||||||
"stroke": this.current_draw_element_stroke,
|
"id": "line_" + obj_num,
|
||||||
"stroke-width": this.current_draw_element_stroke_width,
|
"stroke": current_draw_element_stroke,
|
||||||
"fill-opacity": 0.5,
|
"stroke-width": current_draw_element_stroke_width,
|
||||||
"stroke-opacity": 0.5
|
"stroke-opacity": 0.5
|
||||||
}
|
}
|
||||||
|
});
|
||||||
});
|
break;
|
||||||
break;
|
case "circle":
|
||||||
case "line":
|
case "ellipse":
|
||||||
this.signature_started = 1 ;
|
signature_started = 1;
|
||||||
|
createSvgElementFromJson({
|
||||||
this.create_svg_element_by_json({
|
"element": "ellipse",
|
||||||
"element": "line",
|
"attr": {
|
||||||
"Attr": {
|
"cx": x,
|
||||||
"x1": this.x,
|
"cy": y,
|
||||||
"y1": this.y,
|
"rx": 1 + "px",
|
||||||
"x2": this.x + 1 + "px",
|
"ry": 1 + "px",
|
||||||
"y2": this.y + 1 + "px",
|
"id": "ellipse_" + obj_num,
|
||||||
"id": "line_" + this.obj_num,
|
"fill": current_draw_element_fill,
|
||||||
"stroke": this.current_draw_element_stroke,
|
"stroke": current_draw_element_stroke,
|
||||||
"stroke-width": this.current_draw_element_stroke_width,
|
"stroke-width": current_draw_element_stroke_width,
|
||||||
"stroke-opacity": 0.5
|
"fill-opacity": 0.5,
|
||||||
}
|
"stroke-opacity": 0.5
|
||||||
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case "circle":
|
case "delete":
|
||||||
case "ellipse":
|
var t = evt.target;
|
||||||
this.signature_started = 1 ;
|
if(svgroot == evt.target) return;
|
||||||
this.create_svg_element_by_json({
|
t.parentNode.removeChild(t);
|
||||||
"element": "ellipse",
|
break;
|
||||||
"Attr": {
|
}
|
||||||
"cx": x,
|
}
|
||||||
"cy": y,
|
|
||||||
"rx": 1 + "px",
|
this.mouseMove = function(evt)
|
||||||
"ry": 1 + "px",
|
{
|
||||||
"id": "ellipse_" + this.obj_num,
|
if (signature_started == 1)
|
||||||
"fill": this.current_draw_element_fill,
|
{
|
||||||
"stroke": this.current_draw_element_stroke,
|
var x = evt.pageX;
|
||||||
"stroke-width": this.current_draw_element_stroke_width,
|
var y = evt.pageY;
|
||||||
"fill-opacity": 0.5,
|
switch (current_draw_element)
|
||||||
"stroke-opacity": 0.5
|
{
|
||||||
}
|
case "path":
|
||||||
});
|
d_attr = d_attr + "L" + x + " " + y + " ";
|
||||||
break;
|
var shape = svgdoc.getElementById("path_" + obj_num);
|
||||||
case "delete":
|
shape.setAttributeNS(null, "d", d_attr);
|
||||||
var T=evt.target
|
break;
|
||||||
if(this.svgroot == evt.target ) return ;
|
case "line":
|
||||||
T.parentNode.removeChild(T);
|
var shape = svgdoc.getElementById("line_" + obj_num);
|
||||||
break;
|
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) );
|
||||||
this.mouseMove = function(evt)
|
shape.setAttributeNS(null, "width", size);
|
||||||
{
|
shape.setAttributeNS(null, "height", size);
|
||||||
if (this.signature_started == 1 )
|
if(rect_x < x) {
|
||||||
{
|
shape.setAttributeNS(null, "x", rect_x);
|
||||||
var x = evt.pageX;
|
} else {
|
||||||
var y = evt.pageY;
|
shape.setAttributeNS(null, "x", rect_x - size);
|
||||||
|
}
|
||||||
|
if(rect_y < y) {
|
||||||
switch (this.current_draw_element)
|
shape.setAttributeNS(null, "y", rect_y);
|
||||||
{
|
} else {
|
||||||
case "path":
|
shape.setAttributeNS(null, "y", rect_y - size);
|
||||||
|
}
|
||||||
this.d_attr = this.d_attr + "L" + x + " " + y + " ";
|
break;
|
||||||
var shape = this.svgdoc.getElementById("path_" + this.obj_num);
|
case "select":
|
||||||
shape.setAttributeNS(null, "d", this.d_attr);
|
case "rect":
|
||||||
break;
|
var shape = svgdoc.getElementById("rect_" + obj_num);
|
||||||
|
if (rect_x < x) {
|
||||||
case "line":
|
shape.setAttributeNS(null, "x", rect_x);
|
||||||
var shape = this.svgdoc.getElementById("line_" + this.obj_num);
|
shape.setAttributeNS(null, "width", x - rect_x);
|
||||||
shape.setAttributeNS(null, "x2", x);
|
} else {
|
||||||
shape.setAttributeNS(null, "y2", y);
|
shape.setAttributeNS(null, "x", x);
|
||||||
break;
|
shape.setAttributeNS(null, "width", rect_x - x);
|
||||||
|
}
|
||||||
case "square":
|
if (rect_y < y) {
|
||||||
|
shape.setAttributeNS(null, "y", rect_y);
|
||||||
var shape = this.svgdoc.getElementById("rect_" + this.obj_num);
|
shape.setAttributeNS(null, "height", y - rect_y);
|
||||||
var size = Math.max( Math.abs(x-this.rect_x) , Math.abs(y-this.rect_y) );
|
} else {
|
||||||
|
shape.setAttributeNS(null, "y", y);
|
||||||
shape.setAttributeNS(null, "width", this.size);
|
shape.setAttributeNS(null, "height", rect_y - y);
|
||||||
shape.setAttributeNS(null, "height", this.size);
|
}
|
||||||
if(rect_x < x ){
|
break;
|
||||||
shape.setAttributeNS(null, "x", this.rect_x);
|
case "circle":
|
||||||
}else{
|
var shape = svgdoc.getElementById("ellipse_" + obj_num);
|
||||||
shape.setAttributeNS(null, "x", this.rect_x - size);
|
var cx = shape.getAttributeNS(null, "cx");
|
||||||
}
|
var cy = shape.getAttributeNS(null, "cy");
|
||||||
if(rect_y < y ){
|
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
|
||||||
shape.setAttributeNS(null, "y", this.rect_y);
|
shape.setAttributeNS(null, "rx", rad);
|
||||||
}else{
|
shape.setAttributeNS(null, "ry", rad);
|
||||||
shape.setAttributeNS(null, "y", this.rect_y - size);
|
break;
|
||||||
}
|
case "ellipse":
|
||||||
|
var shape = svgdoc.getElementById("ellipse_" + obj_num);
|
||||||
break;
|
var cx = shape.getAttributeNS(null, "cx");
|
||||||
case "select":
|
var cy = shape.getAttributeNS(null, "cy");
|
||||||
case "rect":
|
shape.setAttributeNS(null, "rx", Math.abs(x - cx) );
|
||||||
|
shape.setAttributeNS(null, "ry", Math.abs(y - cy) );
|
||||||
var shape = this.svgdoc.getElementById("rect_" + this.obj_num);
|
break;
|
||||||
|
case "fhellipse":
|
||||||
if(rect_x < x ){
|
d_attr = d_attr + "L" + x + " " + y + " ";
|
||||||
shape.setAttributeNS(null, "x", this.rect_x);
|
var shape = svgdoc.getElementById("path_" + obj_num);
|
||||||
shape.setAttributeNS(null, "width", x - this.rect_x);
|
shape.setAttributeNS(null, "d", d_attr);
|
||||||
}else{
|
freehand_min_x = Math.min(x, freehand_min_x);
|
||||||
shape.setAttributeNS(null, "x", x);
|
freehand_max_x = Math.max(x, freehand_max_x);
|
||||||
shape.setAttributeNS(null, "width", this.rect_x - x);
|
freehand_min_y = Math.min(y, freehand_min_y);
|
||||||
}
|
freehand_max_y = Math.max(y, freehand_max_y);
|
||||||
if(rect_y < y ){
|
break;
|
||||||
shape.setAttributeNS(null, "y", this.rect_y);
|
case "fhrect":
|
||||||
shape.setAttributeNS(null, "height", y - this.rect_y);
|
d_attr = d_attr + "L" + x + " " + y + " ";
|
||||||
}else{
|
var shape = svgdoc.getElementById("path_" + obj_num);
|
||||||
shape.setAttributeNS(null, "y", y);
|
shape.setAttributeNS(null, "d", d_attr);
|
||||||
shape.setAttributeNS(null, "height", this.rect_y - y);
|
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);
|
||||||
break;
|
freehand_max_y = Math.max(y, freehand_max_y);
|
||||||
case "circle":
|
break;
|
||||||
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) );
|
|
||||||
|
this.mouseUp = function(evt)
|
||||||
shape.setAttributeNS(null, "rx", rad);
|
{
|
||||||
shape.setAttributeNS(null, "ry", rad);
|
if (signature_started == 1)
|
||||||
break;
|
{
|
||||||
case "ellipse":
|
signature_started = 0;
|
||||||
var shape = this.svgdoc.getElementById("ellipse_" + this.obj_num);
|
switch (current_draw_element)
|
||||||
var cx = shape.getAttributeNS(null, "cx");
|
{
|
||||||
var cy = shape.getAttributeNS(null, "cy");
|
case "select":
|
||||||
|
var element = svgdoc.getElementById("rect_" + obj_num);
|
||||||
shape.setAttributeNS(null, "rx", Math.abs(x-cx));
|
element.parentNode.removeChild(element);
|
||||||
shape.setAttributeNS(null, "ry", Math.abs(y-cy));
|
break;
|
||||||
break;
|
case "path":
|
||||||
|
d_attr = 0;
|
||||||
case "fhellipse":
|
var element = svgdoc.getElementById("path_" + obj_num);
|
||||||
this.d_attr = this.d_attr + "L" + x + " " + y + " ";
|
element.setAttribute("stroke-opacity", 1.0);
|
||||||
var shape = this.svgdoc.getElementById("path_" + this.obj_num);
|
obj_num++;
|
||||||
shape.setAttributeNS(null, "d", this.d_attr);
|
break;
|
||||||
|
case "line":
|
||||||
this.freehand_min_x = Math.min(x , this.freehand_min_x ) ;
|
var element = svgdoc.getElementById("line_" + obj_num);
|
||||||
this.freehand_max_x = Math.max(x , this.freehand_max_x ) ;
|
element.setAttribute("stroke-opacity", 1.0);
|
||||||
this.freehand_min_y = Math.min(y , this.freehand_min_y ) ;
|
obj_num++;
|
||||||
this.freehand_max_y = Math.max(y , this.freehand_max_y ) ;
|
break;
|
||||||
break;
|
case "square":
|
||||||
|
case "rect":
|
||||||
case "fhrect":
|
var element = svgdoc.getElementById("rect_" + obj_num);
|
||||||
this.d_attr = this.d_attr + "L" + x + " " + y + " ";
|
element.setAttribute("fill-opacity", 1.0);
|
||||||
var shape = this.svgdoc.getElementById("path_" + this.obj_num);
|
element.setAttribute("stroke-opacity", 1.0);
|
||||||
shape.setAttributeNS(null, "d", this.d_attr);
|
obj_num++;
|
||||||
|
break;
|
||||||
this.freehand_min_x = Math.min(x , this.freehand_min_x ) ;
|
case "circle":
|
||||||
this.freehand_max_x = Math.max(x , this.freehand_max_x ) ;
|
case "ellipse":
|
||||||
this.freehand_min_y = Math.min(y , this.freehand_min_y ) ;
|
var element = svgdoc.getElementById("ellipse_" + obj_num);
|
||||||
this.freehand_max_y = Math.max(y , this.freehand_max_y ) ;
|
element.setAttribute("fill-opacity", 1.0);
|
||||||
break;
|
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);
|
$('#palette').append(str);
|
||||||
|
|
||||||
$('#stroke_width').change(function(){
|
$('#stroke_width').change(function(){
|
||||||
svgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
|
SvgCanvas.setStrokeColor(this.options[this.selectedIndex].value);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.palette_item').click(function(){
|
$('.palette_item').click(function(){
|
||||||
@@ -19,7 +19,7 @@ $(document).ready(function(){
|
|||||||
} else {
|
} else {
|
||||||
$('#fill_color').css('background', color);
|
$('#fill_color').css('background', color);
|
||||||
}
|
}
|
||||||
svgCanvas.setFillColor(color);
|
SvgCanvas.setFillColor(color);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.palette_item').rightClick(function(){
|
$('.palette_item').rightClick(function(){
|
||||||
@@ -30,59 +30,59 @@ $(document).ready(function(){
|
|||||||
} else {
|
} else {
|
||||||
$('#stroke_color').css('background', color);
|
$('#stroke_color').css('background', color);
|
||||||
}
|
}
|
||||||
svgCanvas.setStrokeColor(color);
|
SvgCanvas.setStrokeColor(color);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_select').click(function(){
|
$('#tool_select').click(function(){
|
||||||
svgCanvas.setMode('select');
|
SvgCanvas.setMode('select');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_path').click(function(){
|
$('#tool_path').click(function(){
|
||||||
svgCanvas.setMode('path');
|
SvgCanvas.setMode('path');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_line').click(function(){
|
$('#tool_line').click(function(){
|
||||||
svgCanvas.setMode('line');
|
SvgCanvas.setMode('line');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_square').click(function(){
|
$('#tool_square').click(function(){
|
||||||
svgCanvas.setMode('square');
|
SvgCanvas.setMode('square');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_rect').click(function(){
|
$('#tool_rect').click(function(){
|
||||||
svgCanvas.setMode('rect');
|
SvgCanvas.setMode('rect');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_fhrect').click(function(){
|
$('#tool_fhrect').click(function(){
|
||||||
svgCanvas.setMode('fhrect');
|
SvgCanvas.setMode('fhrect');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_circle').click(function(){
|
$('#tool_circle').click(function(){
|
||||||
svgCanvas.setMode('circle');
|
SvgCanvas.setMode('circle');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_ellipse').click(function(){
|
$('#tool_ellipse').click(function(){
|
||||||
svgCanvas.setMode('ellipse');
|
SvgCanvas.setMode('ellipse');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_fhellipse').click(function(){
|
$('#tool_fhellipse').click(function(){
|
||||||
svgCanvas.setMode('fhellipse');
|
SvgCanvas.setMode('fhellipse');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_delete').click(function(){
|
$('#tool_delete').click(function(){
|
||||||
svgCanvas.setMode('delete');
|
SvgCanvas.setMode('delete');
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_clear').click(function(){
|
$('#tool_clear').click(function(){
|
||||||
svgCanvas.clear();
|
SvgCanvas.clear();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#tool_submit').click(function(){
|
$('#tool_submit').click(function(){
|
||||||
svgCanvas.serialize(serializeHandler);
|
SvgCanvas.serialize(serializeHandler);
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function serializeHandler(str){
|
function serializeHandler(svg) {
|
||||||
alert(str);
|
alert(svg);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user