Question

我是Joint js的新手，也是有限的javascript技能。我想要实现的是，当我点击Animate按钮时，动画圆圈应该遵循从开始到结束的路径。它确实遵循路径但不在线。

c = V('circle', {
              r: 8,
              fill: 'red'
            });
        var cylinderView = graph.getCell(reserved_path[player[i]]).findView(paper);
        var cylinderPath = cylinderView.vel.findOne('path');
        var cyclic = graph.getCell(jQuery("#"+player[i]).attr('model-id')).findView(paper);
        var cylinderScalable = cyclic.vel.findOne('.scalable');

        var cylinderScalableCTM = cylinderPath.node.getCTM().inverse();

        c.animateAlongPath({
          dur: '5s',
          repeatCount: '1'
        }, cylinderPath.node);

        c.scale(2, 2);

        cylinderScalable.append(c);

我所理解的是cylinderScalable.append（c）行正在创建这个问题，如果我可以将细节直接附加到svg中，它可以解决，但我不知道如何实现它

以下是我的完整代码：https://jsfiddle.net/9espjppv/

提前感谢您的帮助。

Answer 1

看一下这个doc，它可能会对你有帮助

  var c = V('circle', { r: 8, fill: 'red' });
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, paper.findViewByModel(myLink).$('.connection')[0]);
V(paper.svg).append(c);

联合js - 在svg中沿着路径制作动画的圆圈

1 个答案: