AS3练习，涂丫板。简单得不能再简单

flash023 · 发表于 2008-4-12 22:13:02

只有一个文档类

package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.controls.Button;
import fl.controls.ComboBox;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
import fl.events.ListEvent;
public class SampleTuya extends Sprite {
private var __color_cp:ColorPicker;
private var __line_cb:ComboBox;
private var __prev_btn:Button;
private var __clear_btn:Button;
private var hit_sprite:Sprite;
private var draw_array:Array;
private var now_sprite:Sprite;
private var l:uint;
private var color:uint;
public function SampleTuya():void {
__color_cp=getChildByName("color_cp") as ColorPicker;
__line_cb=getChildByName("line_cb") as ComboBox;
__prev_btn=getChildByName("prev_btn") as Button;
__clear_btn=getChildByName("clear_btn") as Button;
hit_sprite=new Sprite;
draw_array=new Array;
l=2;
color=0x0000;
init();
}
private function init():void {
addItemHandler();
drawHitSprite();
__color_cp.addEventListener(ColorPickerEvent.CHANGE ,onColorChange);
__line_cb.addEventListener(Event.CHANGE ,onLineChange);
__prev_btn.addEventListener(MouseEvent.CLICK ,onBtnClick);
__clear_btn.addEventListener(MouseEvent.CLICK ,onBtnClick);
hit_sprite.addEventListener(MouseEvent.MOUSE_DOWN ,onmouseDown);
}
private function onmouseDown(_evt:MouseEvent):void {
var _sprite:Sprite =_evt.currentTarget as Sprite;
_sprite.addEventListener(MouseEvent.MOUSE_MOVE,onmouseMove);
_sprite.addEventListener(MouseEvent.MOUSE_UP ,onmouseUp);
now_sprite=new Sprite;
now_sprite.graphics.lineStyle(l,color);
now_sprite.graphics.moveTo(hit_sprite.mouseX,hit_sprite.mouseY);
hit_sprite.addChild(now_sprite);
draw_array.push(now_sprite);
}
private function onmouseMove(_evt:MouseEvent):void {
var _sprite:Sprite =_evt.currentTarget as Sprite;
now_sprite.graphics.lineTo(hit_sprite.mouseX,hit_sprite.mouseY);
}
private function onmouseUp(_evt:MouseEvent):void {
var _sprite:Sprite =_evt.currentTarget as Sprite;
_sprite.removeEventListener(MouseEvent.MOUSE_MOVE,onmouseMove);
_sprite.removeEventListener(MouseEvent.MOUSE_UP ,onmouseUp);
}
private function drawHitSprite():void {
hit_sprite.graphics.beginFill(0x0000ff,.2);
hit_sprite.graphics.drawRect(0,0,stage.stageWidth*.96,stage.stageHeight*.8);
hit_sprite.x=10;
hit_sprite.y=60;
addChild(hit_sprite);
}
private function addItemHandler():void {
for (var p:uint =1; p<=20; p+=2) {
__line_cb.addItem({label:p,value:p});
}
}
private function onColorChange(_evt:ColorPickerEvent):void {
var _cp:ColorPicker =_evt.target as ColorPicker;
color=uint("0x"+_cp.hexValue);
}
private function onLineChange(_evt:Event):void {
var _cb:ComboBox =_evt.target as ComboBox;
l=_cb.selectedItem.value;
}
private function onBtnClick(_evt:MouseEvent):void {
var _btn:Button=_evt.target as Button;
_btn==__prev_btn?prev_func():(_btn==__clear_btn?clear_func():null);
}
private function prev_func():void {
hit_sprite.removeChild(draw_array.pop());
}
private function clear_func():void {
var len:uint =draw_array.length
for (var p:uint =0; p<len; p++) {
hit_sprite.removeChild(draw_array.pop());
}
}
}
}

复制代码

longfengabc · 发表于 2008-4-12 22:40:18

我偶像推崇的 FLEX涂鸦板
http://www.splashup.com/splashup/

