Flash使用bitmapData打造随机凹凸拼图效果

随机

  下午没事做,就弄了个随机切拼图效果,还没做判断,只是个切法的计算,稍后整理下就应该是个成品,嘿嘿~原理主要就是用bitmap进行切图,以前都是用遮照做太占资源.效果如下:

主要代码:puzzle.as

/*
* Puzzle CLASS

* @ CREATED BY: ycccc8202
* @ PURPOSE: 方便制作拼图游戏
* @ DATE:2007.6.10
* Usage example:
* var url:String = "/UploadPic/2007-7/200778135631511.jpg";
* var puzzleuzzle = new Puzzle(this, url);
* 设置摆放位置
* puzzle.setPosition(30, 20);
* 设置行/列
* puzzle.setRowAndLine(30, 10);
*/
import com.ycccc.PuzzleGame.MovieClipDrag;
import mx.events.EventDispatcher;
import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.filters.BevelFilter;
class com.ycccc.PuzzleGame.Puzzle {
/**
* Private members
*/
//////////加载图片长宽///////////
private var _imageW:Number;
private var _imageH:Number;
//////////设置最大宽高///////////
private var _imageMaxW:Number = 800;
private var _imageMaxH:Number = 500;
////////////////////////////////
private var dispatchEvent:Function;
public var addEventListener:Function;
public var removeEventListener:Function;
////////////////////////////////
private var _oldURL:String;
private var _newURL:String;
private var _x:Number;
private var _y:Number;
private var _row:Number;
private var _line:Number;
private var _path:MovieClip;
private var _imageM:MovieClip;
private var _pieceBoard:MovieClip;
private var _imageLoader:MovieClipLoader;
private var _imageBitmap:BitmapData;
private var _pieceW:Number;
private var _pieceH:Number;
private var _pieceMinWH:Number;
private var _pieceD:Number;
///////////内切矩形宽高(通过矩形画近似椭圆)///////////
private var _pieceOW:Number;
private var _pieceOH:Number;
///////////////比例系数///////////////
private var _pieceD_k:Number = 10;
private var _pieceO_k:Number = 4;
private var _pieceOWH_k:Number = 3/4;
/////////////////////////////////
/**
* Constructor
*/
public function Puzzle(path:MovieClip, imageLink:String) {
  EventDispatcher.initialize(this);
  _path = path;
  _newURL = imageLink;
  _imageM = _path.createEmptyMovieClip("imageM", _path.getNextHighestDepth());
  _imageLoader = new MovieClipLoader();
  _imageLoader.addListener(this);
  loadImage(_newURL);
}
/**
* Public methods
*/
public function set _url(url:String) {
  loadImage(url);
}
public function get _url():String {
  return _oldURL;
}
public function set row(r:Number) {
  _row = r;
}
public function set line(l:Number) {
  _line = l;
}
public function removeAllPiece() {
  for (var all in _pieceBoard) {
   _pieceBoard[all].removeMovieClip();
  }
}
public function bitmapCut() {
  pieceSet();
  removeAllPiece();
  for (var i:Number = 0; i<_row; i++) {
   for (var j:Number = 0; j<_line; j++) {
    var Piece = _pieceBoard.createEmptyMovieClip("iece"+(_line*i+j), _pieceBoard.getNextHighestDepth());
    Piece.beginBitmapFill(_imageBitmap, new Matrix(1, 0, 0, 1, -j*_pieceW, -i*_pieceH), true, true);
    Piece._x = j*_pieceW;
    Piece._y = i*_pieceH;
    Piece.i = i;
    Piece.j = j;
    new MovieClipDrag(Piece);
    drawPiece(Piece, getAllDotArray(Piece));
    //画小块形状
    Piece.filters = [new BevelFilter(3, 30)];
   }
  }
}
public function setMaxWH(w:Number, h:Number) {
  //设置允许的最大宽高
  _imageMaxW = w;
  _imageMaxH = h;
}
public function setRowAndLine(row:Number, line:Number) {
  //设置切割的 行/列
  if (row<=0 || line<=0) {
   trace("行/列不能为0,按默认10*10进行切图");
   return;
  }
  if (row*line>900) {
   trace("数量太大,运算困难,按默认10*10进行切图");
   return;
  }
  _row = row;
  _line = line;
}
public function setPosition(x:Number, y:Number) {
  //设置
  if (x<0 || y<0) {
   trace("超出场景范围,按默认(0,0)位置进行摆放");
   return;
  }
  _x = x;
  _y = y;
  if (_pieceBoard<>undefined) {
   _pieceBoard._x = _x;
   _pieceBoard._y = _y;
  }
}
public function getPieceBoard():MovieClip {
  //取得碎片载体
  return _pieceBoard;
}
public function toString():String {
  return "uzzle::凹凸形状的拼图切割";
}
/**
* Private methods
*/
private function loadImage(url:String) {
  _newURL = url;
  try {
   _imageLoader.loadClip(_newURL, _imageM);
  } catch (e:Error) {
   trace(e);
  }
}
private function onLoadStart(target:MovieClip) {
  target._visible = false;
  dispatchEvent({type:"onStart", target:this});
}
private function onLoadError(target:MovieClip, errorCode:String) {
  dispatchEvent({type:"onError", target:this});
  trace("errorCode:"+errorCode);
  trace("出错,继续读取上张图片");
  _newURL = _oldURL;
  loadImage(_newURL);
}
private function onLoadInit(target:MovieClip) {
  dispatchEvent({type:"onInit", target:this});
  _oldURL = _newURL;
  if (target._width<10 || target._height<10) {
   throw new Error("图片太小,不适合切割!");
  }
  if (isNaN(_imageMaxW+_imageMaxH)) {
   _imageMaxW = _imageMaxH=600;
  }
  if (isNaN(_row+_line)) {
   _row = 10;
   _line = 10;
  }
  _imageW = target._width>_imageMaxW ? _imageMaxW : target._width;
  _imageH = target._height>_imageMaxH ? _imageMaxH : target._height;
  _pieceBoard.removeMovieClip();
  mcToBitmap(target);
}
private function mcToBitmap(mc:MovieClip) {
  _imageBitmap = new BitmapData(_imageW, _imageH, true, 0x00ffffff);
  _imageBitmap.draw(mc);
  //隐藏掉
  _pieceBoard = _path.createEmptyMovieClip("pieceBoard", _path.getNextHighestDepth());
  _pieceBoard._x = _x;
  _pieceBoard._y = _y;
  bitmapCut();
}
private function pieceSet() {
  _pieceW = _imageW/_line;
  _pieceH = _imageH/_row;
  _pieceMinWH = Math.min(_pieceW, _pieceH);
  _pieceD = _pieceMinWH/_pieceD_k;
  _pieceOW = _pieceMinWH/_pieceO_k;
  _pieceOH = _pieceOW/_pieceOWH_k;
}
private function getRndD():Number {
  //返回与边界错开的高度
  return _pieceD-Math.random()*2*_pieceD;
}
private function drawPiece(mc:MovieClip, dotArr:Array):Void {
  with (mc) {
   lineStyle(0);
   moveTo(0, 0);
   for (var k:Number = 0; k<dotArr.length; k++) {
    if (dotArr[k].x<>undefined) {
     lineTo(dotArr[k].x, dotArr[k].y);
    } else {
     curveTo(dotArr[k][0].x, dotArr[k][0].y, dotArr[k][1].x, dotArr[k][1].y);
    }
   }
   endFill();
  }
}
private function getOvalDotArray(mc:MovieClip, position:String):Array {
  var rnd:Number = random(2) ? 1 : -1;
  var circleDotArr:Array = [];
  switch (position) {
  case "right" :
   var a0oint = new Point(_pieceW+getRndD(), (_pieceH-_pieceOW)/2+_pieceOW/4-Math.random()*_pieceOW/2);
   var a1:Array = [new Point(a0.x+rnd*(_pieceOH/2), a0.y-_pieceOW/2), new Point(a0.x+rnd*_pieceOH, a0.y)];
   var a2:Array = [new Point(a0.x+rnd*(_pieceOH+_pieceOW/3), a0.y+_pieceOW/2), new Point(a0.x+rnd*_pieceOH, a0.y+_pieceOW)];
   var a3:Array = [new Point(a0.x+rnd*_pieceOH/2, a0.y+_pieceOW+_pieceOW/2), new Point(a0.x, a0.y+_pieceOW)];
   circleDotArr = [a0, a1, a2, a3];
   break;
  case "down" :
   var a0oint = new Point(_pieceW-((_pieceW-_pieceOW)/2+_pieceOW/4-Math.random()*_pieceOW/2), _pieceH+getRndD());
   var a1:Array = [new Point(a0.x+_pieceOW/2, a0.y+rnd*(_pieceOH/2)), new Point(a0.x, a0.y+rnd*_pieceOH)];
   var a2:Array = [new Point(a0.x-_pieceOW/2, a0.y+rnd*(_pieceOH+_pieceOW/3)), new Point(a0.x-_pieceOW, a0.y+rnd*_pieceOH)];
   var a3:Array = [new Point(a0.x-_pieceOW-_pieceOW/2, a0.y+rnd*_pieceOH/2), new Point(a0.x-_pieceOW, a0.y)];
   circleDotArr = [a0, a1, a2, a3];
   break;
  }
  return circleDotArr;
}
private function getAllDotArray(mc:MovieClip):Array {
  var allDotArray:Array = [];
  //a,b,c,d四面
  if (mc.i == 0) {
   mc.a = [];
  } else {
   var tempArray:Array = mc._parent["iece"+(Number(mc._name.substr(5))-_line)].c;
   var a:Array = new Array(4);
   a[0] = new Point(tempArray[3][1].x, tempArray[3][1].y-_pieceH);
   a[1] = [new Point(tempArray[3][0].x, tempArray[3][0].y-_pieceH), new Point(tempArray[2][1].x, tempArray[2][1].y-_pieceH)];
   a[2] = [new Point(tempArray[2][0].x, tempArray[2][0].y-_pieceH), new Point(tempArray[1][1].x, tempArray[1][1].y-_pieceH)];
   a[3] = [new Point(tempArray[1][0].x, tempArray[1][0].y-_pieceH), new Point(tempArray[0].x, tempArray[0].y-_pieceH)];
   mc.a = a;
  }
  if (mc.j == 0) {
   mc.d = [];
  } else {
   var tempArray:Array = mc._parent["Piece"+(Number(mc._name.substr(5))-1)].b;
   var a:Array = new Array(4);
   a[0] = new Point(tempArray[3][1].x-_pieceW, tempArray[3][1].y);
   a[1] = [new Point(tempArray[3][0].x-_pieceW, tempArray[3][0].y), new Point(tempArray[2][1].x-_pieceW, tempArray[2][1].y)];
   a[2] = [new Point(tempArray[2][0].x-_pieceW, tempArray[2][0].y), new Point(tempArray[1][1].x-_pieceW, tempArray[1][1].y)];
   a[3] = [new Point(tempArray[1][0].x-_pieceW, tempArray[1][0].y), new Point(tempArray[0].x-_pieceW, tempArray[0].y)];
   mc.d = a;
  }
  if (mc.i == _row-1) {
   mc.c = [];
  } else {
   mc.c = getOvalDotArray(mc, "down");
  }
  if (mc.j == _line-1) {
   mc.b = [];
  } else {
   mc.b = getOvalDotArray(mc, "right");
  }
  allDotArray = allDotArray.concat(mc.a);
  allDotArray.push(new Point(_pieceW, 0));
  allDotArray = allDotArray.concat(mc.b);
  allDotArray.push(new Point(_pieceW, _pieceH));
  allDotArray = allDotArray.concat(mc.c);
  allDotArray.push(new Point(0, _pieceH));
  allDotArray = allDotArray.concat(mc.d);
  return allDotArray;
}
}
//切的方法见图所示,算法中加些随机数值就能产生随机效果了
//主要难点可能只在如何切椭圆,这里通过矩形边界外加上控制点来进行curveTo画曲线,形成个椭圆状
PS:::压缩包中的 Puzzle.exe 支持文本框中填本地图片和网络图片地址 : ),介于安全沙漏问题,只能打包成exe才方便调取网络图片~

  附件下载:Puzzel.rar

