1

私は実際にドラッグ時に蛍光ペンを作成しようとしていますが、サイズ変更状態と 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>
4

0 に答える 0