as3paintoco出来たかも

今年の3月くらいからまったりと開発して来ました、お絵描きライブラリ。

とりあえず、それなりに動くようなりました。 そこで、こっそりとGoogle Codeにて公開してみました。

その名も、as3paintoco(ぺいんとこ)と言います。

機能

主に、以下のような機能を持っています。

  • undo, redo機能
  • replay機能
  • お絵描きした画像の保存機能

使い方

as3paintoco(ぺいんとこ)はFlash Player10.0.32以降に対応しております。ただし、開発中ステータスのため予期しない動作をするかも知れません。その点ご了承下さい。

ライブラリの準備

  1. このライブラリは、as3corelibを使用しているので、as3corelib.swcをライブラリパスに通します。
  2. as3paintoco_alpha4.swcをダウンロードして、ライブラリパスに通します。

サンプルコード

コンテキストメニューからツールを選んで、キャンバスにお絵描きするサンプルです。 [swfobj src="http://asmple.com/as3paintoco/as3paintoco_work2.swf?v=1" width="465" height="465"]

package
{
    import flash.display.Sprite;
    import flash.events.ContextMenuEvent;
    import flash.ui.ContextMenu;
    import flash.ui.ContextMenuItem;
    import jp.wxd.as3paintoco.AS3Paintoco;
    import jp.wxd.as3paintoco.tools.CircleTool;
    import jp.wxd.as3paintoco.tools.ITool;
    import jp.wxd.as3paintoco.tools.LineTool;
    import jp.wxd.as3paintoco.tools.PenTool;
    import jp.wxd.as3paintoco.tools.SelectTool;
    import jp.wxd.as3paintoco.tools.SquareTool;
    import jp.wxd.as3paintoco.tools.TextTool;

    /**
     * as3Paintoco sampleコード2
     * @author Copyright (C) naoto koshikawa, All Rights Reserved.
     */
    public class PaintocoWork2 extends Sprite
    {
        //----------------------------------------------------------------------
        //  properties
        //----------------------------------------------------------------------
        //------------------------------
        //  private properties
        //------------------------------
        /**
         * AS3Paintoco instance
         */
        private var _paint:AS3Paintoco;

        /**
         * tools
         */
        private var _tools:Object;

        //----------------------------------------------------------------------
        //  methods
        //----------------------------------------------------------------------
        //------------------------------
        //  public methods
        //------------------------------
        /**
         * constructor
         */
        public function PaintocoWork2()
        {
            _tools = {
                penTool: new PenTool(),
                lineTool: new LineTool(),
                squareTool: new SquareTool(),
                circleTool: new CircleTool(),
                textTool: new TextTool(),
                selectTool: new SelectTool()
            };

            _tools.textTool.options = {
                size:24
            };

            // AS3Paintocoのインスタンスを生成します。
            _paint = new AS3Paintoco(this, 465, 465);
            _paint.replayable = true;
            initialize();
            createMenu();
        }

        /**
         * initialize
         */
        private function initialize():void
        {
           _paint.initialize();
           // 初期ツールを設定します。
            _paint.applyTool(_tools.penTool);

            // キャンバスをアクティブにしお絵描き可能にします。
            _paint.activate();
        }

        /**
         * create context menu
         */
        private function createMenu():void
        {
            var contextMenu:ContextMenu = new ContextMenu();
            contextMenu.hideBuiltInItems();

            var penMenu:ContextMenuItem = new ContextMenuItem("penTool", true);
            var lineMenu:ContextMenuItem = new ContextMenuItem("lineTool");
            var squareMenu:ContextMenuItem = new ContextMenuItem("squareTool");
            var circleMenu:ContextMenuItem = new ContextMenuItem("circleTool");
            var textMenu:ContextMenuItem = new ContextMenuItem("textTool");
            var selectMenu:ContextMenuItem = new ContextMenuItem("selectTool");

            penMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexToolMenu_menuSelect);
            lineMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexToolMenu_menuSelect);
            squareMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexToolMenu_menuSelect);
            circleMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexToolMenu_menuSelect);
            textMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexToolMenu_menuSelect);
            selectMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexToolMenu_menuSelect);

            var clearMenu:ContextMenuItem = new ContextMenuItem("clearAction");
            var undoMenu:ContextMenuItem = new ContextMenuItem("undoAction");
            var redoMenu:ContextMenuItem = new ContextMenuItem("redoAction");
            var replayMenu:ContextMenuItem = new ContextMenuItem("replayAction", true);
            var saveMenu:ContextMenuItem = new ContextMenuItem("saveAction", true);

            clearMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexActionMenu_menuSelect);
            undoMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexActionMenu_menuSelect);
            redoMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexActionMenu_menuSelect);
            replayMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexActionMenu_menuSelect);
            saveMenu.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,
                contexActionMenu_menuSelect);

            contextMenu.customItems.push(clearMenu);
            contextMenu.customItems.push(undoMenu);
            contextMenu.customItems.push(redoMenu);
            contextMenu.customItems.push(replayMenu);
            contextMenu.customItems.push(penMenu);
            contextMenu.customItems.push(lineMenu);
            contextMenu.customItems.push(squareMenu);
            contextMenu.customItems.push(circleMenu);
            contextMenu.customItems.push(textMenu);
            contextMenu.customItems.push(selectMenu);
            contextMenu.customItems.push(saveMenu);

            this.contextMenu = contextMenu;
        }

        //----------------------------------------------------------------------
        //  event listener
        //----------------------------------------------------------------------
        /**
         * ContextMenuEvent.MENU_SELECT
         * @param    event
         */
        private function contexToolMenu_menuSelect(event:ContextMenuEvent):void
        {
            var toolKey:String = ContextMenuItem(event.target).caption;
            // 選択されたツールを適用します。
            _paint.applyTool(_tools[toolKey]);
        }

        /**
         * ContextMenuEvent.MENU_SELECT
         * @param    event
         */
        private function contexActionMenu_menuSelect(event:ContextMenuEvent):void
        {
            var toolKey:String = ContextMenuItem(event.target).caption;
            switch (toolKey)
            {
                case "clearAction":
                    // 初期化します。
                    initialize();
                    break;
                case "undoAction":
                    // ワンストロークを取り消します。
                    _paint.undo();
                    break;
                case "redoAction":
                    // ワンストロークをやり直します。
                    _paint.redo();
                    break;
                case "replayAction":
                    // 最初からお絵描きを再生します。
                    _paint.replay(5.0);
                    break;
                case "saveAction":
                    // お絵描きしたキャンバスをローカルファイルに保存します。
                    _paint.save("paint.png");
                    break;
            }
        }
    }
}

その他のサンプル

as3paintoco(ぺいんとこ)を使って作成したお絵描きツールです。 現状は、UIを作成する手間がかかるので、今後、簡単に各種ツールボタンやオプション設定用のUIやスキンを作成することもぼんやりと考えております。

[swfobj src="http://asmple.com/as3paintoco/sample_simple1.swf?v=3" width="600" height="500"]

まとめ

というわけで、今回は簡単な紹介でした。今後も、お絵描きライブラリのas3paintoco(ぺいんとこ)は開発を進めながら追加機能などを紹介していきます。