javascript - svg.js svg.draggable.js 和外观操作

Question

我想使用 svg.js在实现拖放和操纵图形元素的外观。它主要有效，但我不完全理解为什么。

我已经从我的应用程序中提取了重要部分来说明我的应用程序的情况。可以在那里玩，看看效果。

https://jsfiddle.net/bwl21/ex8dcxtm/12/

SVG 由我的应用程序生成为字符串。我通过将 SVG 添加到 jsfiddle 中的 HTML Pane 来模拟这一点。

我有一个函数“set_draggable(id)，它获取 svg 元素的 id 并附加一个拖动处理程序。

function set_draggable(svg_element) {

  var xx = SVG.get(svg_element);
  xx.addClass("zn_draggable");

  xx.draggable(function(x, y) {
    return {
      x:  Math.floor(x),
      y:  Math.floor(y)
    }
  });

  var sx = 0,
    sy = 0;
  xx.on('dragstart', function(e) {
    sx = e.detail.p.x;
    sy = e.detail.p.y;
    this.fill("red");
  });

  // todo: don't know why 'this' is the only way to change the filling ...
  xx.on('dragend', function(e) {
    this.fill("green");
    var result = {
      delta: [ e.detail.p.x - sx, e.detail.p.y - sy],
      element: svg_element
    };
    alert(JSON.stringify(result));
  })
}


set_draggable("ZN_18");
set_draggable("ZN_19");
set_draggable("ZN_20");
set_draggable("ZN_21");

我的问题:

1. 在可拖动事件处理程序中，我想更改对象的颜色。为什么“this”指的是被拖动的对象？这是我发现应用具有效果的 fill() 的唯一方法。我尝试使用 xx 这是我附加可拖动对象的 dom 节点。还尝试使用 e.target.fill("red")。

2. 拖动 Fermata - Character(路径)时，颜色不会改变。它在拖动文本时有效。 可能是什么原因？

   bwl21 的回答:同时我发现组的属性不会覆盖 child 的属性。所以我不得不从路径中删除描边和填充。

   然而，我没有设法导航到子项并更改那里的属性。

3. 拖动 ZN_19 时，它可以仅垂直移动，因为我将其设置为可拖动。如果我将它包装在一个组中(如 ZN_20)并对其调用 draggable()，我可以随意移动它。

4. 是否有更好的方法来获取拖动结果的增量？我将 x 和 y 存储在“dragstart”处理程序中，并在“dragend”处理程序中计算增量。我希望增量为整数，因为我通过传递给 draggable() 的函数对其进行舍入。

5. 如果我有很多对象(我的应用程序大约有 300 个)，我是否会遇到性能问题，因为我创建了很多处理程序？有没有更好的方法来做到这一点。

欢迎任何帮助。

Answer 1

哇，这么多问题。我会尽力解决它们。

1。为什么“this”指的是被拖动的对象？

这是 svg.js 通常所做的事情。所有事件处理程序都在元素的上下文中执行。所以当点击元素时打印 true:

el.on('click', function() { console.log(this == el) })

所以是的，您可以改用xx，它在您的示例中工作得很好。只需将 this 替换为 xx。

然而，this 是一种保存方式，因为在使用可能在其他地方重新清除的外部变量时，您可能会遇到变量作用域问题(典型示例:在循环中附加事件处理程序)

2。为什么加号的填充没有变化

这已经被正确回答了。作为一般提示，我可以说:如果它们只保持一种形状，请不要使用组。没有必要这样做。

关于在 dom 中导航的后续问题:svg.js 有一个很棒的文档。只需在 http://svgjs.dev/ 的搜索中输入 children .

你有多种可能性:

el.children() // array
el.get(index) // element at index
el.first() // first element
el.last() // last element

3。为什么只能垂直拖动文本

您的 svg 不是使用 svg.js 生成的。 Svg.js 将每个第一级 tspan 视为一个新行 IF 它是用 svg.js 创建的。如果没有，它没有什么特别的。在您的情况下，这意味着:文本 IS 已移动(查看 dom - 您可以看到它)。但是，在您的 svg 代码中，您在 tspan 中将 x 坐标重置为 80，因此它会永远留在那里。如果你不想那样，不要使用 x 而是使用 dx 或在 tspan 上调用 newLine() ，这将启用对行的特殊处理其中还包括当文本 x 坐标更改时对 x 坐标的更改。

关于此的注意事项:我在您的示例 fiddle 中做到了，这使文本消失了。那是因为文本本身的 x 为 189，超出了屏幕，所以您需要先将其调整为 80

4。有没有更好的方法来获得阻力的增量？

不，没有。

在将坐标设置到元素之前，对坐标应用舍入。但是:原始点在事件对象中给出，因为它是真理的来源

5.使用很多元素时是否存在性能问题

许多元素会减慢 dom 操作。所以不要一起移动数百个元素。仅向它们应用处理程序应该不是问题。

但是，性能还取决于浏览器。尝试编写高性能代码。通过定义它们 (el.draggable(nameOfFunc)) 来重用 draggable-constraint 函数，尽量避免在处理程序中访问外部变量(如 xx)，因此不需要闭包生成，不要在拖动上做繁重的工作，而是使用 dragend 来完成繁重的工作。

希望能帮到你