如何在缩放纸张时在 jointjs 上翻译动态添加的 SVG 动画

Question

我无法弄清楚如何在放大或缩小过程中重新定位我在纸上动态添加的 svg 动画。

我按以下方式根据业务逻辑在 link 激活时添加动画。

  c = joint.V('circle', { r: 8, fill: 'green' });
      c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, canvasPaper.findViewByModel(link).$('.connection')[0]);
      joint.V(canvasPaper.svg).append(c)

现在我转到 canvas 并适当地放大或缩小 canvas 比例中的元素。我使用 paper.scale 命令。但是我添加的动画没有移动。我能够将它缩小到尺寸但不是它的位置。我如何实现这一目标？

我的放大缩小代码如下。我也知道我必须在 svg 对象上使用翻译命令，但我不知道如何根据 zoomLevel

计算翻译值

  $('#zoom-in').on('click', function(e) {
          e.preventDefault();
          zoomLevel = Number((Math.min(1, zoomLevel + 0.2)).toFixed(1));
          canvasPaper.scale(zoomLevel, zoomLevel,0,0);  

_.each(canvasGraph.getLinks(), function(link) {
  if(link.attr('linkActiveAnimationSvgId/text')) {document.getElementById(link.attr('linkActiveAnimationSvgId/text')).setAttribute("transform", "scale(" + zoomLevel + "," + zoomLevel + ")")
  }
})

  })

我的缩小代码如下

  $('#zoom-out').on('click', function(e) {
          e.preventDefault();
      zoomLevel =Number((Math.max(0.2, zoomLevel - 0.2)).toFixed(1));
    canvasPaper.scale(zoomLevel, zoomLevel,0,0);

_.each(canvasGraph.getLinks(), function(link) {
  if(link.attr('linkActiveAnimationSvgId/text')) {document.getElementById(link.attr('linkActiveAnimationSvgId/text')).setAttribute("transform", "scale(" + zoomLevel + "," + zoomLevel + ")")
  }
})

  })

Answer 1

好的，我所要做的就是找到论文的观点，然后 paperView.vel.append(c) 代替 joint.V(canvasPaper.svg).追加(c) 现在我适当地缩放纸张和动画 scales/translates

如何在缩放纸张时在 jointjs 上翻译动态添加的 SVG 动画

how to translate a dynamically added SVG animation on jointjs when a paper is scaled

svg

jointjs