如何在縮放紙張時在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動畫

回答

相關問題