计算机科学论坛--显示贴子

以文本方式查看主题

-  计算机科学论坛  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  怎样实现对svg的拖动的操作？  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=22339)

--  作者：anshigang0720
--  发布时间：9/19/2005 5:11:00 PM

--  怎样实现对svg的拖动的操作？
怎样实现对svg的拖动的操作？请各位高手帮帮忙！！

--  作者：cuijie
--  发布时间：9/27/2005 8:54:00 AM

--
在鼠标事件里处理，在onmousedown开始处理，在onmousemove中改变目标坐标，在onmouseup结束处理

--  作者：dong_xuelin
--  发布时间：9/27/2005 9:10:00 AM

--  研究一下这段代码吧!
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">

}

function DoOnLoad(evt)
{
  // useless leftovers
  var el = getSVGDocument(evt.getTarget()).getElementById("pointOne");
  el.getStyle().setProperty("fill", "black");
}

function DoOnMouseDown(evt)
{

  var onObject = evt.getTarget();
  if( onObject.getAttribute("id") == "pointOne" || onObject.getAttribute("id") == "pointTwo")
  {
   dragger = onObject;
   oldX = Math.abs(dragger.getAttribute("cx")); // has to be abs'd so
   oldY = Math.abs(dragger.getAttribute("cy")); // it isn't a string(?)
   origX = evt.getClientX();
   origY = evt.getClientY();
   oldTranslateX = 0; // not used any more?
   oldTranslateY = 0;
  }
}

function DoOnMouseMove(evt)
{
    if( dragger != null )
    {
  dragger.getStyle().setProperty("opacity", "0.75");

  // problem is here - initially drops to zero - also, it has
  // to be multiplied by 0.004 for the exact display resolution
  // - wanted replace oldTranslateX with oldX, but it adds as a string?
  var newX = Math.max(Math.min((oldX + (evt.getClientX() - origX) * 0.004),1),0);
  var newY = Math.max(Math.min((oldY + (evt.getClientY() - origY) *-0.004),1),0);
  var curve = getSVGDocument(evt.getTarget()).getElementById("kSpline");
  if( dragger.getAttribute("id") == "pointOne" )
  {
   var other = getSVGDocument(evt.getTarget()).getElementById("pointTwo");
   var cLine1 = getSVGDocument(evt.getTarget()).getElementById("cL1");
   var curX2 = other.getAttribute("cx");
   var curY2 = other.getAttribute("cy");
   var transformT = "keySplines=\"" +
     Math.round(newX*100)/100 + " " + Math.round(newY*100)/100 + "  " +
     Math.round(curX2*100)/100 + " " + Math.round(curY2*100)/100 + "\"";

   curve.setAttribute("d", "M0,0C" +
     newX + "," + newY + " " +
     curX2 + "," + curY2 + " 1,1");
   cLine1.setAttribute("x2", newX);
   cLine1.setAttribute("y2", newY);
  }
  else
  {
   var other = getSVGDocument(evt.getTarget()).getElementById("pointOne");
   var cLine2 = getSVGDocument(evt.getTarget()).getElementById("cL2");
   var curX1 = other.getAttribute("cx");
   var curY1 = other.getAttribute("cy");
   var transformT = "keySplines=\"" +
     Math.round(curX1*100)/100 + " " + Math.round(curY1*100)/100 + "  " +
     Math.round(newX*100)/100 + " " + Math.round(newY*100)/100 + "\"";

   curve.setAttribute("d", "M0,0C" +
     curX1 + "," + curY1 + " " +
     newX + "," + newY + " 1,1");
   cLine2.setAttribute("x2", newX);
   cLine2.setAttribute("y2", newY);
  }

  var coordsText = getSVGDocument(evt.getTarget()).getElementById("coords");
  coordsText.getFirstChild().setData(transformT);

  dragger.setAttribute("cx", newX);
  dragger.setAttribute("cy", newY);

    }
}
function DoOnMouseUp(evt)
{
  if( dragger != null )
  {
   dragger.getStyle().setProperty("opacity", "0.3");
   dragger = null;
   origTransform = ""
   oldX = 0;
   oldY = 0;
   origX = 0;
   origY = 0;
   oldTranslateX = 0;
   oldTranslateY = 0;
  }
}
function getSVGDocument(node)
{
  // given any node of the tree, will obtain the SVGDocument node.
  // must be careful: a Document node's ownerDocument is null!
  if( node.getNodeType() != 9 )  // if not DOCUMENT_NODE
   return node.getOwnerDocument();
  else
   return node;
}
]]></script>

<g id="all" onmouseover="DoOnMouseOver( evt )" onmouseout="DoOnMouseOut( evt )" onmousedown="DoOnMouseDown( evt )" onmouseup="DoOnMouseUp( evt )" onmousemove="DoOnMouseMove( evt )">
<rect id="bg" x="-0.3" y="0.05" width="2.6" height="1.75"
style="fill:white" />
<text x="0.15" y="0.2" style="fill:#348;stroke:none;font-size:0.15;">Key Splines graph tool</text>
<text x="-0.1" y="0.4" style="fill:#444;stroke:none;font-size:0.054;">
<tspan x="-0.25" y="0.5"> This SVG file</tspan>
<tspan x="-0.25" y="0.56">demonstrates how</tspan>
<tspan x="-0.25" y="0.62">the 'keySplines' </tspan>
<tspan x="-0.25" y="0.68">setting works for key</tspan>
<tspan x="-0.25" y="0.74">interpolation in SMIL</tspan>
<tspan x="-0.25" y="0.8">based animation.</tspan>
<tspan x="-0.25" y="0.86"> The handles can</tspan>
<tspan x="-0.25" y="0.92">be manipulated by </tspan>
<tspan x="-0.25" y="0.98">dragging them </tspan>
<tspan x="-0.25" y="1.04">around.</tspan>
</text>

     <text x="-0.1" y="0.1" style="fill:grey;stroke:none;font-size:0.07;">0,0</text>
     <text x="1" y="-1.05" style="fill:grey;stroke:none;font-size:0.07;">1,1</text>
     <text id="explan" x="0.05" y="0.16"
  style="fill:#444;stroke:none; font-size:0.05;">(You can select and copy the text below)</text>
     <text id="coords" x="0.05" y="0.25"
  style="fill:black;stroke:none;font-size:0.07;">keySplines="0.5 0.1  0.5 0.9"</text>

<text x="0.9" y="0.38" style="fill:#333;stroke:none;font-size:0.04;">Copyleft 2000 - Burning Pixel Productions</text>
</g>
</g>

</g>
</svg>

W 3 C h i n a ( since 2003 ) 旗下站点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》

46.875ms