如何以编程方式正确更改 JointJS 中链接的顶点位置

Question

我正在使用以下代码更改链接的顶点位置：

var vertices = link.get('vertices');
for(var j=0;j < vertices.length; j++){
   var vertex = vertices[j];
   vertex.x += differenceX;
   vertex.y += differenceY;
}

然而，即使链接顶点似乎被很好地翻译了，当将鼠标悬停在链接上时，链接工具会出现在之前的位置，如下面的屏幕截图所示：

我已经尝试了不同的方法，包括调用

• paper.render()
• linkview.update()

不幸的是，它们似乎都不起作用......

Answer 1

您应该使用Backbone.Model.prototype.set 来更新属性，而不是直接修改它们。否则不会在模型上触发 change 事件，并且视图不会自行更新。

var oldVertices = link.get('vertices');
var newVertices = [];

for(var j=0; j < oldVertices.length; j++){
   var oldVertex = oldVertices[j];
   // Create a new object, so you are not modifying
   // the previous model's attributes.
   // Backbone Model would not trigger a change event if the previous
   // and the new value are `deep` equal.
   var newVertex = { x: oldVertex.x, y: oldVertex.y }
   newVertex.x += differenceX;
   newVertex.y += differenceY;
   newVertices.push(newVertex);
}

link.set('vertices', newVertices);