当前位置：文江博客话题详情

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

发布于 2024-12-28 06:20:39 字数 147 浏览 1 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤蝉 2025-01-04 06:20:39

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

（免责声明：我不是 jQuery 的普通用户；除了不使用 jQuery 做所有事情之外，这段代码可能在某些方面不符合习惯。）

<!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>

您还可以将事件处理程序附加到 SVG 多边形并实现拖动（我测试过，这可以工作），但是您必须在多边形的当前边界内单击，这是一个非典型的 UI，可能很棘手，并实现您的自己的命中测试。

为此，您需要向多边形元素添加一个 onmousedown 处理程序。然后检索其点，找到单击位置范围内的点，存储初始鼠标位置，然后使用 onmousemove 处理程序修改 x 和 y< /code> 该点随着鼠标位置的变化而变化。

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.

回复收藏 0 原文

~没有更多了~