用flash与asp.net制作涂鸦留言本

用flash与asp.net制作涂鸦留言本

　　用过csdn博客的人应该知道csdn里有个画图的功能，可以在线直接画图，然后插入到博客的文章里。类似功能的还有大名鼎鼎的猫扑，你可以在猫扑的猫爪涂写里画图，然后直接在网页上发布。这就是本文要说的网络涂鸦功能。网络涂鸦简单来说就是在客户端由用户自由绘制图形，然后把提交的数据交由服务器端发布。

　　通常的客户端是用flash来实现，服务器端通常用asp.net来实现（我试过用asp来实现，但图形处理功能太差，更主要的是速度很慢，几乎无法接受），从客户端提交信息主要有两种：

　　一是当作图形来提交，也可以说是当矢量格式来提交，比如说在客户端从点(12,25)到点(12,200)画了一条宽为2的线，可以向服务器提交 "12 25 12 200 2"，然后在服务器端再进行重绘，然后生成一个图像文件并保存，这种方法的优点是当客户端信息比较少时，上传的速度比较快，如果只是少数传固定的图形的话这样绘图快很多，缺点是服务器端处理的息信比较多，负担比较重。

　　二是当作一个图像来提交，就是说在客户端直接生成图像，然后传回到服务器端。这种做法在好处是服务器端处理的信息比较少，缺点是传输的信息量比较大。

　　我做的这个网络涂鸦板不包含图形，是由留言者自由涂画的，所以采用第二种方法来做。

　　以下是大致的过程。

　　第一步，建立一个ByteArray数组，用来保存画的图像的数据，由于这里只用到216色，一个像素只用一个byte数据保存，所以大小与要画的图一样即可，如果希望颜色多点，可以改变这里的大小，或者建立一个二维数组，代码如下：

　　var picWidth:int=500;//绘图区宽度
　　var picHeight:int=300;//绘图区高
　　var bitmap:ByteArray=new ByteArray();//记录当前绘图
　　for(i=0;i<picHeight*picWidth;i++)
 　　　　bitmap.[i]=255;

　　第二步，画图像。画图像的思路是：鼠标移动时，用Object.graphics.moveTo(from.x,from.y)和Object.graphics.lineTo(to.x,to.y)在客户端界面画出图像，然后把ByteArray数组里对应的值设为当前颜色值（详见第三步），如果要想改变画笔大小，则可以把鼠标当前点坐标周围的点也绘一次。

function DrawLine(toDrawMovie:MovieClip,from:Point ,to:Point)
{
 toDrawMovie.graphics.lineStyle(penPix*2+1,colorsArray[penColor],1,true);
 toDrawMovie.graphics.moveTo(from.x,from.y);
 toDrawMovie.graphics.lineTo(to.x,to.y);
 setLineBitmap(from,to,penColor,penPix);
}

　　第三步，把图像画入这个ByteArray里，要注意的是在图像文件(标准bmp格式文件)里的Y轴跟flash里的Y轴是反的(所以picHeight-y1-1)

//画入像素
function setPixBitmap(xx:int,yy:int,pix:int,color:int)
{
 　　var k,x1,y1;
 　　for(k=0;k<pixs[pix].length/2;k++)
 　　{
 　　　　 x1=pixs[pix][k*2]+xx;
  　　　　y1=pixs[pix][k*2+1]+yy;
 　　　　 if(x1>=0 &&y1>=0 &&x1<picWidth && y1<picHeight)
 　　　　  bitmap[(picHeight-y1-1)*picHeight+x1]=color;
　　 }
}

　　第四步，把画好后的ByteArray里的数据传送到服务器端。数据传数很简单，用URLRequest对像即可以，要注意method要用post。（另外本人一直觉得这种方法好像有些不妥，但又说不出是哪里有问题，望高手指点下）

function buttonSaveClickHandler(event:MouseEvent):void
{
 var sender:URLRequest = new URLRequest(toSaveUrl);
    sender.data = bitmap;
 sender.method="post";
    navigateToURL(sender,"_blank");
}

　　第五步，服务器端的处理。至此，客户端的工作完成了，剩下的是服务器端的工作了。服务器端里用asp也可实现，但处理一幅图片就可能使服务器卡个半天，所以还是用asp.net来做好。原因很简单，因为asp.net是编译的。

　　传送到服务器端后，需要把数还原，因为在flash里是保存在一维数组里的，所以首先要还原为二维数组，代码大致如下：

        （因为一时找不到以前的代码了，这是我在写这个博客时打的，所以可能会有错，以下的代码都是）

 　　byte[] requestByte = new byte[requestByteLen];
 　　requestByte = Request.BinaryRead(requestByteLen);

然后还要把一个Byte的数据还原为3个Byte的数据(24位颜色)，再把这个数组放进一个Stream里面，接着通过这个Stream生成一个Bitmap对像，最后通过Bitmap.Save()就可以保存图像了。

代码大致如下：

        MemoryStream ms = new MemoryStream(buf);
        Bitmap bmp = new Bitmap(ms);
        bmp.Save();

bmp.Save()有几个重载，可以选择保存为硬盘上的文件，也可以选择保存在一个Byte[]里，然后通过Response.BinaryWrite(Byte[ ])就可以直接在网页上显示了。

 　　另外保存到服务器里还有一种不用Bitmap的方法，这个方法在asp里面也可以用，就是把BMP文件的头信息和3个Byte表示一个像素的数据写进Byte[ ]，然后直接Response.BinaryWrite(Byte[ ])就可以在网页上显示这个图像了（要在硬盘保存可用FileStream），这样的麻烦是BMP格式文件很大，300×500就有1M多，在网上传输的话估计会疯掉。

以下是源代码，只有flash客户端的，服务器端的文件找不到源代码，只有已编译好的文件（不久前换了电脑，把里面的文件整理了一下，结果删了很多文件，估计那些代码也删掉了，如果有人需要的话再重新做一份算了）。

 

网络涂鸦留言本下载