Snap.如何始终用一条线连接两个对象

Snap.How to always connect two objects with a line?

本文关键字：两个 对象 连接 何始终 一条 Snap      更新时间：2023-09-26

我们如何在 Snap.svg 中始终用一条线连接两个对象？

普伦克尔：https://plnkr.co/edit/IgY0jyHbWTLuH4FfZt6o?p=preview

var circleOne = s.circle(150, 150, 100);
var circleTwo = s.circle(450, 450, 100);
var boxOne = circleOne.getBBox();
var boxTwo = circleTwo.getBBox();
var line = s.line(boxOne.cx, boxOne.cy, boxTwo.cx, boxTwo.cy);
line.attr({
  stroke: 'red'
});
var t = new Snap.Matrix();
t.translate(200, 0, boxTwo.cx, boxTwo.cy);
setTimeout(function() {
  circleTwo.animate({ transform: t}, 500, mina.easein);
}, 1000);
没

关系，想通了！

setTimeout(function() {
  circleTwo.animate({ transform: t}, 500, mina.easein);
  line.animate({
    x2: boxTwo.cx + 200
  }, 500, mina.easein);
}, 1000);

https://plnkr.co/edit/IgY0jyHbWTLuH4FfZt6o?p=preview

相关文章：