程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> svg圖形拖動的例子/解決方法

svg圖形拖動的例子/解決方法

編輯：.NET實例教程

怎樣實現對svg的拖動的操作？
svg圖形拖動的例子~

在鼠標事件裡處理，在onmousedown開始處理，在onmousemove中改變目標坐標，在onmouseup結束處理

<?XML version=''1.0'' standalone=''no''?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width=''100%'' height=''100%'' XMLns=''http://www.w3.org/2000/svg'
   onload=''Init(evt)''   onmousedown=''Grab(evt)''    onmousemove=''Drag(evt)''
   onmouseup=''Drop(evt)''>
   <title>Drag And Drop</title>
   <desc>
      A nice little demo of drag-and-drop functionality in SVG,
      written by Doug Schepers on February 16, 2004.
      Use or misuse this code however you wish.
   </desc>
   <script type="text/Javascript"><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;
      var TrueCoords = null;
      var GrabPoint = null;
      var BackDrop = null;
      var DragTarget = null;

      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;

         // these svg points hold x and y values...
         //    very handy, but they do not display on the screen (just so you know)
         TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();

// thi

$False$

s will serve as the canvas over which items are dragged.
         //    having the drag events occur on the mousemove over a backdrop
         //    (instead of the dragged element) prevents the dragged element
         //    from being inadvertantly dropped when the mouse is moved rapidly
         BackDrop = SVGDocument.getElementById(''BackDrop'');
      }

      function Grab(evt)
      {
         // find out which element we moused down on
         var targetElement = evt.target;

         // you cannot drag the background itself, so ignore any attempts to mouse down on it
         if ( BackDrop != targetElement )
         {
            //set the item moused down on as the element to be dragged
            DragTarget = targetElement;

            // move this element to the "top" of the display, so it is (almost)
            //    always over other elements (exception: in this case, elements that are
            //    "in the folder" (children of the folder group) with only maintain
            //    hIErarchy within that group
            DragTarget.parentNode.appendChild( DragTarget );

    // turn off all pointer events to the dragged element, this does 2 things:
            //    1) allows us to drag text elements without selecting the text
            //    2) allows us to find out where the dragged element is dropped (see Drop)
            DragTarget.setAttributeNS(null, ''pointer-events'', ''none'');

            // we need to find the current position and translation of the grabbed element,
            //    so that we only apply the differential between the current location
            //    and the new location
     &
nbsp;      var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y - Number(transMatrix.f);

}
};

      function Drag(evt)
      {
         // account for zooming and panning
         GetTrueCoords(evt);

         // if we don''t currently have an element in tow, don''t do anything
         if (DragTarget)
         {
            // account for the offset between the element''s origin and the
            //    exact place we grabbed it... this way,

the drag will look more natural
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;

            // apply a new tranform translation to the dragged element, to display
            //    it in its new location
            DragTarget.setAttributeNS(null, ''transform'', ''translate('' + newX + '','' + newY + '')'');
         }
      };

      function Drop(evt)
      {
         // if we aren''t currently dragging an element, don''t do anything
         if ( DragTarget )
         {
            // since the element currently being dragged has its pointer-events turned off,
            //    we are afforded the opportunity to find out the element it''s being dropped on
            var targetElement = evt.target;

            // turn the pointer-events back on, so we can grab this item later
            DragTarget.setAttributeNS(null, ''pointer-events'', ''all'');
            if ( ''Folder'' == targetElement.parentNode.id )
            {
               // if the dragged element is dropped on an element that is a child
               //    of the folder group,

it is inserted as a child of that group
               targetElement.parentNode.appendChild( DragTarget );
               alert(DragTarget.id + '' has been dropped into a folder, and has been inserted as a child of the containing group.'');
            }
            else
            {
               // for this example, you cannot drag an item out of the folder once it''s in there;
               //    however, you could just as easily do so here
               alert(DragTarget.id + '' has been dropped on top of '' + targetElement.id);
            }

            // set the global variable to null, so nothing will be dragged until we
            //    grab the next element
            DragTarget = null;
         }
      };

      function GetTrueCoords(evt)
      {
         // find the current zoom level and pan setting, and adjust the reported
         //    mouse position accordingly
         var newScale = SVGRoot.currentScale;
       &
nbsp; var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clIEntX - translation.x)/newScale;
    &nb

sp; TrueCoords.y = (evt.clIEntY - translation.y)/newScale;
};

]]></script>

   <circle id=''BlueCircle'' cx=''25'' cy=''25'' r=''20'' style=''fill:blue; ''/>
   <circle id=''RedCircle'' cx=''125'' cy=''25'' r=''20'' style=''fill:red; ''/>
   <circle id=''OrangeCircle'' cx=''225'' cy=''25'' r=''20'' style=''fill:orange; ''/>
   <text id=''DraggableText'' x=''20'' y=''200'' style=''fill:red; font-size:18px; font-weight:bold;''>Draggable Text</text>

</svg>