miki828 · 发表于 2008-12-15 11:14:43

呵，这个涂鸦版本很好呀，就是没有保存功能，不实用

ibio · 发表于 2008-12-17 14:54:41

我这里也做了一个和LZ一样的简单涂鸦板，功能和LZ的一样，只不过加入了用命令模式实现的redo、undo和输出图片功能。
这里我贴几个核心类。

1 命令类--画线

package command{
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.geom.Point;
public class DrawLineCommand implements ICommand {
protected var m_canvas:Sprite;
protected var m_layer:Sprite;
protected var m_start:Point;
protected var m_dotList:Array;
protected var m_thickness:Number;
protected var m_color:uint;
protected var m_alpha:Number;
public function DrawLineCommand(canvas:Sprite, thickness:Number = 1, color:uint = 0x000000, aplha:Number = 1) {
m_canvas = canvas;
m_dotList = new Array();
m_thickness = thickness;
m_color = color;
m_alpha = aplha;
}
public function execute():void {
m_layer = new Sprite();
m_canvas.addChild(m_layer);
m_layer.graphics.lineStyle(m_thickness, m_color, m_alpha);
//
if (m_dotList.length == 0) {
m_layer.graphics.moveTo(m_canvas.mouseX, m_canvas.mouseY);
m_start = new Point(m_canvas.mouseX, m_canvas.mouseY);
m_dotList = new Array();
m_canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove_handler);
m_canvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp_handler);
m_canvas.addEventListener(MouseEvent.ROLL_OUT, onMouseUp_handler);
}else {
//重现
m_layer.graphics.moveTo(m_start.x, m_start.y);
for (var i:uint = 0; i < m_dotList.length; i++) {
var p:Point = m_dotList[i];
m_layer.graphics.lineTo(p.x, p.y);
}
}
}
public function undo():void {
m_canvas.removeChild(m_layer);
}
protected function onMouseMove_handler(e:MouseEvent):void {
m_layer.graphics.lineTo(m_canvas.mouseX, m_canvas.mouseY);
var p:Point = new Point(m_canvas.mouseX, m_canvas.mouseY);
m_dotList.push(p);
}
protected function onMouseUp_handler(e:MouseEvent):void {
m_canvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove_handler);
m_canvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp_handler);
m_canvas.removeEventListener(MouseEvent.ROLL_OUT, onMouseUp_handler);
}
}
}

复制代码

2 工具类--输出图片