时间: 2024-08-31 12:34:15

Flash使用bitmapData打造随机凹凸拼图效果的相关文章

美图秀秀打造欧美风格调拼图效果教程

给各位美图秀秀软件的使用者们来详细的解析分享一下打造欧美风格调拼图效果的教程. 教程分享: 先看看对比效果图:   赶紧找出照片,跟我来学习吧!轻松摆脱传统拼图的困扰哦! 1.在软件下打开待处理的照片,在"美化"菜单下,点击"裁剪"按钮,裁剪出人物的上衣部分,点击"完成裁剪"按钮.   2.在"边框"菜单下点击"简单边框"按钮,选择如图边框并保存图片备用.同理,按照上面的方法依次打开另外两张图片裁剪出人物部

Photoshop打造美丽拼图效果

  Photoshop打造美丽拼图效果            原图如下 完成效果图 1.新建一文件设置如图. 2.选择矩形选框工具,设置如图. 3.创建选区并填充,效果如图.(绿:r:6 g:213 b:6 红:r:250 g:101 b:101) 4.选择画笔工具,直径为20像素,硬度为100%,并在图像中单击,效果如图.

flash 8 BitmapData 类的应用

BitmapData类是什么 Flash.display.bitmapData允许我们使用像素层级来控制位图,这意味着什么呢,好,在下面的简介中我们将简介它能做什么. ·复制和粘贴整个图像,部分图案.或者是每一个独立的像素. ·鉴别或是改变像素或是像素群组的颜色. ·应用新的FLASH滤镜. ·创建随机的像素(noise或perlin noise)等等. 它还可以将bitmapDate应用到视频上. 创建bitmapData 类的实例 我们用如下的方法创建bitmapData实例 bmap=ne

