0

我对 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另外，在使用该方法时，最后我无法获得蓝色框的正确坐标。

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

谢谢

4

1 回答 1

0

由于您没有解释要如何移动按钮，我假设您要移动box2上面的box1.

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

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

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

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

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

这就是文本存在的原因。

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

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

不，属性是正确的。

转换元素时，转换的结果不会反映回属性。您可以这样想，当 时transform()，您实际上是在将“转换”附加到元素上。所以 ：

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

您可以将圆圈描述为：

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

但不是 - (200, 100) 处的一个圆圈，它将水平移动 100 像素。

所以，这里是你想要的代码，注意我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) 处产生一个圆圈。这就是边界框给我的。那么为什么我无法在转换后从圆中获取坐标而必须使用边界框方法呢？

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

这就是 Raphael.js 的工作原理。要么使用边界框功能，要么像这样自己扩展 Raphael.js

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

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

无论如何，您总是可以编写辅助函数来为您完成这些丑陋的工作，我看不出有什么问题。

于 2013-01-19T05:57:35.743 回答