私は実際にドラッグ時に蛍光ペンを作成しようとしていますが、サイズ変更状態と drawview クラスを使用してこれを実現できました。ただし、ビューがスケーリングされている場合、これは機能しません。
マウスをドラッグしようとすると、動作することがあり、選択した領域が縮小または拡大することがあります。サンプルコードを添付しました
<canvas width="1024" height="768" debug="true">
<class name="boxdraw">
<handler name="onmousedown"><![CDATA[
Debug.write("onmousedown");
this.boxview.setAttribute ('x', this.getMouse ('x'));
this.boxview.setAttribute ('y', this.getMouse ('y'));
this.boxview.setAttribute ('width', 0);
this.boxview.setAttribute ('height', 0);
this.boxview.setAttribute ('visible', true);
this.boxview.resizer.apply ();
]]></handler>
<handler name="onmouseup"><![CDATA[
Debug.write("onmouseip");
this.boxview.setAttribute ('visible', false);
this.boxview.resizer.remove ();
]]></handler>
<handler name="oninit" >
this.setAttribute ('clickable', true);
</handler>
<drawview name="boxview" visible="false">
<attribute name="isready" value="false" type="boolean" />
<handler name="oncontext">
this.setAttribute("isready", true);
this.strokeStyle = 0x999999;
this.lineWidth = 2;
</handler>
<handler name="oninit">
this.strokeStyle = 0x999999;
this.lineWidth = 2;
</handler>
<resizestate name="resizer">
<attribute name="minheight" value="${-this.y + 1}"/>
<attribute name="minwidth" value="${-this.x + 1}"/>
<attribute name="maxheight" value="${classroot.height - this.y - 1}"/>
<attribute name="maxwidth" value="${classroot.width - this.x - 1}"/>
<attribute name="xroffset" value="${this.x - this.width + this.getMouse( 'x' )}" />
<attribute name="yroffset" value="${this.y - this.height + this.getMouse( 'y' )}" />
<attribute name="width"
value="${(this.immediateparent.getMouse ( 'x' ) - this.xroffset) > this.maxwidth ?
this.maxwidth :
Math.max((this.immediateparent.getMouse( 'x' )- this.xroffset), this.minwidth)}" />
<attribute name="height"
value="${(this.immediateparent.getMouse ( 'y' ) - this.yroffset) > this.maxheight ?
this.maxheight :
Math.max((this.immediateparent.getMouse( 'y' )- this.yroffset), this.minheight)}" />
<handler name="onwidth">
this._draw ();
</handler>
<handler name="onheight">
this._draw ();
</handler>
<method name="_draw"><![CDATA[
Debug.write("__draw", this.minheight, this.maxheight,this.minwidth,this.maxwidth);
Debug.write("this.xroffset,this.yroffset", this.xroffset,this.yroffset);
Debug.write("this.immediateparent.getMouse ( 'x' )",this.immediateparent.getMouse ( 'x' ),this.immediateparent.getMouse ( 'y' ));
this.clear ();
this.beginPath();
this.lineTo (this.width, 0);
this.lineTo (this.width, this.height);
this.lineTo (0, this.height);
this.lineTo (0, 0);
this.closePath();
this.stroke ();
]]></method>
</resizestate>
</drawview>
</class>
<view name="sample" width="1024" height="600" bgcolor="green" xscale="1.63" yscale="1.53">
<boxdraw name="resizebox"
width="100%" height="100%"
options="ignorelayout"
visible="true"/>
</view>
</canvas>