今年の３月くらいからまったりと開発して来ました、お絵描きライブラリ。
とりあえず、それなりに動くようなりました。 そこで、こっそりとGoogle Codeにて公開してみました。
その名も、as3paintoco(ぺいんとこ)と言います。
機能
主に、以下のような機能を持っています。
- undo, redo機能
- replay機能
- お絵描きした画像の保存機能
使い方
as3paintoco(ぺいんとこ)はFlash Player10.0.32以降に対応しております。ただし、開発中ステータスのため予期しない動作をするかも知れません。その点ご了承下さい。
ライブラリの準備
- このライブラリは、as3corelibを使用しているので、as3corelib.swcをライブラリパスに通します。
- 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(ぺいんとこ)は開発を進めながら追加機能などを紹介していきます。
