Question

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

我按照以下方式根据业务逻辑在链接处于活动状态时添加动画。

  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)

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

我的放大和缩小代码如下。我也知道我必须在svg对象上使用translate命令，但我不知道如何根据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）.append（c）中现在我缩放纸张，动画可以适当缩放/翻译

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

1 个答案: