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。

あなたのコードにはいくつかの誤解や誤りがあります。1 つずつ説明させてください。

最初の方法でテキストが最後に間違った位置に移動するのはなぜですか?

セットは、グループ内の相対位置を知っている要素のグループではないためです。セットは、より便利な方法で操作できるように設計された要素の集まりにすぎません。

したがって、以下のコードは、セット内のすべての要素を (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) の円で、水平方向に 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) の円になります。これがバウンディングボックスが私に与えるものです。では、変換後に円から座標を取得できず、バウンディング ボックス メソッドを使用しなければならないのはなぜですか?

要素を直接変更する機能ではなく、要素に付加するものであるため、変換は要素の元の属性を変更しないでください。変換が適用された後に属性を知りたい場合は、を使用するか、マトリックスgetBBox()について調べる必要があります。

これが Raphael.js の仕組みです。境界ボックス関数を使用するか、このように自分で Raphael.js を拡張します。

変換の説明方法に関する以前の回答を少し変更しました。今回は、理解を深めるのに役立つことを願っています。

コードはうまく機能しますが、単に位置を設定するのではなく、変換値を計算する必要があるという欠点があります。テキストを含む四角形を選択した位置に移動する他の方法はありますか?

とにかく、これらの醜い仕事をするヘルパー関数をいつでも書くことができます。私はそれが間違っているとは思いません。

于 2013-01-19T05:57:35.743 に答える