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

我无法弄清楚如何重新放置在放大或缩小期间动态添加在我的纸张上的svg动画。如何在缩放纸张时在jointjs上动态添加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对象上的转换命令，但我不知道如何计算基础上的个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 + ")") 
    } 
}) 

    })

来源

2017-06-01 Vinay Prabhakaran

好吧，我所要做的只是找到纸张的视图，然后将纸张的视图，然后将纸张视图.vel.append（c）而不是 joint.V（canvasPaper.svg）.append（c）现在我缩放纸张和动画缩放/适当翻译

来源

2017-06-05 06:51:16

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

回答

相关问题