svg+javascript+path直线缩放拖动变形
2008-08-27 17:54
288 查看
==============================================
station.js
var SVGDocument = null;
var SVGRoot = null;
var TrueCoords = null;
var Point = null;
var background = null;
var DragTarget = null;
var dArray = new Array(12);
var dragger = null;
var x;
var y;
var X1;
var Y1;
var X2;
var Y2;
var CX1;
var CY1
var CX2;
var CY2;
var CX3;
var CY3;
var xx2;
var yy2;
var newXx = 0;
var newYy = 0;
var moveObject = null;
var ByNexu = null;
var rectbus1Y ;
var rectbus3Y;
var yUpdate ;
var yz;
var noover = null; //拖动的时候不感知
function Doonload(evt){
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
background = SVGDocument.getElementById("background");
}
function Doonmouseup(evt){
if(dragger != null){
yz = parseInt(rectbus1Y)+parseInt((rectbus3Y-rectbus1Y)/2);
if(ByNexu!=null)
{
if(yUpdate<yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+XL1+","+YL1); dragger = null;
}
if(yUpdate>yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+rectbus3Y); dragger = null;
}
}
else{
var a = XL1+parseFloat(6.5000000);
var b = YL1+parseFloat(0.0000000);
var c = XL1+parseFloat(6.5000000);
var d = YL1+parseFloat(13.0000000);
var e = XL1+parseFloat(0.000000);
var f = YL1+parseFloat(13.0000000);
if(yUpdate<yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+XL1+","+YL1);dragger = null;
}
if(yUpdate>yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+rectbus3Y); dragger = null;
}
}
}
ByNexu = null;
if (DragTarget)
{
var targetElement = evt.target;
DragTarget.setAttribute("pointer-events", "all");
if ( "Folder" == targetElement.parentNode.id )
{
targetElement.parentNode.appendChild( DragTarget);
}
moveObject = DragTarget;
DragTarget = null;
}
}
function Doonmousedown(evt){
var onObject = evt.getTarget();
ParsePath(evt);
x=evt.clientX
y=evt.clientY
X1 = parseFloat(dArray[0]) ;
Y1 = parseFloat(dArray[1]) ;
X2 = parseFloat(dArray[10]) ;
Y2 = parseFloat(dArray[11]) ;
XL1 = parseFloat(dArray[2]) ;
YL1 = parseFloat(dArray[3]) ;
CX1 = parseFloat(dArray[4]) ;
CY1 = parseFloat(dArray[5]) ;
CX2 = parseFloat(dArray[6]) ;
CY2 = parseFloat(dArray[7]) ;
CX3 = parseFloat(dArray[8]) ;
CY3 = parseFloat(dArray[9]) ;
if ( background != onObject )
{
if(((xx2<6)&&(yy2<6)))
{
dragger = onObject ;
dragger.getStyle().setProperty("cursor", "n-resize");
}
else{
DragTarget = onObject.parentNode ;
DragTarget .getStyle().setProperty("cursor", "move");
DragTarget.parentNode.appendChild( DragTarget );
DragTarget.setAttribute("pointer-events", "none");
var transMatrix = DragTarget.getCTM();
GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
}
}
}
function Doonmouseover(evt){
var onObject = evt.getTarget();
ParsePath(evt); //解析path的路径
x=evt.clientX
y=evt.clientY
if(noover == null){
X1 = parseFloat(dArray[0]) ;
Y1 = parseFloat(dArray[1]) ;
X2 = parseFloat(dArray[10]) ;
Y2 = parseFloat(dArray[11]) ;
XL1 = parseFloat(dArray[2]) ;
YL1 = parseFloat(dArray[3]) ;
CX1 = parseFloat(dArray[4]) ;
CY1 = parseFloat(dArray[5]) ;
CX2 = parseFloat(dArray[6]) ;
CY2 = parseFloat(dArray[7]) ;
CX3 = parseFloat(dArray[8]) ;
CY3 = parseFloat(dArray[9]) ;
}
if(moveObject!=null){
xx2 = Math.abs(X2-(x-newXx));
yy2 = Math.abs(Y2-(y-newYy));
}
else{
xx2 = Math.abs(X2-x);
yy2 = Math.abs(Y2-y);
}
if(((xx2<8)&&(yy2<8)))
{
onObject.getStyle().setProperty("cursor", "n-resize");
}
else
{
onObject.getStyle().setProperty("cursor", "hand");
}
}
function Doonmousemove(evt){
yUpdate = y-newYy;
ByNexus(evt);
if(dragger!=null)
{
x=evt.clientX;
y=evt.clientY;
if((xx2<8)&&(yy2<8))
{
dragger.getStyle().setProperty("cursor", "n-resize");
if(ByNexu!=null){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+yUpdate);
}
else{
var a = XL1+parseFloat(6.5000000);
var b = YL1+parseFloat(0.0000000);
var c = XL1+parseFloat(6.500000
4000
0);
var d = YL1+parseFloat(13.0000000);
var e = XL1+parseFloat(0.000000);
var f = YL1+parseFloat(13.0000000);
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+yUpdate);
}
}
}
else
{
GetTrueCoords(evt);
if (DragTarget)
{
noover = "nonull";
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
DragTarget.setAttribute( "transform", "translate(" + newX + ")");
newXx = newX;
newYy = newY;
ByNexus(evt);
if((ByNexu!=null)||(Y2<yz)){
DragTarget.childNodes.item(0).setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+Y2); ByNexu = null;
}
else{
var a = XL1+parseFloat(6.5000000);
var b = YL1+parseFloat(0.0000000);
var c = XL1+parseFloat(6.5000000);
var d = YL1+parseFloat(13.0000000);
var e = XL1+parseFloat(0.000000);
var f = YL1+parseFloat(13.0000000);
DragTarget.childNodes.item(0).setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+Y2); ByNexu = null;
}
}
}
}
function GetTrueCoords(evt){
var newScale = SVGRoot.currentScale;
var translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;
}
function ParsePath(evt)
{
var onObject = evt.getTarget();
var d = onObject.getAttribute("d");
var regex=new RegExp("[ ,]");
var arr=d.split(regex);
var regex1=new RegExp("[a-zA-Z]");
for( var i=0;i<arr.length;i++)
{
var s=arr[i].replace(regex1,"");
dArray[i] = s;
}
}
function ByNexus(evt){
svgDoc = evt.target.ownerDocument;
svgRoot = svgDoc.rootElement;
var rect1 = svgRoot.getElementById("Class7_Rect16");
var rectbus1Width = rect1.getAttribute("width");
var rectbus1X1 = rect1.getAttribute("x");
rectbus1Y = rect1.getAttribute("y");
var rectbus1X2 = parseFloat(rectbus1X1)+parseFloat(rectbus1Width);
var rect2 = svgRoot.getElementById("Class2_Rect16");
var rectbus2Width2 = rect2.getAttribute("width");
var rectbus2X1 = rect2.getAttribute("x");
var rectbus2X2 = parseFloat(rectbus2X1)+parseFloat(rectbus2Width2);
var rect3 = svgRoot.getElementById("Class9_Rect15");
rectbus3Y = rect3.getAttribute("y");
var xxx = X1+newXx;
if((rectbus1X1>xxx)||((rectbus1X2<xxx)&&(rectbus2X1>xxx))||(rectbus2X2<xxx))
{
ByNexu = "NOnull";
}
}
=================================================================
station.svg
<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="disable" onload="Doonload(evt)" contentStyleType="text/css" sdfPath="data/displays/station39_200806061100.svg" version="1.0" width="760" preserveAspectRatio="none" onmouseup="Doonmouseup(evt)" height="460" onmousemove="Doonmousemove(evt)">
<defs>
</defs>
<rect x="0" y="0" fill="#ffffff" width="760" height="460" id="background" stroke="#000000" biztype="background" stroke-width="1"/>
<g x="400" width="154" y="120" height="10" id="52" biztype="bus">
<rect x="400" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class2_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
<g x="550" width="91" y="118" text="$鍚嶇О" height="13" id="Class2_Text21">
<text x="550" fill="#000000" y="127" font-size="11" font-family="SimSun">娲矡500KVII姣嶇嚎</text>
</g>
</g>
<g x="215" width="43" y="170" height="25" id="4" biztype="transform">
<g x="215" width="43" y="170" height="25" id="Class5_Group44">
<g x="237" width="21" y="179" height="8" id="Class5_Group44_Group37">
<line x1="237" x2="250" y1="181" y2="181" id="Class5_Group44_Group37_Line1" stroke="#000000" stroke-width="1"/>
<polygon fill="#000000" stroke-width="1" id="Class5_Group44_Group37_Polygon2" points=" 256,181 248,179 248,185 248,185" stroke="#000000"/>
</g>
<g x="215" width="23" y="170" height="25" id="Class5_Group44_Group43">
<ellipse fill="none" rx="7" cx="221" ry="7" id="Class5_Group44_Group43_Ellipse8" cy="176" stroke="#000000" stroke-width="1"/>
<ellipse fill="none" rx="7" cx="221" ry="7" id="Class5_Group44_Group43_Ellipse10" cy="187" stroke="#000000" stroke-width="1"/>
<ellipse fill="none" rx="7" cx="230" ry="7" id="Class5_Group44_Group43_Ellipse11" cy="181" stroke="#000000" stroke-width="1"/>
</g>
</g>
<g x="236" width="13" y="167" text="$鍚嶇О" height="13" id="Class5_Text19">
<text x="236" fill="#000000" y="176" font-size="11" font-family="SimSun">1#</text>
</g>
</g>
<g x="461" width="30" y="325" height="46" id="19" biztype="load">
<g x="461" width="30" y="325" height="31" id="Class6_Group83">
<rect x="461" y="325" fill="#ffffff" width="29" shape-rendering="optimizeSpeed" id="Class6_Group83_Rect17" height="7" stroke="#aa55ff" stroke-width="0.01"/>
<g x="468" width="15" y="332" height="24" id="Class6_Group83_Group49">
<polygon fill="#aa55ff" stroke-width="1" id="Class6_Group83_Group49_Polygon2" points=" 468,346 468,346 468,346 468,346 468,346 468,346 468,346 468,346 468,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 482,346 482,346 482,346 482,346 482,346 482,346 482,346 482,346 482,346 475,355 475,355 475,355" stroke="#0000ff"/>
<line x1="475" x2="475" y1="332" y2="346" id="Class6_Group83_Group49_Line2" stroke="#aa55ff" stroke-width="1"/>
</g>
</g>
<g x="469" width="13" y="350" text="$鍚嶇О" height="96" id="Class6_Text22">
<text writing-mode="tb" x="474" fill="#000000" y="359" font-size="11" font-family="SimSun">1#绛夊�艰礋鑽�</text>
</g>
</g>
<g x="67" width="154" y="121" height="10" id="51" biztype="bus">
<rect x="65" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class7_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
<g x="217" width="85" y="119" text="$鍚嶇О" height="13" id="Class7_Text21">
<text x="217" fill="#000000" y="128" font-size="11" font-family="SimSun">娲矡500KVI姣嶇嚎</text>
</g>
</g>
<g x="65" width="154" y="240" height="10" id="54" biztype="bus">
<rect x="65" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class9_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
<g x="215" width="85" y="238" text="$鍚嶇О" height="13" id="Class9_Text20">
<text x="215" fill="#000000" y="247" font-size="11" font-family="SimSun">娲矡220KVI姣嶇嚎</text>
</g>
</g>
<g x="402" width="154" y="241" height="10" id="53" biztype="bus">
<rect x="400" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class10_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
<g x="552" width="91" y="239" text="$鍚嶇О" height="13" id="Class10_Text20">
<text x="552" fill="#000000" y="248" font-size="11" font-family="SimSun">娲矡220KVII姣嶇嚎</text>
</g>
</g>
<path fill="none" shape-rendering="optimizeSpeed" d="M 215 130 L 215 135 L 405 135 L 405 129" id="158" stroke="#aaaa7f" biztype="break" stroke-width="0.01"/>
<path fill="none" shape-rendering="optimizeSpeed" d="M 210 249 L 210 255 L 405 255 L 405 250" id="159" stroke="#aaaa7f" biztype="break" stroke-width="0.01"/>
<script xlink:href="station.js" language="JavaScript"/><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M89.833336 0,L89.833336 118.0 C96.333336 118.0 96.333336 131.0 89.833336 131.0,L89.833336 240.0" id="line1" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="94.833336" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎1</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M114.66667 0,L114.66667 118.0 C121.16667 118.0 121.16667 131.0 114.66667 131.0,L114.66667 240.0" id="line2" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="119.66667" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎2</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M139.5 0,L139.5 118.0 C146.0 118.0 146.0 131.0 139.5 131.0,L139.5 240.0" id="line3" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="144.5" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎3</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M164.33334 0,L164.33334 120.0" id="line4" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="169.33334" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎4</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M189.16667 0,L189.16667 120.0" id="line5" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="194.16667" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎5</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M414.9 0,L414.9 118.0 C421.4 118.0 421.4 131.0 414.9 131.0,L414.9 240.0" id="line6" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="419.9" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎6</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M429.8 0,L429.8 118.0 C436.3 118.0 436.3 131.0 429.8 131.0,L429.8 240.0" id="line7" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="434.8" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎7</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M444.7 0,L444.7 118.0 C451.2 118.0 451.2 131.0 444.7 131.0,L444.7 240.0" id="line8" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="449.7" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎8</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M459.6 0,L459.6 118.0 C466.1 118.0 466.1 131.0 459.6 131.0,L459.6 240.0" id="line9" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="464.6" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎9</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M474.5 0,L474.5 118.0 C481.0 118.0 481.0 131.0 474.5 131.0,L474.5 240.0" id="line10" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="479.5" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎10</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M489.4 0,L489.4 120.0" id="line11" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="494.4" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎11</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M504.3 0,L504.3 120.0" id="line12" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="509.3" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎12</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M519.2 0,L519.2 120.0" id="line13" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="524.2" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎13</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M534.1 0,L534.1 120.0" id="line14" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="539.1" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎14</text></g></g></svg>
station.js
var SVGDocument = null;
var SVGRoot = null;
var TrueCoords = null;
var Point = null;
var background = null;
var DragTarget = null;
var dArray = new Array(12);
var dragger = null;
var x;
var y;
var X1;
var Y1;
var X2;
var Y2;
var CX1;
var CY1
var CX2;
var CY2;
var CX3;
var CY3;
var xx2;
var yy2;
var newXx = 0;
var newYy = 0;
var moveObject = null;
var ByNexu = null;
var rectbus1Y ;
var rectbus3Y;
var yUpdate ;
var yz;
var noover = null; //拖动的时候不感知
function Doonload(evt){
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
background = SVGDocument.getElementById("background");
}
function Doonmouseup(evt){
if(dragger != null){
yz = parseInt(rectbus1Y)+parseInt((rectbus3Y-rectbus1Y)/2);
if(ByNexu!=null)
{
if(yUpdate<yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+XL1+","+YL1); dragger = null;
}
if(yUpdate>yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+rectbus3Y); dragger = null;
}
}
else{
var a = XL1+parseFloat(6.5000000);
var b = YL1+parseFloat(0.0000000);
var c = XL1+parseFloat(6.5000000);
var d = YL1+parseFloat(13.0000000);
var e = XL1+parseFloat(0.000000);
var f = YL1+parseFloat(13.0000000);
if(yUpdate<yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+XL1+","+YL1);dragger = null;
}
if(yUpdate>yz){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+rectbus3Y); dragger = null;
}
}
}
ByNexu = null;
if (DragTarget)
{
var targetElement = evt.target;
DragTarget.setAttribute("pointer-events", "all");
if ( "Folder" == targetElement.parentNode.id )
{
targetElement.parentNode.appendChild( DragTarget);
}
moveObject = DragTarget;
DragTarget = null;
}
}
function Doonmousedown(evt){
var onObject = evt.getTarget();
ParsePath(evt);
x=evt.clientX
y=evt.clientY
X1 = parseFloat(dArray[0]) ;
Y1 = parseFloat(dArray[1]) ;
X2 = parseFloat(dArray[10]) ;
Y2 = parseFloat(dArray[11]) ;
XL1 = parseFloat(dArray[2]) ;
YL1 = parseFloat(dArray[3]) ;
CX1 = parseFloat(dArray[4]) ;
CY1 = parseFloat(dArray[5]) ;
CX2 = parseFloat(dArray[6]) ;
CY2 = parseFloat(dArray[7]) ;
CX3 = parseFloat(dArray[8]) ;
CY3 = parseFloat(dArray[9]) ;
if ( background != onObject )
{
if(((xx2<6)&&(yy2<6)))
{
dragger = onObject ;
dragger.getStyle().setProperty("cursor", "n-resize");
}
else{
DragTarget = onObject.parentNode ;
DragTarget .getStyle().setProperty("cursor", "move");
DragTarget.parentNode.appendChild( DragTarget );
DragTarget.setAttribute("pointer-events", "none");
var transMatrix = DragTarget.getCTM();
GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
}
}
}
function Doonmouseover(evt){
var onObject = evt.getTarget();
ParsePath(evt); //解析path的路径
x=evt.clientX
y=evt.clientY
if(noover == null){
X1 = parseFloat(dArray[0]) ;
Y1 = parseFloat(dArray[1]) ;
X2 = parseFloat(dArray[10]) ;
Y2 = parseFloat(dArray[11]) ;
XL1 = parseFloat(dArray[2]) ;
YL1 = parseFloat(dArray[3]) ;
CX1 = parseFloat(dArray[4]) ;
CY1 = parseFloat(dArray[5]) ;
CX2 = parseFloat(dArray[6]) ;
CY2 = parseFloat(dArray[7]) ;
CX3 = parseFloat(dArray[8]) ;
CY3 = parseFloat(dArray[9]) ;
}
if(moveObject!=null){
xx2 = Math.abs(X2-(x-newXx));
yy2 = Math.abs(Y2-(y-newYy));
}
else{
xx2 = Math.abs(X2-x);
yy2 = Math.abs(Y2-y);
}
if(((xx2<8)&&(yy2<8)))
{
onObject.getStyle().setProperty("cursor", "n-resize");
}
else
{
onObject.getStyle().setProperty("cursor", "hand");
}
}
function Doonmousemove(evt){
yUpdate = y-newYy;
ByNexus(evt);
if(dragger!=null)
{
x=evt.clientX;
y=evt.clientY;
if((xx2<8)&&(yy2<8))
{
dragger.getStyle().setProperty("cursor", "n-resize");
if(ByNexu!=null){
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+yUpdate);
}
else{
var a = XL1+parseFloat(6.5000000);
var b = YL1+parseFloat(0.0000000);
var c = XL1+parseFloat(6.500000
4000
0);
var d = YL1+parseFloat(13.0000000);
var e = XL1+parseFloat(0.000000);
var f = YL1+parseFloat(13.0000000);
dragger.setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+yUpdate);
}
}
}
else
{
GetTrueCoords(evt);
if (DragTarget)
{
noover = "nonull";
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
DragTarget.setAttribute( "transform", "translate(" + newX + ")");
newXx = newX;
newYy = newY;
ByNexus(evt);
if((ByNexu!=null)||(Y2<yz)){
DragTarget.childNodes.item(0).setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+XL1+","+YL1+","+XL1+","+YL1+","+XL1+","+YL1+",L"+X2+","+Y2); ByNexu = null;
}
else{
var a = XL1+parseFloat(6.5000000);
var b = YL1+parseFloat(0.0000000);
var c = XL1+parseFloat(6.5000000);
var d = YL1+parseFloat(13.0000000);
var e = XL1+parseFloat(0.000000);
var f = YL1+parseFloat(13.0000000);
DragTarget.childNodes.item(0).setAttribute("d","M"+X1+","+Y1+",L"+XL1+","+YL1+",C"+a+","+b+","+c+","+d+","+e+","+f+",L"+X2+","+Y2); ByNexu = null;
}
}
}
}
function GetTrueCoords(evt){
var newScale = SVGRoot.currentScale;
var translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;
}
function ParsePath(evt)
{
var onObject = evt.getTarget();
var d = onObject.getAttribute("d");
var regex=new RegExp("[ ,]");
var arr=d.split(regex);
var regex1=new RegExp("[a-zA-Z]");
for( var i=0;i<arr.length;i++)
{
var s=arr[i].replace(regex1,"");
dArray[i] = s;
}
}
function ByNexus(evt){
svgDoc = evt.target.ownerDocument;
svgRoot = svgDoc.rootElement;
var rect1 = svgRoot.getElementById("Class7_Rect16");
var rectbus1Width = rect1.getAttribute("width");
var rectbus1X1 = rect1.getAttribute("x");
rectbus1Y = rect1.getAttribute("y");
var rectbus1X2 = parseFloat(rectbus1X1)+parseFloat(rectbus1Width);
var rect2 = svgRoot.getElementById("Class2_Rect16");
var rectbus2Width2 = rect2.getAttribute("width");
var rectbus2X1 = rect2.getAttribute("x");
var rectbus2X2 = parseFloat(rectbus2X1)+parseFloat(rectbus2Width2);
var rect3 = svgRoot.getElementById("Class9_Rect15");
rectbus3Y = rect3.getAttribute("y");
var xxx = X1+newXx;
if((rectbus1X1>xxx)||((rectbus1X2<xxx)&&(rectbus2X1>xxx))||(rectbus2X2<xxx))
{
ByNexu = "NOnull";
}
}
=================================================================
station.svg
<?xml version="1.0" encoding="UTF-8"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" zoomAndPan="disable" onload="Doonload(evt)" contentStyleType="text/css" sdfPath="data/displays/station39_200806061100.svg" version="1.0" width="760" preserveAspectRatio="none" onmouseup="Doonmouseup(evt)" height="460" onmousemove="Doonmousemove(evt)">
<defs>
</defs>
<rect x="0" y="0" fill="#ffffff" width="760" height="460" id="background" stroke="#000000" biztype="background" stroke-width="1"/>
<g x="400" width="154" y="120" height="10" id="52" biztype="bus">
<rect x="400" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class2_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
<g x="550" width="91" y="118" text="$鍚嶇О" height="13" id="Class2_Text21">
<text x="550" fill="#000000" y="127" font-size="11" font-family="SimSun">娲矡500KVII姣嶇嚎</text>
</g>
</g>
<g x="215" width="43" y="170" height="25" id="4" biztype="transform">
<g x="215" width="43" y="170" height="25" id="Class5_Group44">
<g x="237" width="21" y="179" height="8" id="Class5_Group44_Group37">
<line x1="237" x2="250" y1="181" y2="181" id="Class5_Group44_Group37_Line1" stroke="#000000" stroke-width="1"/>
<polygon fill="#000000" stroke-width="1" id="Class5_Group44_Group37_Polygon2" points=" 256,181 248,179 248,185 248,185" stroke="#000000"/>
</g>
<g x="215" width="23" y="170" height="25" id="Class5_Group44_Group43">
<ellipse fill="none" rx="7" cx="221" ry="7" id="Class5_Group44_Group43_Ellipse8" cy="176" stroke="#000000" stroke-width="1"/>
<ellipse fill="none" rx="7" cx="221" ry="7" id="Class5_Group44_Group43_Ellipse10" cy="187" stroke="#000000" stroke-width="1"/>
<ellipse fill="none" rx="7" cx="230" ry="7" id="Class5_Group44_Group43_Ellipse11" cy="181" stroke="#000000" stroke-width="1"/>
</g>
</g>
<g x="236" width="13" y="167" text="$鍚嶇О" height="13" id="Class5_Text19">
<text x="236" fill="#000000" y="176" font-size="11" font-family="SimSun">1#</text>
</g>
</g>
<g x="461" width="30" y="325" height="46" id="19" biztype="load">
<g x="461" width="30" y="325" height="31" id="Class6_Group83">
<rect x="461" y="325" fill="#ffffff" width="29" shape-rendering="optimizeSpeed" id="Class6_Group83_Rect17" height="7" stroke="#aa55ff" stroke-width="0.01"/>
<g x="468" width="15" y="332" height="24" id="Class6_Group83_Group49">
<polygon fill="#aa55ff" stroke-width="1" id="Class6_Group83_Group49_Polygon2" points=" 468,346 468,346 468,346 468,346 468,346 468,346 468,346 468,346 468,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 471,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 475,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 478,346 482,346 482,346 482,346 482,346 482,346 482,346 482,346 482,346 482,346 475,355 475,355 475,355" stroke="#0000ff"/>
<line x1="475" x2="475" y1="332" y2="346" id="Class6_Group83_Group49_Line2" stroke="#aa55ff" stroke-width="1"/>
</g>
</g>
<g x="469" width="13" y="350" text="$鍚嶇О" height="96" id="Class6_Text22">
<text writing-mode="tb" x="474" fill="#000000" y="359" font-size="11" font-family="SimSun">1#绛夊�艰礋鑽�</text>
</g>
</g>
<g x="67" width="154" y="121" height="10" id="51" biztype="bus">
<rect x="65" y="120" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class7_Rect16" height="9" stroke="#00af00" stroke-width="0.01"/>
<g x="217" width="85" y="119" text="$鍚嶇О" height="13" id="Class7_Text21">
<text x="217" fill="#000000" y="128" font-size="11" font-family="SimSun">娲矡500KVI姣嶇嚎</text>
</g>
</g>
<g x="65" width="154" y="240" height="10" id="54" biztype="bus">
<rect x="65" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class9_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
<g x="215" width="85" y="238" text="$鍚嶇О" height="13" id="Class9_Text20">
<text x="215" fill="#000000" y="247" font-size="11" font-family="SimSun">娲矡220KVI姣嶇嚎</text>
</g>
</g>
<g x="402" width="154" y="241" height="10" id="53" biztype="bus">
<rect x="400" y="240" fill="#ffffff" width="149" shape-rendering="optimizeSpeed" id="Class10_Rect15" height="9" stroke="#0000af" stroke-width="0.01"/>
<g x="552" width="91" y="239" text="$鍚嶇О" height="13" id="Class10_Text20">
<text x="552" fill="#000000" y="248" font-size="11" font-family="SimSun">娲矡220KVII姣嶇嚎</text>
</g>
</g>
<path fill="none" shape-rendering="optimizeSpeed" d="M 215 130 L 215 135 L 405 135 L 405 129" id="158" stroke="#aaaa7f" biztype="break" stroke-width="0.01"/>
<path fill="none" shape-rendering="optimizeSpeed" d="M 210 249 L 210 255 L 405 255 L 405 250" id="159" stroke="#aaaa7f" biztype="break" stroke-width="0.01"/>
<script xlink:href="station.js" language="JavaScript"/><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M89.833336 0,L89.833336 118.0 C96.333336 118.0 96.333336 131.0 89.833336 131.0,L89.833336 240.0" id="line1" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="94.833336" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎1</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M114.66667 0,L114.66667 118.0 C121.16667 118.0 121.16667 131.0 114.66667 131.0,L114.66667 240.0" id="line2" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="119.66667" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎2</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M139.5 0,L139.5 118.0 C146.0 118.0 146.0 131.0 139.5 131.0,L139.5 240.0" id="line3" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="144.5" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎3</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M164.33334 0,L164.33334 120.0" id="line4" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="169.33334" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎4</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M189.16667 0,L189.16667 120.0" id="line5" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="194.16667" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎5</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M414.9 0,L414.9 118.0 C421.4 118.0 421.4 131.0 414.9 131.0,L414.9 240.0" id="line6" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="419.9" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎6</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M429.8 0,L429.8 118.0 C436.3 118.0 436.3 131.0 429.8 131.0,L429.8 240.0" id="line7" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="434.8" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎7</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M444.7 0,L444.7 118.0 C451.2 118.0 451.2 131.0 444.7 131.0,L444.7 240.0" id="line8" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="449.7" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎8</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M459.6 0,L459.6 118.0 C466.1 118.0 466.1 131.0 459.6 131.0,L459.6 240.0" id="line9" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="464.6" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎9</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M474.5 0,L474.5 118.0 C481.0 118.0 481.0 131.0 474.5 131.0,L474.5 240.0" id="line10" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="479.5" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎10</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M489.4 0,L489.4 120.0" id="line11" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="494.4" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎11</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M504.3 0,L504.3 120.0" id="line12" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="509.3" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎12</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M519.2 0,L519.2 120.0" id="line13" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="524.2" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎13</text></g></g><g biztype="busline"><path onmouseover="Doonmouseover(evt)" fill="#FFFFFF" d="M534.1 0,L534.1 120.0" id="line14" stroke="#000000" biztype="line" onmousedown="Doonmousedown(evt)"/><g text="$鍚嶇О"><text x="539.1" fill="#000000" font-size="11" y="20" style="writing-mode:tb;glyph-orientation-vertical:0;" font-family="SimSun">鐩寸嚎14</text></g></g></svg>
相关文章推荐
- 用Graphics的 drawPath 来画曲线(2)--可拖动 控制 变形的贝塞尔曲线
- SVG(可缩放矢量图形)基本图形绘制方法与path路径命令
- javascript 手势缩放 旋转 拖动支持:hammer.js
- Javascript实现文字大小缩放,位置拖动
- SVG 拖动以及缩放
- javascript 手势缩放 旋转 拖动支持:hammer.js
- 【CSON原创】 javascript拖动缩放效果实现
- iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)
- 图片的浏览、缩放、拖动和自动居中
- javascript + DIV +CSS 实现可拖动消息窗体
- [导入]svg图形拖动的例子/解决方法
- SVG当中g元素使用变形
- [导入]svg图形拖动的例子/解决方法
- JavaScript等比例缩放图片
- html+javascript实现可拖动可提交的弹出层对话框效果
- C#图片处理总结——叠加、缩放、鼠标拖动
- 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
- 更新 --- android实现自定义RelativeLayout可拖动、缩放、旋转TextView
- IE下javascript cookie path
- Android自定义View来实现解析lrc歌词并同步滚动、上下拖动、缩放歌词的功能