如何以编程方式为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);