svg.js svg.draggable.js 和外观操纵

Question

我想使用 svg.js 来实现拖放和操作图形元素的外观。主要是有效果，但是我不太明白为什么。

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

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

我有一个函数“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");

我的问题：

在可拖动事件处理程序中，我想更改 object 的颜色。 为什么'this'指的是被拖动的object？这是我发现应用fill()有效果的唯一方法。我尝试使用 xx 这是我附加可拖动对象的 dom 节点。还尝试使用 e.target.fill("red")。
拖动Fermata - Character（路径）时，颜色不变。它在拖动文本时有效。 可能是什么原因？

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

然而，我没有设法导航到 children 并更改那里的属性。
拖动 ZN_19 时，它只能 垂直移动 ，因为我将其设置为可拖动。如果我将它包裹在一个组中（如 ZN_20）并在其上调用 draggable()，我可以随意移动它。
是否有更好的方法来获取拖动结果的增量？ 我将 x 和 y 存储在 'dragstart' 处理程序中，然后计算'dragend' 处理程序中的增量。我希望增量是整数，因为我通过传递给 draggable() 的函数对其进行舍入。
如果我有很多 object（我的应用大约有 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 操作。所以不要一起移动数百个元素。仅向它们应用处理程序应该不是问题。

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

希望我能帮到你

svg.js svg.draggable.js 和外观操纵

svg.js svg.draggable.js and manipulation of appearance

javascript

svg

svg.js

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

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

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

4。有没有更好的方法来获得拖动结果的增量？

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