使用Javascript捕捉网格功能

时间:2010-12-22 09:29:28

标签: javascript svg

我正在研究SVG,我遇到了一个问题,即我想在我的应用程序中实现“对齐网格”功能。

我在SVG中使用了线条,我也在其中实现了拖放功能。现在我想在其中实现“Snap to Grid”功能。

SVG的文件名是(DndD.svg)以该名称保存

这是代码

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JSP Page</title>
</head>

<body>
  <object data="DndD.svg" id="oo" style="width: 800px" height="500px">

  </object>
  <span id="trail" style="visibility: hidden"></span>
</body>
<script type="text/javascript">

  var far = document.getElementById("oo");
  far.addEventListener(
    "load",
    function () {
      var svgDoc = far.contentDocument;
      var svgRoot = svgDoc.documentElement;
      var r = svgDoc.getElementById("rectangle");
      r.onmousemove = function (evt) {
        var x = evt.pageX;
        var y = evt.pageY;
        document.getElementById("trail").style.visibility = "visible";
        document.getElementById("trail").style.position = "absolute";
        document.getElementById("trail").style.left = evt.clientX + 10;
        document.getElementById("trail").style.top = evt.clientY;
        document.getElementById("trail").innerHTML = x + "," + y;
      };
      var line2;
      var count = 0;
      var xx = 0;
      var yy = 0;
      line2 = "line_id" + count;
      for (var i = 0; i <= 48; i++) {
        xx = xx + 10;
        var line = svgDoc.createElementNS("http://www.w3.org/2000/svg", "line");
        line.setAttribute("id", line2);
        line.setAttribute("x1", xx);
        line.setAttribute("y1", "0");
        line.setAttribute("x2", xx);
        line.setAttribute("y2", "400");
        line.setAttribute("stroke", "red");
        line.setAttribute("stroke-width", "1");
        line.setAttribute("pointer-events", "none");
        svgRoot.appendChild(line);
      }

      for (var i = 0; i <= 39; i++) {
        yy = yy + 10;
        var line = svgDoc.createElementNS("http://www.w3.org/2000/svg", "line");
        line.setAttribute("id", line2);
        line.setAttribute("x1", "0");
        line.setAttribute("y1", yy);
        line.setAttribute("x2", "500");
        line.setAttribute("y2", yy);
        line.setAttribute("stroke", "red");
        line.setAttribute("stroke-width", "1");
        line.setAttribute("pointer-events", "none");
        svgRoot.appendChild(line);
      }

      var rec = svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect");
      rec.setAttribute("id", "btn_rect");
      rec.setAttribute("fill", "orange");
      rec.setAttribute("stroke", "black");
      rec.setAttribute("x", "100px");
      rec.setAttribute("y", "100px");
      rec.setAttribute("width", "45px");
      rec.setAttribute("height", "45px");
      rec.setAttribute("rx", "3px");
      rec.setAttribute("ry", "3px");
      svgRoot.appendChild(rec);
    },
    false
  );



</script>

</html>

SVG CODE其他文件

<?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.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt)"
  onmousedown="Grab(evt)" onmousemove="Drag(evt)" onmouseup="Drop(evt)">

  <rect x="0" y="0" width="500px" height="400px" fill="black" stroke="black" id="rectangle" pointer-events="none" />
  <script>
    < ![CDATA[

    var SVGDocument = null;
    var SVGRoot = null;
    SVG_lay = new Array();
    var TrueCoords = null;
    var GrabPoint = null;
    var BackDrop2 = 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();

      // this 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
      BackDrop2 = SVGDocument.getElementById('BackDrop1');
    }

    function Grab(evt) {
      // find out which element we moused down on
      var targetElement = evt.target;
      //SVG_lay.push(targetElement);
      // you cannot drag the background itself, so ignore any attempts to mouse down on it
      if (BackDrop2 != 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
        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 ('BackDrop1' == 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);

          if ('bin' == targetElement.id) {
            //targetElement.parentNode.appendChild( DragTarget );

            var ch = SVGDocument.getElementById(DragTarget.id);
            var pa = ch.parentNode;
            pa.removeChild(ch);
          }
        }

        // 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;
      var translation = SVGRoot.currentTranslate;
      TrueCoords.x = (evt.clientX - translation.x) / newScale;
      TrueCoords.y = (evt.clientY - translation.y) / newScale;
    };

    ]]>
  </script>

</svg>

0 个答案:

没有答案