手書き入力を行いたい

手書き操作

１

手書き入力を行いたい

１

手書き入力は、CanvasViewクラスを利用します。
CanvasViewクラスを利用するとマウスドラッグ、スワイプ操作で簡単に線を
描画する事ができます。

描画する線の色や太さはSetStrokeメソッドで設定します。線の幅はピクセル単位で0以上の値を指定します。線の色は色定数またはカラーコード形式を指定します。

直前の描画操作を取り消すにはUndoメソッド、取り消された操作をやり直すにはRedoメソッドを使用します。取り消す(やり直す)内容がない場合、何も行われません。
また、描画内容およびUndo・Redoバッファの消去にはEraseメソッドを使用します。

[実行イメージ]

[ サンプルコード ]

Form Form1 {
    Width = 486;
    Height = 485;
    
    /* 設定値 */
    Number lineWeight;
    Number lineColor;
    
    CanvasView CanvasView1 {
        X = 13;
        Y = 135;
        Width = 454;
        Height = 276;
    }
    
    Button Button1 {
        X = 14;
        Y = 424;
        Width = 128;
        Height = 24;
        title = "操作取消（Undo）";
        Function OnTouch(e) {
            /* 直前の操作を取り消す */
            var ret = ^.CanvasView1.Undo();
        }
    }
    
    Button Button2 {
        X = 145;
        Y = 424;
        Width = 156;
        Height = 24;
        title = "操作やり直し（Redo）";
        Function OnTouch(e) {
            /* 取り消した操作をやり直す */
            var ret = ^.CanvasView1.Redo();
        }
    }
    
    Button Button3 {
        X = 304;
        Y = 424;
        Width = 120;
        Height = 24;
        title = "全消去（Erase）";
        Function OnTouch(e) {
            ^.CanvasView1.Erase();
        }
    }
    
    Label Label1 {
        X = 15;
        Y = 18;
        Width = 144;
        Height = 20;
        Value = "線の太さ";
        VerticalAlign = $CENTER;
        HorizontalAlign = $LEFT;
        FontFace = $BOLD;
    }
    
    OptionButton OptionButton1 {
        X = 16;
        Y = 38;
        Width = 410;
        Height = 29;
        Border = $TRUE;
        OptionItem OptionItem1[6] {
            Height = 21;
            Layout = $HORIZONTAL;
            Width = 50;
        }
        OptionItem1[0].Title = "1.0";
        OptionItem1[1].Title = "2.0";
        OptionItem1[2].Title = "3.0";
        OptionItem1[3].Title = "4.0";
        OptionItem1[4].Title = "5.0";
        OptionItem1[5].Title = "6.0";
        Value = 0;
        
        /* 選択内容を変更したら設定を変える */
        Function OnTouch(e){
            /* 線の太さ */
            switch(e.from.index){
                case 0:
                    ^.lineWeight = ^.OptionButton1.OptionItem1[0].Title;
                    break;
                case 1:
                    ^.lineWeight  = ^.OptionButton1.OptionItem1[1].Title;
                    break;
                case 2:
                    ^.lineWeight  = ^.OptionButton1.OptionItem1[2].Title;
                    break;
                case 3:
                    ^.lineWeight  = ^.OptionButton1.OptionItem1[3].Title;
                    break;
                case 4:
                    ^.lineWeight  = ^.OptionButton1.OptionItem1[4].Title;
                    break;
                case 5:
                    ^.lineWeight  = ^.OptionButton1.OptionItem1[5].Title;
                    break;
            }
            /* 描画線の設定 */
            ^.setLine();
        }
    }
    
    Label Label2 {
        X = 15;
        Y = 68;
        Width = 144;
        Height = 20;
        Value = "線の色";
        VerticalAlign = $CENTER;
        HorizontalAlign = $LEFT;
        FontFace = $BOLD;
    }
    
    OptionButton OptionButton2 {
        X = 16;
        Y = 88;
        Width = 410;
        Height = 29;
        Border = $TRUE;
        OptionItem OptionItem2[6] {
            Height = 21;
            Layout = $HORIZONTAL;
            Width = 50;
        }
        OptionItem2[0].Title = "赤";
        OptionItem2[1].Title = "青";
        OptionItem2[2].Title = "黄色";
        OptionItem2[3].Title = "緑";
        OptionItem2[4].Title = "紫";
        OptionItem2[5].Title = "黒";
        Value = 5;
        
        /* 選択内容を変更したら設定を変える */
        Function OnTouch(e){
            /* 線の色 */
            switch(e.from.index){
                case 0:
                    ^.lineColor = 6;
                    break;
                case 1:
                    ^.lineColor  = 14;
                    break;
                case 2:
                    ^.lineColor = 8;
                    break;
                case 3:
                    ^.lineColor = 10;
                    break;
                case 4:
                    ^.lineColor  = 15;
                    break;
                case 5:
                    ^.lineColor  = 1;
                    break;
            }
            /* 描画線の設定 */
            ^.setLine();
        }
    }
    
    function setLine(){
        /* 描画線の設定 */
        CanvasView1.SetStroke(lineWeight, lineColor);
    }
}

管理番号：CvsSd_001


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser HT・Biz/Browser SmartDevice・Biz/Browser AI TIPS集トップへ