package com.ibio.images {
import com.adobe.images.JPGEncoder;
import com.adobe.images.PNGEncoder;
import flash.display.DisplayObject;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.net.URLRequest;
import flash.net.URLRequestHeader;
import flash.net.URLRequestMethod;
import flash.net.navigateToURL;
import flash.geom.Matrix;
import flash.utils.ByteArray;
public class PrintImage {
protected var m_photo:DisplayObject;
protected var m_angle:Number = 0;
protected var m_encodeMode:uint = 0;
protected var m_quality:uint = 80;
public function PrintImage(source:DisplayObject = null, url:String = null) {
if (source != null) {
m_photo = source;
}
if (url != null) {
printToURL(url);
}
}
/**
* 设置源
* value 要输出的源
*/
public function set source(value:DisplayObject):void {
m_photo = value;
}
/**
* 设置角度
* angle 角度
*/
public function set rotation(angle:Number):void {
m_angle = angle;
}
/**
* 设置图像编码模式和JPG编码质量
* @param mode 0为JPG，1为PNG
* @param quality = 80
*/
public function setEncodeMode(mode:uint, quality = 80) {
m_encodeMode = mode;
m_quality = quality;
}
public function printToURL(url:String):void {
var bitmapData:BitmapData = convert(m_photo, m_angle);
var imgStream:ByteArray = encodeImg(bitmapData, m_encodeMode, m_quality);
postData(url, imgStream);
}
public function postData(url:String, imgStream:ByteArray):void {
var jpgURLRequest:URLRequest = new URLRequest(url);
var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = imgStream;
navigateToURL(jpgURLRequest, "_self");
}
public function toString():String {
var bitmapData:BitmapData = convert(m_photo, m_angle);
var imgStream:ByteArray = encodeImg(bitmapData, m_encodeMode, m_quality);
return imgStream.toString();
}
public function encodeImg(bitmapData:BitmapData, mode:uint = 0, quality = 50):ByteArray {
var imgStream:ByteArray;
if (mode == 0) {
var jpgEncoder:JPGEncoder = new JPGEncoder(quality);
imgStream = jpgEncoder.encode(bitmapData);
}else if (mode == 1) {
imgStream = PNGEncoder.encode(bitmapData);
}
return imgStream;
}
public function convert(image:DisplayObject, angle:Number = 0):BitmapData {
var rotateMode:uint = 0;
//目前仅支持4个方向
if (Math.abs((angle + 360) % 360) == 0) {
rotateMode = 0;
}else if (Math.abs((angle + 360) % 360) == 90) {
rotateMode = 1;
}else if (Math.abs((angle + 360) % 360) == 180) {
rotateMode = 2;
}else if (Math.abs((angle + 360) % 360) == 270) {
rotateMode = 3;
}
//
var tx:Number = 0;
var ty:Number = 0;
//位移转换
if (rotateMode == 0) {
tx = 0;
ty = 0;
}else if (rotateMode == 1) {
tx = image.height;
ty = 0;
}else if (rotateMode == 2) {
tx = image.width;
ty = image.height;
}else if (rotateMode == 3) {
tx = 0;
ty = image.width;
}
var myMatrix:Matrix = new Matrix();
//转换为弧度
var radians:Number = (angle/180) * Math.PI;
myMatrix.createBox(1, 1, radians, tx, ty);
//大小转换
var w:Number = 0;
var h:Number = 0;
if ((rotateMode == 0) || (rotateMode == 2)) {
w = image.width;
h = image.height;
}else if ((rotateMode == 1) || (rotateMode == 3)) {
w = image.height;
h = image.width;
}
var bitmapData:BitmapData = new BitmapData(w, h);
bitmapData.draw(image, myMatrix, null, null, null, true);
return bitmapData;
}
}
}

复制代码

3 服务器端程序
这里我选择的是用PHP来实现输出图片

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])){
// get bytearray
$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];
// add headers for download dialog-box
header("Content-Type: image/jpeg");
header("Content-Disposition: attachment; filename=".$_GET['name']);
echo $jpg;
}else{
echo "没有任何图片";
}

复制代码

好了，就这么多，简单吧。如果需要完整文件测试的，见附件。
注：测试此程序需要有webService的支持。

foxion · 发表于 2008-12-17 15:26:45

还行吧~！~
加了些组件，不过有些简单，基本上画不出啥东东来。嘎嘎

haoxue · 发表于 2008-12-22 21:59:58

ibio大哥，我下载并拜读了你的涂鸦板大作，别的地方都明白，只是对你那个ICommand接口在这个作品中的作用不明白，我觉得没有那个接口也应该是可以的，能说一下它的作用吗？

cyywill · 发表于 2008-12-22 23:25:05

收藏4楼的

haoxue · 发表于 2008-12-23 21:17:38

?????

kenchef · 发表于 2009-11-15 16:15:36

提醒:最后回贴距现在 327 天，请不要无意义回复

原帖由 [i]haoxue 于 2008-12-22 21:59 发表
ibio大哥，我下载并拜读了你的涂鸦板大作，别的地方都明白，只是对你那个ICommand接口在这个作品中的作用不明白，我觉得没有那个接口也应该是可以的，能说一下它的作用吗？

作用就是用来扩展
其它的命令也会从icommand实现
在不定是什么命令的方法里可以用icommand泛化

帐号		自动登录	找回密码
密码			注册

[AS3] AS3练习，涂丫板。简单得不能再简单

本帖子中包含更多资源

本帖子中包含更多资源

：）

LZ的代码确实十分简洁

本帖子中包含更多资源

浏览过的版块