用了BitmapData类的图片“环绕”效果

这种效果做法很多,网上到处可以搜出一大堆!本例主要是应用了BitmapData类,仿制很容易. 做法:处理一张首尾相接的环绕图片,导入Flash库中,打开库,右击图片,选"链接","为ActionScript导出",标识ID名为:pic场景上什么也不放.最好将场景高度设为与图片一样高.宽度随意,但要小于图片宽度.在第一帧粘帖如下代码,即可测试:import flash.display.BitmapData; import flash.geom.*; //从库里取图

用Flash轻松制作照片上的水纹波动效果

本教程利用Flash轻松制作照片上有水纹波动的效果. 创建FLASH文档,然后准备一幅美女照片为背景来用,按CTRL+J调整属性. 图1 然后把图片转换为影片剪辑,起名为photo_mc,然后我们设置影片剪辑的位置.确认影片剪辑选中状态下,我们打开对齐面板,然后设置如下. 图2 然后命名实例名: 图3 然后为第一帧添加如下动作: import flash.filters.DisplacementMapFilter; import flash.display.BitmapData; import

Illustrator简单打造漂亮凹凸感背景制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下简单打造漂亮凹凸感背景的制作教程. 教程分享: 先来看看最终效果图吧:   方法很多,这里我只说一种我的做法: 1.首先绘制以下图形,矩形和三角形,填充上需要的过度颜色.有几个三角形由你自己决定,但是会影响到最终过度的效果.   2.把整个图形复制一个,并且镜像对齐.将右边的矩形颜色适当调深.   3. 两边的图形分开做混合,注意两边要分开做.每边四个物体依次混合一下.做出一块.   4.将做完的一块拖到色板种定义成图案.   5.安

Illustrator简单打造漂亮凹凸感背景效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下简单打造漂亮凹凸感背景效果的教程. 教程分享: 1.首先绘制以下图形,矩形和三角形,填充上需要的过度颜色.有几个三角形由你自己决定,但是会影响到最终过度的效果.   2.把整个图形复制一个,并且镜像对齐.将右边的矩形颜色适当调深.   3. 两边的图形分开做混合,注意两边要分开做.每边四个物体依次混合一下.做出一块.   4.将做完的一块拖到色板种定义成图案.   5.安装CS6以上版本的,直接双击图案,进行图案设置,排列方式选择砖形

as BitmapData类创建杂点效果

创建一个新的 Flash 文档,并将其保存为 noise.fla.     将下面的 ActionScript 添加到时间轴的第 1 帧: import flash.display.BitmapData;  代码如下 复制代码 this.createTextField("status_txt", 90, 0, 0, 100, 20); status_txt.selectable = false; status_txt.background = 0xFFFFFF; status_txt.

教你用javascript实现随机标签云效果_附代码_javascript技巧

标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽管不那么准确.此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容.   大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了.   下面我们大概说一下