Question

我对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方法时，我无法在结尾处获得蓝框的正确坐标。

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

谢谢

Answer 1

由于您没有解释您想要如何移动按钮，我假设您要将box2移到box1之上。

您的代码中存在一些误解和错误，请允许我逐一解释。

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

因为集合不是一组元素，它知道它在组内的相对位置。集合只是一组元素，旨在让我们以更方便的方式操作它们。

因此，下面的代码会将集合中的所有元素移动到（100,50）

set.animate({x: 100, y: 50 }, 1000);

这就是文本存在的原因。

我找不到该文档，但您可以找到一些解释here。

为什么使用transform时属性中的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）处的圆圈。这就是边界框给我的东西。那么为什么我无法得到转换后的圆圈坐标必须使用边界框方法？

转换DOSE NOT不改变元素中的原始属性，因为它是您附加到元素的东西，而不是直接更改元素的函数。如果您想在应用转换后了解属性，则必须使用getBBox()，或查看matrix。

这就是Raphael.js的工作原理。要么使用边界框功能，要么像this

那样自己扩展Raphael.js

我已经改变了我之前关于如何描述转换的答案，希望它能帮助你更好地理解这一点。

您的代码效果很好，但它有缺点，您必须这样做计算变换值而不是简单地设置位置。有没有其他方法可以移动内部带有文本的矩形到你选择的位置？

你总是可以编写帮助函数为你做这些丑陋的工作，我不认为它有任何问题。

在Raphael javascript库中使用文本设置矩形动画

1 个答案:

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

为什么使用transform时属性中的x，y似乎是错误的？

更新