用Raphael javascript库中的文本动画矩形

animating a rectangle with text in Raphael javascript library

本文关键字：文本 动画 画矩形 Raphael javascript      更新时间：2023-09-26

我对javascript和Raphael都很陌生。我试图移动一个像按钮一样的矩形与文本在里面。下面是我的代码:

window.onload = function() {
  var paper = new Raphael(document.getElementById('canvas_container'), "100%", "100%");
  var box1 = paper.rect(100, 100, 120, 50, 10).attr({fill: 'darkorange', stroke: '#3b4449', 'stroke-width': 2, cursor: 'pointer'});
  var box2 = paper.rect(400,100,120,50,10).attr({fill: 'lightblue', stroke: '#3b4449', 'stroke-width': 2});
  var text2 = paper.text(box2.attrs.x + box2.attrs.width/2,box2.attrs.y + box2.attrs.height/2,"[x: " + box2.attrs.x + " y: " + box2.attrs.y + "]").attr({"font-family": "arial", "font-size": 16});
  var button2 = paper.set();
  button2.push(box2); 
  button2.push(text2);
  box1.click(function(){
    // this did not work
    // button2.animate({x: 100, y: 50 }, 1000, 'bounce', function() { // callback function
    //  text2.attr('text',"[x: " + box2.attrs.x + " y: " + box2.attrs.y + "]");
    // });
    button2.animate({transform: "t100,100"}, 1000, 'bounce', function() { // callback function
        text2.attr('text',"[x: " + box2.attrs.x + " y: " + box2.attrs.y + "]");
    });
  });
}

button2.animate({x: 100, y: 50 }, 1000, 'bounce');行没有正常工作，文本在末尾没有在正确的位置。通过使用transform:，我不能使用坐标，我必须计算它们。当使用transform方法时，我也无法获得最后蓝色框的正确坐标。

我还没有找到任何答案，希望有人能帮助我。

谢谢

既然你没有解释你到底想如何移动你的按钮，我假设你想把box2移动到box1上面。

你的代码中有一些误解和错误，请允许我逐一解释。

为什么第一种方式会导致文本移动到错误的位置?

因为集合不是一组知道自己在组中的相对位置的元素。set仅仅是元素的集合，设计它是为了便于我们以一种更方便的方式操作它们。

因此，下面的代码将把集合中的所有元素移动到(100,50) 
set.animate({x: 100, y: 50 }, 1000);

，这就是文本在那里的原因。

我找不到文件，但你可以在这里找到一些解释。

为什么使用转换时属性中的x, y似乎是错误的?

不，属性是正确的。

当您转换一个元素时，转换的结果将不会反射回属性。你可以这样想，当transform()时，你实际上是在给元素附加"转换"。因此:

paper.circle(100, 100, 5).transform("t100");

你可以这样描述这个圆:

一个圆圈(100,100)，它将水平移动100px。

但不是- 一个圆圈(200,100)，将水平移动100px。

那么，这里是你想要的代码，请注意，我使用getBBox()来获得button2集合的坐标。

  box1.click(function(){
    var moveX = box1.attr("x") - button2.getBBox().x;
    var moveY = (box1.attr("y") - 50) - button2.getBBox().y;
    button2.animate({transform: "t" + moveX + "," + moveY}, 1000, 'ease-in-out', function () {
      text2.attr('text', "[x: " + button2.getBBox().x + "y: " + button2.getBBox().x + "]");
    });
  });

欢迎来到SO，并建议你下次写一个SSCCE。

更新

我不完全明白为什么转换没有反射回来属性。如果我把圆移动到(100,100)这个位置水平100px，将在位置(200,100)得到一个圆。这是边界框给我的。所以为什么我不能得到坐标由圆变换后而得使用binding -box方法?

Transform不会改变元素中的原始属性，因为它是你附加到元素上的东西，而不是直接改变元素的函数。如果你想知道转换后的属性，你必须使用getBBox()，或者看看矩阵。

这就是拉斐尔.js的工作原理。要么使用边界框函数，要么自己扩展拉斐尔.js，像这样

我对之前关于我如何描述转化的回答做了一些修改，希望这次能帮助你更好的理解。

你的代码工作得很好，但它有一个缺点，你必须计算转换值，而不是简单地设置的位置。还有其他的方法来移动一个矩形里面的文字吗到你选择的职位去?

无论如何，你总是可以编写辅助函数来为你做这些丑陋的工作，我不认为这有什么不妥。

相关文章：