Question

我想知道你们是否可以帮我解决我遇到的问题。希望找出问题并不需要您查看我正在使用的图形包的文档，但如果确实如此，请转到：http://raphaeljs.com/reference.html#Element.transform。

我有以下代码块

window.setInterval(function()
{
    mycirc.transform("t1,1");
}, 500);

当然应该每半秒调用一次函数mycirc.transform("t1,1")。该函数应该将mycirc的x和y坐标转换为1个单位（查看http://raphaeljs.com/reference.html#Element.transform上的Element.transform（[tstr]））。

但是，当我测试我的页面时，mycirc会被翻译一次，然后后续调用无效。我使用console.log(...)来测试并确保：

window.setInterval(function()
{
    var bb = mycirc.getBBox();
    console.log("coords before transformation: " + bb.x + "," + bb.y);
    mycirc.transform("t1,1");
    var bb = mycirc.getBBox();
    console.log("coords after transformation: " + bb.x + "," + bb.y);

}, 500);

产量

coords before transformation: 120.98508107696858,106 jsfunctions.js:411
coords after transformation: 121.98508107696858,107 jsfunctions.js:414
coords before transformation: 121.98508107696858,107 jsfunctions.js:411
coords after transformation: 121.98508107696858,107 jsfunctions.js:411

等等。

知道为什么会这样吗？

（我试图查看图形包的源代码，但因为没有空格而无法读取。）

Answer 1

你的代码

mycirc.transform("t1,1");

与当前状态无关。它只是从原始状态转换为t1,1，然后从t1,1转换为t1,1等。

你应该每次计算转换。

编辑：所以它需要一个全局变量，每次递增，如：

var xyPos = 1;
window.setInterval(function()
{
    mycirc.transform("t"+xyPos+","+xyPos);
    xyPos++;
}, 500);

Answer 2

在您链接的文档的使用部分中，它显示了如何预先添加和附加转换。这对我来说意味着你的代码每次只会将转换重置为同一个东西。我从来没有使用过这个图形库，所以我不能肯定地说，但尝试下面这样的东西，看看它是否有效：

mycirc.transform("t1,1");
mycirc.transform("...t1,1");
mycirc.transform("...t1,1");
mycirc.transform("...t1,1");

我相信这将会应用相同的变换4次。当然，您需要将此逻辑转换为您使用的间隔。

Answer 3

我认为这是预期的行为。引用文档：

向与其他元素分开的元素添加转换属性，即翻译不会改变矩形的x或y。

尝试：

var amount = 1;
window.setInterval(function()
{
    mycirc.transform("t" + [amount, amount].join(','));
    amount++;
}, 500);

JavaScript函数只在我第一次调用时工作？

3 个答案: