SVG实例--svg编辑器---(打开,保存,新建,拖动)

最新推荐文章于 2023-10-30 19:01:09 发布

wujiancumt2006

最新推荐文章于 2023-10-30 19:01:09 发布

阅读量4.8k

点赞数

文章标签： encoding newline 图形 image javascript null

该例实现了，画线，圆，矩形，以及选择图形，并把图形至于顶层，还有拖动图形等功能。对于使用Javascript语言分析SVG文件有很大的帮助。感谢不知名的提供者。

<? xml version="1.0" encoding="iso-8859-1" ?>

< svg id ="svg" viewBox ="0 0 1006 616" >

< script type ="text/javascript" >

<![CDATA[

//编辑删除

//----------------draw circle---------------------

var xCenter;

var yCenter;

var rCircle;

var circleFlag=0;

var codeCircle;

var sd=document.getElementById("SD");

function drawCircle(){

var newCircle=document.createElement("circle");

xCenter=evt.getClientX();

yCenter=evt.getClientY();

newCircle.setAttribute("cx",xCenter);

newCircle.setAttribute("cy",yCenter);

newCircle.setAttribute("r",0);

newCircle.setAttribute("stroke","red");

newCircle.setAttribute("stroke-width","1");

newCircle.setAttribute("fill","blue");

var plat=document.getElementById("plat");

plat.appendChild(newCircle);

circleFlag=1

}

function modifyCircle(){

if(circleFlag==1){

var plat=document.getElementById("plat");

var theCircle=plat.lastChild;

var screenX =evt.getClientX();

var screenY =evt.getClientY();

x=screenX-xCenter;

y=screenY-yCenter;

rCircle= parseInt(Math.sqrt(x*x+y*y));

theCircle.setAttribute("r",rCircle);

}

function endCircle(){

//codeCircle="<circle cx=""+xCenter+"" cy=""+yCenter+"" r=""+rCircle+"" stroke="red" stroke-width="1"

fill="blue" />";

//codeAll=codeAll+codeCircle;

circleFlag=0;

var plat=document.getElementById("plat");

theCircle=plat.lastChild;

plat.appendChild(theCircle);

sd.firstChild.setData(codeCircle);

}

//-----------------draw rect----------------------

var xRectStart;

var yRectStart;

var rectFlag=0;

var codeRect;

var widthRect;

var heightRect;

var sd=document.getElementById("SD");

function drawRect(){

var newRect=document.createElement("rect");

xRectStart=evt.getClientX();

yRectStart=evt.getClientY();

newRect.setAttribute("x",xRectStart);

newRect.setAttribute("y",yRectStart);

newRect.setAttribute("width",0);

newRect.setAttribute("height",0);

newRect.setAttribute("stroke","red");

newRect.setAttribute("stroke-width","1");

newRect.setAttribute("fill","blue");

var plat=document.getElementById("plat");

plat.appendChild(newRect);

rectFlag=1

}

function modifyRect(){

if(rectFlag==1){

var plat=document.getElementById("plat");

var theCircle=plat.lastChild;

var screenX =evt.getClientX();

var screenY =evt.getClientY();

widthRect=screenX-xRectStart;

heightRect=screenY-yRectStart;

theCircle.setAttribute("width",widthRect);

theCircle.setAttribute("height",heightRect);

}

function endRect(){

//codeRect="<rect x=""+xRectStart+"" y=""+yRectStart+"" width=""+widthRect+"" height=""+heightRect+""

stroke="red" stroke-width="1" fill="blue" />";

//codeAll=codeAll+codeRect;

rectFlag=0;

var plat=document.getElementById("plat");

theRect=plat.lastChild;

plat.appendChild(theRect);

sd.firstChild.setData(codeRect);

}

//---------------------draw with Image---------

var xImageScreen;

var yImageScreen;

var plat;

var switchScr="12.jpg";

var imageFlag;

var codeImage;

var sd=document.getElementById("SD");

function startImage(){

plat=document.getElementById("plat");

var newImg=document.createElement("image");

xImageScreen=evt.getClientX();

yImageScreen=evt.getClientY();

newImg.setAttribute("x",xImageScreen);

newImg.setAttribute("y",yImageScreen);

newImg.setAttribute("width","60");

newImg.setAttribute("height","60");

newImg.setAttributeNS("http://www.w3.org/2000/xlink/namespace/","xlink:href",switchScr);

plat.appendChild(newImg);

imageFlag=true;

}

function modifyImage(){

if(imageFlag==true){

theImg=plat.lastChild;

xImageScreen=evt.getClientX();

yImageScreen=evt.getClientY();

theImg.setAttribute("x",xImageScreen);

theImg.setAttribute("y",yImageScreen);

}

function endImage(){

//codeImage="<image x=""+xImageScreen+"" y=""+yImageScreen+"" width="60" height="60"

xlink:href=""+switchScr+""/>";

//codeAll=codeAll+codeImage;

theImg=plat.lastChild;

plat.appendChild(theImg);

imageFlag=false;

sd.firstChild.setData(codeImage);

}

//---------------------drawLine()----------------------

var xLineEnd=0;

var yLineEnd=60;

var xLineStart;

var yLineStart;

var lineFlag=false;

var codeLine;

var sd=document.getElementById("SD");

function drawLine(){

var newLine=document.createElement("line");

xLineStart=evt.getClientX();

yLineStart=evt.getClientY();

newLine.setAttribute("x1",xLineStart);

newLine.setAttribute("y1",yLineStart);

newLine.setAttribute("x2",xLineEnd);

newLine.setAttribute("y2",yLineEnd);

newLine.setAttribute("stroke","red");

newLine.setAttribute("stroke-width","2");

var plat=document.getElementById("plat");

plat.appendChild(newLine);

lineFlag=true;

}

function modifyLine(){

if(lineFlag==true){

var plat=document.getElementById("plat");

var theLine=plat.lastChild;

xLineEnd =evt.getClientX();

yLineEnd =evt.getClientY();

theLine.setAttribute("x2",xLineEnd);

theLine.setAttribute("y2",yLineEnd);

}

function endLine(){

// codeLine="<line x1=""+xLineStart+"" y1=""+yLineStart+"" x2=""+xLineEnd+"" y2=""+yLineEnd+""

stroke="red" stroke-width="2" />";

// codeAll=codeAll+codeLine;

lineFlag=false;

var plat=document.getElementById("plat");

theLine=plat.lastChild;

plat.appendChild(theLine);

xLineEnd=0;

yLineEnd=60;

sd.firstChild.setData(codeLine);

}

//------------------drag images-------------------

var targetMaxtrix;

var dragTarget;

var dragStartX;

var dragStartY;

var dragFlag=false;

//var backRect=document.getElementById("backRect");

var dragID;

//var hasTransform;

function startDrag(){

dragTarget=evt.target;

dragID=dragTarget.getAttribute("id");

if(dragID!="backRect"){

//dragID=dragTarget.getAttribute("id");

dragStartX=evt.getClientX();

dragStartY=evt.getClientY();

targetMaxtrix=dragTarget.getCTM();

dragFlag=true;

}

function modifyDrag(){

if(dragFlag){

dragModifyX=evt.getClientX();

dragModifyY=evt.getClientY();

distanceX=dragModifyX-dragStartX;

distanceY=dragModifyY-dragStartY;

newTranX=targetMaxtrix.e+distanceX;

newTranY=targetMaxtrix.f+distanceY;

dragTarget.setAttributeNS(null, 'transform', 'translate(' + newTranX + ',' + newTranY + ')');

}

function endDrag(){

if(dragFlag){dragTarget.parentNode.appendChild(dragTarget);}

dragFlag=false;

}

//---------------------common function---

function getActiveId(){

var id=0;

for(i=0;i<toolStatus.length;i++){

if(toolStatus[i]==1){

id=i;

break;

}

return id;

}

function newFile(){

alert("0");

var p=document.getElementById("plat");

var l=p.childNodes.length;

while(l!=1){

p.removeChild(p.lastChild);

l=p.childNodes.length;

}

codeAll="<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%"

xmlns:xlink="http://www.w3.org/1999/xlink">";

}

//-#############################--operate files-----############################

function saveFile(){

var codeContent="";

//codeAll=codeAll+codeEnd

//-----------saveObject--------------

p=evt.target.ownerDocument.getElementById("plat");

nodeList=p.childNodes;

//------------------learn new knowledge printNode(node)----------------------

for(i=0;i<nodeList.length;i++){

codeContent=codeContent+printNode(nodeList.item(i))+" ";

}

alert(codeContent);

codeAll=codeAll+codeContent;

codeAll=codeAll+codeEnd;

//---------save file --------

var fso, f1;

fso = new ActiveXObject("Scripting.FileSystemObject");

f1 = fso.CreateTextFile(fileName, true);

f1.WriteLine(codeAll);

f1.Close();

alert("the location of the file : "+fileName);

//--------------------

//codeAll=codeAll.substring(0,codeAll.length-6);

codeAll="<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%"

xmlns:xlink="http://www.w3.org/1999/xlink">";

}

//---------------open file---------------------

function openFile(){

xmlDoc = getURL(fileName,fn)

}

function fn(xmlDoc)

{

alert("the location of the opened file: "+fileName);

var x = parseXML(xmlDoc.content,document)

openFilePlat=document.getElementById("plat");

var nodeList=x.getChildNodes();

var nodeListInner=nodeList.item(0).getChildNodes();

removeAllChild();//clear all the Elements in <g>

for(i=0;i<nodeListInner.length;i++){

if(nodeListInner.item(i).nodeType==1){

openFilePlat.appendChild(nodeListInner.item(i));

}

function removeAllChild(){

var platRemoveAll=document.getElementById("plat");

var removeAllLength=platRemoveAll.childNodes.length;

while(removeAllLength!=0){

platRemoveAll.removeChild(platRemoveAll.lastChild);

removeAllLength=platRemoveAll.childNodes.length;

}

//--#############################common vars########################

//-----------file vars-----------------------

var codeAll="<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%"

xmlns:xlink="http://www.w3.org/1999/xlink">";

var codeEnd="</svg>";

var fileName="./svgFile/test.svg";

//-------------------mainDraw-----------------

function startDraw(){

id=getActiveId();

switch(id){

case 0 :{startDrag();break;}

case 1 :{ drawRect();break;}

case 2 :{ drawCircle();break;}

case 3 :{ drawLine();break;}

case 4 :{ startImage();break;}

}

function modifyDraw(){

id=getActiveId();

switch(id){

case 0 :{modifyDrag();break;}

case 1 :{ modifyRect();break;}

case 2 :{ modifyCircle();break;}

case 3 :{ modifyLine();break;}

case 4 :{ modifyImage();break;}

}

function endDraw(){

id=getActiveId();

switch(id){

case 0 :{endDrag();break;}

case 1 :{ endRect();break;}

case 2 :{ endCircle();break;}

case 3 :{ endLine();break;}

case 4 :{ endImage();break;}

}

//---------------------------------------

//-------------------------changStatus And hiddenTool----------

var toolStatus=new Array(1,0,0,0,0);

var toolName=new Array('move','rect','circle','line','switch');

function changeStatus(name){

var id=0;

for(i=0;i<toolName.length;i++){

if(name==toolName[i]){

id=i;

break;

}

for(i=0;i<toolStatus.length;i++){

if(id==i){

toolStatus[i]=1;

}else{

toolStatus[i]=0;

}

showHidden1(id);

}

function showHidden1(id){

if(toolStatus[id]==1){

theMove=document.getElementById(id);

theMove.setAttribute("display", "inline");

setTimeout('showHidden2('+id+')',500);

}else{

theMove=document.getElementById(id);

theMove.setAttribute("display", "inline");

}

function showHidden2(id){

if(toolStatus[id]==1){

theMove=document.getElementById(id);

theMove.setAttribute("display", "none");

setTimeout('showHidden1('+id+')',500);

}else{

theMove=document.getElementById(id);

theMove.setAttribute("display", "inline");

}

]]>

</ script >

< g id ="plat" onmousedown ="startDraw()" onmousemove ="modifyDraw()" onmouseup ="endDraw()" >

< rect id ="backRect" x ="0" y ="60" width ="720" height ="450" fill ="white"

stroke ="gray" stroke-width ="1" />

</ g >

< g id ="saveFlie" onclick ="saveFile()" >

< rect x ="498" y ="527" width ="45" height ="25" stroke ="black" stroke-width ="1" fill ="white" />

< text x ="500" y ="545" style ="stroke:#83C75D;font-size:20" > Save </ text >

</ g >

< g id ="newFie" onclick ="newFile()" >

< rect x ="578" y ="527" width ="45" height ="25" stroke ="black" stroke-width ="1" fill ="white" />

< text x ="584" y ="545" style ="stroke:#83C75D;font-size:20" > New </ text >

</ g >

< g id ="openFie" onclick ="openFile()" >

< rect x ="658" y ="527" width ="45" height ="25" stroke ="black" stroke-width ="1" fill ="none" />

< text x ="662" y ="545" style ="stroke:#83C75D;font-size:20" > Open </ text >

</ g >

< text id ="SD" fill ="#FFFFFF" stroke ="black" x ="1" y ="40" > show code </ text >

< polyline id ="0" points ="40,546 50,563 42,557 38,566 40,546"

stroke ="#426EB4" fill ="blue" onclick ="changeStatus('move')" />

< rect id ="1" x ="70" y ="544.5" width ="25" height ="20" stroke ="#426EB4"

fill ="blue" onclick ="changeStatus('rect')" />

< circle id ="2" cx ="130" cy ="555.5" r ="12" stroke ="#426EB4"

fill ="blue" onclick ="changeStatus('circle')" />

< polyline id ="3" points ="183,559 190,543 194,546 187,562 182.5,565.5 183,559 187,562"

stroke ="#555555" fill ="blue" onclick ="changeStatus('line')" />

< image id ="4" x ="220" y ="535" width ="40" height ="40"

xlink:href ="12.jpg" onclick ="changeStatus('switch')" />

</ svg >

wujiancumt2006

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
SVG实例--svg编辑器---(打开,保存,新建,拖动)

该例实现了，画线，圆，矩形，以及选择图形，并把图形至于顶层，还有拖动图形等功能。对于使用Javascript语言分析SVG文件有很大的帮助。感谢不知名的提供者。xml version="1.0" encoding="iso-8859-1"?>svg id="svg" viewBox="0 0 1006 616">script type="text/javascript">//编
复制链接

扫一扫