マウス位置ゲット

マウスの位置(x,y座標)を取得するには、

getMouse()

サンプルはクリックした場所に赤い四角が瞬間移動します。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <view name="sq" width="20" height="20" bgcolor="0xff0000"/>
  <handler name="onmousedown">
    var X = this.getMouse('x');
    var Y = this.getMouse('y');
    this.sq.setAttribute("x", X);
    this.sq.setAttribute("y", Y);
  </handler>
</canvas>

こちらは瞬間移動ではなく、ビューンと走って移動してきます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <view name="sq" width="20" height="20" bgcolor="0xff0000"/>
  <handler name="onmousedown">
    var X = this.getMouse('x');
    var Y = this.getMouse('y');
    this.sq.animate("x",X,300,false);
    this.sq.animate("y",Y,300,false);
  </handler>
</canvas>

マウスに赤い四角がくっついてきます。

サンプルの初期画面には何もありませんが、マウスカーソルを持っていってみてください。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <view width="20" height="20" bgcolor="red"
    xoffset="20" yoffset="20"
    x="${canvas.getMouse('x')}" y="${canvas.getMouse('y')}">
  </view>
</canvas>

ちょっと応用例。マウスカーソルの部分にスポットライトがあたったような効果。

背景画像の上に、透明穴のあいた画像を乗せ、その画像をマウスに合わせて動かしているだけ。。

<canvas proxied="false" width="500" height="300">
  <view resource="niwa.jpg" onmouseover="spot.show.doStart();"/>
  <view name="spot" resource="spot.png" opacity="0"
      x="${canvas.getMouse('x')-580}"
      y="${canvas.getMouse('y')-380}">
    <animator name="show" attribute="opacity" to="0.8" duration="1"
        start="false" onstop="screen.destroy()"/>
  </view>
  <view name="screen" width="${canvas.width}" 
      height="${canvas.height}" bgcolor="0x000000" opacity="0.8"/>
</canvas>

ちょっぴり応用編。他にここで学べるのはクラスの作成、グローバルな<attribute>の使い道、インスタンスの動的生成などなどです。といっても解説皆無ですみません(^^;)。。。サンプル見て感じ取ってください。

灰色の画面のどっかクリックすると赤い四角が現れます。クリックは何度でも。

でてきた四角はドラッグアンドドロップできます。ドラッグ中は青くなります。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <attribute name="doesExist" type="boolean" value="false"/> 
 
  <class name="sq" width="20" height="20" bgcolor="white">
    <dragstate name="dr"/>
    <view align="center" valign="middle" width="18" height="18" bgcolor="red">
      <handler name="onmouseover">
        canvas.setAttribute('doesExist',true);
      </handler>
      <handler name="onmouseout">
        canvas.setAttribute('doesExist',false);
      </handler>
      <handler name="onmousedown">
        this.setBGColor(blue);
        parent.bringToFront();
        parent.dr.apply();
      </handler>
      <handler name="onmouseup">
        this.setBGColor(red);
        parent.dr.remove();
      </handler>
    </view>
  </class>
 
  <handler name="onmousedown">
    var X = this.getMouse('x');
    var Y = this.getMouse('y');
    if(!canvas.doesExist){ 
      sikaku = new lz.sq(this,{'x':X-10,'y':Y-10});
    }
  </handler>
</canvas>

※いつぞやのLaszlo Japan掲示板にあったのを拾ってきたものを書き直したもの。

▼タグ
<basetrackgroup>
▼イベント
onmousetrackover
onmousetrackout
onmousetrackup

<basetrackgroup>タグ内の複数のビュー間で、マウスダウン状態を引き継がせることができます。

サンプルで説明すると：
あるビュー上でマウスボタンを押したら選択状態を示すために色と高さを変えていますが、マウスボタンを押したまま他のビューにマウスカーソルを移動すると、押した状態(色と高さが変わった状態)を引き継いでいきます。

マウスボタン押したまま、「ど・れ・に・し・よ・う・か・な～」という迷いの操作向けですかね(笑)

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <class name="v" width="50" height="50" bgcolor="red" 
           onmouseover="setAttribute('height', 70)" 
           onmouseout="setAttribute('height', 50)" 
           onmouseup="setAttribute('bgcolor', red)" >
    <handler name="onmousetrackover">
      setAttribute('bgcolor', blue);
      setAttribute('height', 70);
    </handler>
    <handler name="onmousetrackout">
      setAttribute('bgcolor', red);
      setAttribute('height', 50);
    </handler>
    <handler name="onmousetrackup">
      setAttribute('bgcolor', red);
      setAttribute('height', 50);
    </handler>
  </class>
 
  <basetrackgroup>
    <simplelayout axis="x" spacing="10"/>
    <v />
    <v />
    <v />
    <v />
    <v />
  </basetrackgroup>
</canvas>