svg+javascript+path直线缩放拖动变形
来源：互联网 发布：js的关键字和保留字 编辑：程序博客网 时间：2024/05/08 04:14
==============================================
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.5000000);
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>
- svg+javascript+path直线缩放拖动变形
- Javascript实现文字大小缩放，位置拖动
- SVG path
- javascript 手势缩放 旋转 拖动支持：hammer.js
- SVG（可缩放矢量图形）基本图形绘制方法与path路径命令
- SVG基础 | SVG PATH 元素
- 【CSS3】变形--缩放 scale()
- 变形--缩放 scale()
- svg中的path
- jQuery修改SVG Path
- SVG路径PATH
- SVG path 元素详解
- svg Path 路径指令
- svg的path标签
- SVG path 关键字解释
- svg path 解析
- SVG 之 path
- SVG path 元素详解
- 背包算法
- DataGridView 密码列（显示为*号）的设置
- 第五章 一
- TCP 连接断开问题剖析
- 作别VTech, GoodBye letter
- svg+javascript+path直线缩放拖动变形
- 设计模式
- log080827 prototype之 DivideOrBurst
- 青春赋
- 二
- 我的家乡笑话
- struts入门之输入校验
- 隐藏pythonGUI windows窗口终端
- 网络蜘蛛
