ホワイトボード

自由線を描けるホワイトボードです。

本家フォーラムhttp://forum.openlaszlo.org/showthread.php?t=12994からの拾いものです。swf8/swf10/dhtmlで動きました。

(OpenLaszlo4.7.2/swf10)

<canvas proxied="false" bgcolor="0xaaaaaa" width="500" height="400">
  <drawview width="450" height="350" bgcolor="white" clickable="true" align="center" valign="middle" clip="true">
    <attribute name="mx" type="number" value="$always{ this.getMouse('x')}" />
    <attribute name="my" type="number" value="$always{ this.getMouse('y')}" />
    <attribute name="prevx" type="number" value="0" />
    <attribute name="prevy" type="number" value="0" />
    <attribute name="mouseisdown" type="boolean" value="false" />
    <handler name="onmousedown">
      this.prevx = this.mx; 
      this.prevy = this.my;
      this.setAttribute( 'mouseisdown', true );
    </handler>
    <handler name="onmouseup">
      this.setAttribute( 'mouseisdown', false );
    </handler>
    <handler name="onmousemove" reference="canvas">
      if ( this['mouseisdown'] ) {
        this.drawline( this['prevx'], this['prevy'], this['mx'], this['my'] );
        this.prevx = this['mx']; 
        this.prevy = this['my'];
      }
    </handler>
    <method name="drawline" args="x1, y1, x2, y2">
      this.beginPath();
      this.moveTo( x1, y1 );
      this.lineTo( x2, y2 );
      this.stroke();
    </method>
  </drawview>
</canvas>