移動

移動対象の（x、y) 値を変更します。サンプルではanimate()メソッドで相対的に移動しています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <simplelayout spacing="50"/>
  <hbox>
    <button onclick="canvas.sq.animate('x',-30,500,true);">←</button>
    <button onclick="canvas.sq.animate('x',30,500,true);">→</button>
    <button onclick="canvas.sq.animate('y',-30,500,true);">↑</button>
    <button onclick="canvas.sq.animate('y',30,500,true);">↓</button>
  </hbox>
  <view name="sq" align="center" width="50" height="50" bgcolor="0xff0000"/>
</canvas>

（x、y）値をsetAttribute()メソッドで変更し、固定された位置に移動しています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <simplelayout spacing="50"/>
  <hbox>
    <button onclick="canvas.sq.setAttribute('x',100);">x=100</button>
    <button onclick="canvas.sq.setAttribute('y',120);">y=120</button>
    <button onclick="canvas.sq.setAttribute('x',10);">x=100</button>
    <button onclick="canvas.sq.setAttribute('y',30);">y=30</button>
  </hbox>
  <view name="sq" align="center" width="50" height="50" bgcolor="0xff0000"/>
</canvas>

（x、y）値を同時に変更して移動しています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <hbox>
    <button>移動
      <handler name="onclick">
         canvas.sq.animate('x',130,1200,false);
         canvas.sq.animate('y',130,1500,false);
      </handler>
    </button>
    <button>戻る
      <handler name="onclick">
         canvas.sq.animate('x',30,1200,false);
         canvas.sq.animate('y',30,1500,false);
      </handler>
    </button>
  </hbox>
  <view name="sq" x="30" y="30" width="50" height="50" bgcolor="0xff0000"/>
</canvas>