动态调整大小和拖动SVG多边形 | 动态调整大小和拖动SVG多边形

本文介绍了动态调整大小和拖动SVG多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力寻找一种方法来使用鼠标动态调整和拖动svg多边形。不幸的是，jQueryUi不适用于svg元素。我还检查了Raphael库，但是找不到任何关于如何实现这一点的文档/片段。

除了使用SVG之外，还有其他方法可以调整大小和拖动多边形动态图形？

解决方案

您可以自己使用SVG元素。特别是，您可以找到多边形的点并添加可使用jQuery拖动的HTML元素句柄。（我假设您遇到的问题是jQuery UI无法与SVG定位模型一起使用。）这是我刚刚编写的完整示例（在Safari 5和Firefox 9中测试过）。

（免责声明：我不是jQuery的常规用户;除了不为所有内容使用jQuery之外，这段代码可能是单一的。）

 <！DOCTYPE html>< html>< head> <标题>&无LT; /标题> < style type =text / cssmedia =screen> .handle {position：absolute;边框：0.1em纯黑色;宽度：1em;身高：1em; }< / style> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> < script src =https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js>< / script> < script type =text / javascript> function draggablePolygon（polygon）{var points = polygon.points; var svgRoot = $（polygon）.closest（svg）; for（var i = 0; i< points.numberOfItems; i ++）{（function（i）{// close for variables for drag call back var point = points.getItem（i）; var handle = document.createElement（ div）; handle.className =handle; document.body.appendChild（handle）; var base = svgRoot.position（）; //多边形的中心句柄var cs = window.getComputedStyle（handle，null）; base。 left  -  =（parseInt（cs.width）+ parseInt（cs.borderLeftWidth）+ parseInt（cs.borderRightWidth））/ 2; base.top  -  =（parseInt（cs.height）+ parseInt（cs.borderTopWidth）+ parseInt（ cs.borderBottomWidth））/ 2; handle.style.left = base.left + point.x +px; handle.style.top = base.top + point.y +px; $（handle）.draggable （{drag：function（event）{setTimeout（function（）{// jQuery显然在*设置位置之前调用此*，因此推迟point.x = parseInt（handle.style.left） -  base.left; point.y = parseInt函数（handle.style.top） -  base.top; }，0）; }}; }（一世））; }< / script>< / head>< body> < p为H. （偏移测试）< svg id =theSVGwidth =500height =500style =border：2px inset #CCC;> < polygon id =xpoints =200,200 100,100 100,1fill =green/> < polygon id =ypoints =200,200 100,100 1,100fill =red/> < / SVG> < / p为H. < script type =text / javascript> draggablePolygon（的document.getElementById（ ×））; draggablePolygon（的document.getElementById（ Y））; < / script>< / body>< / html>

为此，你需要在polygon元素中添加一个 onmousedown 处理程序。然后检索它的点，找到哪个在点击位置的范围内，存储初始鼠标位置，然后有一个 onmousemove 处理程序修改 x 和 y 当鼠标位置发生变化时。

I am struggling to find a way for resizing and dragging a svg polygon dynamically with the mouse. Unfortunately jQueryUi does not work for svg elements. I also checked the Raphael library, but cant find any documentation/snippets on how to realize this.

Besides using SVGs, is there any other way to resize and dragg a polygon graphic dynamically?

解决方案

You can work with the SVG elements yourself. In particular, you can find the points of the polygon and add HTML-element handles which are made draggable with jQuery. (I'm assuming the problem you're having is that jQuery UI doesn't work with the SVG positioning model.) Here's a complete example I just wrote (tested in Safari 5 and Firefox 9).

(Disclaimer: I am not a regular user of jQuery; this code may be unidiomatic in ways besides not using jQuery for everything.)

<!DOCTYPE html>
<html><head>
  <title>untitled</title>

  <style type="text/css" media="screen">
    .handle {
      position: absolute;
      border: 0.1em solid black;
      width: 1em;
      height: 1em;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

  <script type="text/javascript">
  function draggablePolygon(polygon) {
    var points = polygon.points;
    var svgRoot = $(polygon).closest("svg");

    for (var i = 0; i < points.numberOfItems; i++) {
      (function (i) { // close over variables for drag call back
        var point = points.getItem(i);

        var handle = document.createElement("div");
        handle.className = "handle";
        document.body.appendChild(handle);

        var base = svgRoot.position();
        // center handles over polygon
        var cs = window.getComputedStyle(handle, null);
        base.left -= (parseInt(cs.width) + parseInt(cs.borderLeftWidth) + parseInt(cs.borderRightWidth))/2;
        base.top -= (parseInt(cs.height) + parseInt(cs.borderTopWidth) + parseInt(cs.borderBottomWidth))/2;

        handle.style.left = base.left + point.x + "px";
        handle.style.top = base.top + point.y + "px";

        $(handle).draggable({
          drag: function (event) {
            setTimeout(function () { // jQuery apparently calls this *before* setting position, so defer
              point.x = parseInt(handle.style.left) - base.left;
              point.y = parseInt(handle.style.top) - base.top;
            },0);
          }
        });
      }(i));
    }
  }
  </script>
</head><body>
  <p>
    (Offset to test)
    <svg id="theSVG" width="500" height="500" style="border: 2px inset #CCC;">
      <polygon id="x" points="200,200 100,100 100,1" fill="green" />
      <polygon id="y" points="200,200 100,100 1,100" fill="red" />
    </svg>
  </p>
  <script type="text/javascript">
    draggablePolygon(document.getElementById("x"));
    draggablePolygon(document.getElementById("y"));
  </script>

</body></html>

You could also attach an event handler to the SVG polygon and implement dragging (I tested and this could work), but then you would have to click inside the current boundaries of the polygon, which is an atypical UI and possibly tricky, and implement your own hit testing.

For this, you would add an onmousedown handler to the polygon element. Then retrieve its points, find which is in range of the click position, store the initial mouse position, and then have an onmousemove handler modify the x and y of the point as the mouse position changes.

这篇关于动态调整大小和拖动SVG多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！