1

この例を使用してキャンバスなどを作成しています。やりたいことは、ボタンをクリックしてyodaGroupまたはの位置を移動することです。yodaImage誰かがこれをやったことがありますか、またはこれを行う方法を知っていますか?

ここが私のいるところです。

    var yodaGroup = new Kinetic.Group({
      x: 250,
      y: 30,
      draggable: true
    });

以下のこの関数をトリガーするボタンクリックを使用して、上記の yodaGroup の x 座標と y 座標を調整または追加したい

// この関数を理解する必要があります。これは単なる例です。上記の yodaGroup には ID やクラスが関連付けられていないため、定義方法がわからないからです。

   function left() {
      yodaGroup.x += 5; // move image by 5px
   }
4

3 に答える 3

1

セットポジションよりも簡単な方法があります。その .move() 関数です。

.move(x,y) は、指定された量 x および y だけオブジェクト上を移動します。

したがって、これは次のようになります。

function left() {
   yodaGroup.move(-5,0);
}
function right() {
   yodaGroup.move(5,0);
}
function up() {
   yodaGroup.move(0,-5); //negative is up in canvas
}
function down() {
   yodaGroup.move(0,5); //positive is down in canvas
}

これは、getPosition を 2 回呼び出してから位置を設定するよりもはるかに高速です。また、setPosition は move よりも多くのリソースと処理を必要とします。

http://kineticjs.com/docs/symbols/Kinetic.Node.php#move

于 2013-01-04T22:43:21.803 に答える
0

「x」プロパティが公開されているかどうかはわかりません。APIによると、setPosition（）メソッドを使用する必要があります：http：//kineticjs.com/docs/symbols/Kinetic.Node.php#setPosition

私は次のようなことを試みます：

<button data-direction="right" value="&gt;">
<button data-direction="left" value="&lt;">

Javascript（jQueryを使用）：

var yodaGroup = new Kinetic.Group({
  x: 250,
  y: 30,
  draggable: true
});

var step = 5;

$('button [data-direction=right]').click(function() {
  yodaGroup.setPosition(yodaGroup.getPosition().x + step, yodaGroup.getPosition().y);
});

$('button [data-direction=left]').click(function() {
  yodaGroup.setPosition(yodaGroup.getPosition().x - step, yodaGroup.getPosition().y);
});
于 2013-01-04T22:23:47.677 に答える
0

これを使用して終了しました...そしてそれが機能しました

html

<div class="positionImage">
<input type="button" value="left" id="left" >
<input type="button" value="right" id="right" >
<input type="button" value="up" id="up" >
<input type="button" value="down" id="down" >
</div>

脚本

// zoom by scrollong
document.getElementById("container").addEventListener("mousewheel", function(e) {
   var zoomAmount = e.wheelDeltaY*0.0001;
   yodaGroup.setScale(yodaGroup.getScale().x+zoomAmount)
   layer.draw();
   e.preventDefault();
}, false)

// move down
document.getElementById("down").addEventListener("click", function(e) {
yodaGroup.move(0,5);
layer.draw();
e.preventDefault();
}, false)

// move right
document.getElementById("right").addEventListener("click", function(e) {
yodaGroup.move(5,0);
layer.draw();
e.preventDefault();
}, false)

// move up
document.getElementById("up").addEventListener("click", function(e) {
yodaGroup.move(0,-5);
layer.draw();
e.preventDefault();
}, false)

// move left
document.getElementById("left").addEventListener("click", function(e) {
yodaGroup.move(-5,0);
layer.draw();
e.preventDefault();
}, false)
于 2013-01-07T22:09:46.793 に答える