Javascript svg.js svg.draggable.js和外观操作

我想使用中实现拖放，并操纵图形元素的外观。它主要起作用，但我不完全理解为什么

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

SVG由我的应用程序生成为字符串。我通过将SVG添加到JSFIDLE中的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");

我的问题是:

在可拖动事件处理程序中，我想更改对象的颜色。 为什么“this”指的是被拖动的对象？这是我发现的唯一一种应用fill（）并产生效果的方法。我尝试了

xx

，它是我附加在可拖动对象上的dom节点。也尝试了

e.target.fill（“红色”）

拖动费马塔字符（路径）时，颜色不变。拖动文本时，颜色不变。原因是什么？

回答bwl21：同时，我发现组的属性不会覆盖子级的属性。因此，我必须从路径中删除笔划和填充

尽管如此，我并没有设法导航到孩子们并更改那里的属性

当拖动ZN_19时，它只能垂直移动，因为我将其设置为可拖动。如果我将其分组（如ZN_20）并调用draggable（），我可以随意移动它

是否有更好的方法获取拖动结果的增量？我将x和y存储在“dragstart”处理程序中，并在“dragend”处理程序中计算增量。当我通过传递给draggable（）的函数对增量进行四舍五入时，我希望增量是整数

如果我有很多对象（我的应用程序大约有300个），当我创建很多处理程序时，我会面临性能问题吗？有没有更好的方法

---

欢迎任何帮助。

哇，这是一堆问题。我会努力解决它们

1.为什么“this”指的是被拖动的对象？ 这是svg.js通常做的事情。所有事件处理程序都在元素的上下文中执行。 因此，当单击元素时，将打印

true

：

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

是的，您可以使用

xx

，并且在您的示例中效果很好。只需用

xx

替换

this

但是，

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

2.为什么蕨类植物的填充物不变
这已经得到了正确的回答。作为一个一般提示，我可以说：如果组只有一个形状，就不要使用组。没有必要这样做

关于在dom中导航的后续问题：svg.js有一个很棒的文档。只需在搜索中键入
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视为一个新行，如果它是使用svg.js创建的。如果不是，它对它没有什么特殊作用。在您的情况下，这意味着：文本已移动（查看dom-您可以看到它）但是，在svg代码中，您可以在tspan中将x坐标重置为
80
，使其永远保持在那里。如果您不想这样做，请不要使用
x
，而是使用
dx
或调用
newLine（）
在tspan上，这将启用对行的特殊处理，其中还包括文本x坐标更改时对x坐标的更改

关于这一点，我在你的例子中使用了小提琴，它使文本消失了。这是因为文本本身有一个189的x，它在屏幕外，所以你需要先将它调整到80

4.有没有更好的方法获得阻力的增量？
不，没有

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

5.使用多个元素时是否存在性能问题
很多元素会减慢dom操作。所以不要将数百个元素一起移动。只对它们应用处理程序应该不会有问题

但是，性能也取决于浏览器。请尝试编写性能代码。通过定义可拖动约束函数来重用该函数（
el.draggable（nameOfFunc）
），尽量避免访问外部变量（如
xx
）在处理程序中，不需要生成闭包，不要在拖动上做繁重的工作，而是使用dragend来进行繁重的提升

希望我能帮上忙
非常感谢你的详细回答。这真的帮了大忙。我为细节添加了单独的注释，WRT 2。我没有在不将光标分组的情况下使路径与光标一起移动。路径数据不在最终坐标中，因此我必须对其进行转换。我看到了导航方法，但没有管理它o更改属性。我会再试一次。同时，我有一个可行的解决方案，从路径中删除属性。我现在在组中还有一个句柄，可以更容易地用鼠标捕捉到它。WRT 3：svg是在svg.js之外生成的，因为我没有足够早地找到库。我计划将svg生成器移动到webworker无法访问DOM。将SVG生成为字符串非常简单。我还有一个问题，SVG必须与我使用jspdf创建的PDF外观相同。因此我需要控制每一行文本。我尝试使用usig，但它不起作用。dx是前一行末尾的加法。使其起作用的唯一方法是将其包装在gro中向上拖动组。WRT4：你是说在