AS3位图任意形变一步一步来(3) 切割位图Posted on November 18, 2008 by Fdream对不起，让大家久等了，继续写 blog。今天我们继续研究位图的任意形变，今天的主要目的就是从外部加载一张图片，然后分割成两个三角形。当然了，分割成两个三角形是远远不够的，这一点，我们在后面会讲到。从外部加载一张图片很简单，使用 Loader 类就可以轻松完成了。不过要注意的是这里是 Loader 类，在包 flash.display 下，而不是 flash.net 下的 URLLoader 类。这个类使用很简单，如下（为了简单，这就不写那些条条框框了，直接写在时间轴上了，所有的代码都在第一帧）：1. / 这个是我们要 load 的图片 2. var url:String = green.jpg; 3. 4. /这个是用来保存位图数据的 5. var bmd:BitmapData = null; 6. 7. / load 方法 8. function Load():void 9. var req:URLRequest = new URLRequest(url); 10. var loader:Loader = new Loader(); 11. / 添加事件侦听 12. ConfigureListeners(loader.contentLoaderInfo); 13. try 14. / 加载图片 15. loader.load(req); 16. / 如果你要在舞台上显示出来 17. / 可以添加下面的代码 18. / this.addChild(loader); 19. catch (err:Error) 20. 21. 22. 23. function ConfigureListeners(dispatcher:IEventDispatcher):void 24. dispatcher.addEventListener(Event.COMPLETE, CompleteHandler); 25. 26. 27. / 事件控制函数 28. function CompleteHandler(evt:Event):void 29. var ld:Loader = Loader(evt.target.loader); 30. var info:LoaderInfo = LoaderInfo(ld.contentLoaderInfo); 31. / 保存位图数据 32. bmd = new BitmapData(info.width, info.height); 33. bmd.draw(info.content); 34. 要分割成三角行，我们实现的方式是，先绘制一个三角形，然后用位图来填充，绘制和填充也很简单：1. / bw 是我们最后绘制的三角形的宽 2. / bh 是我们最后绘制的三角形的高 3. / 我这里的图片宽高比是 4:3，为了简单，就这样直接指定了 4. var bw:Number = 280, bh:Number = 210; 5. 6. / 给出三个点，绘制三角形 7. / 并使用位图数据填充 8. function drawTriagle(pa:Object, pb:Object, pc:Object):Shape 9. var r = new Shape(); 10. / 为了清晰可见，你可以给三角形画一个边框 11. / 加上下面一行代码即可 12. / r.graphics.lineStyle(0, 0xccff00); 13. var m:Matrix = new Matrix(); 14. / 由于图片比绘制的三角形的宽高要大 15. / 需要对其进行缩放处理 16. var sx = bw / bm.width; 17. var sy = sx; 18. m.scale(sx, sy); 19. / 使用位图填充三角形 20. r.graphics.beginBitmapFill(bm.bitmapData, m, false, true); 21. r.graphics.moveTo(pa.x, pa.y); 22. r.graphics.lineTo(pb.x, pb.y); 23. r.graphics.lineTo(pc.x, pc.y); 24. r.graphics.lineTo(pa.x, pa.y); 25. r.graphics.endFill(); 26. / 返回当前绘制的三角形 27. return r; 28. 还差一步，就是要把这两步连接起来，我们再来写一个非常简单的 split 方法，当位图加载完成后，调用 split 方法。通过 split 方法，绘制两个三角形：1. var triangle_a:DisplayObject = null; 2. var triangle_b:DisplayObject = null; 3. 4. / 这个方法需要在位图加载之后调用 5. function split() 6. var p1 = x: 0, y: 0; / 左上角 7. var p2 = x: bw, y: 0; / 右上角 8. var p3 = x: 0, y: bh; / 左下角 9. var p4 = x: bw, y: bh; / 右下角 10. 11. / 以 p2 和 p3 为分割线，切割成两个三角形 12. / 绘制完成后添加到舞台上 13. triangle_a = DisplayObject(drawTriagle(p1, p2, p4); 14. this.addChild(triangle_a); 15. 16. triangle_b = DisplayObject(drawTriagle(p2, p4, p5); 17. this.addChild(triangle_b); 18. 这样我们就完成了把位图分割成两个三角形的任务，下面的任务是对两个三角形形变，并对这两个三角形进行拼接，以达到对位图任意形变的目的，这个我们在下一篇中再讲。放着放着就忘了，多亏 army 同学在后面催我，要不然还真不知道什么时候会继续弄这个。今天上午又抽空捣鼓了一下，偏移总算是弄出来了，不过渲染效率很低，中间的计算过程应该还可以继续优化的。另外，弄到这里发现还是有问题，分得较细的时候会出现裂缝误差真可怕！先不管这个误差，我们来看看能不能形变先。由于计算形变矩阵需要初始的坐标和新的坐标，需要两个方法来计算（貌似可以合并？）：1. / calculate points 2. / 包含 x 坐标和 y 坐标，分别存储在 pxs 和 pys 数组中 3. / params: 4. / w: 位图宽 5. / h: 位图高 6. / hs: 水平分段数 7. / vs: 垂直分段数 8. / return: 9. / void 10. function CalculatePoints(w:Number, h:Number, hs:Number, vs:Number):void 11. var iw:Number = w / hs; 12. var ih:Number = h / vs; 13. for (var h=0; h hs * 2 & h != 0) 31. m1.tx = trstid - hs * 2 - 1.transform.matrix.tx; 32. m1.ty = trstid - hs * 2 - 1.transform.matrix.ty; 33. else 34. m1.tx = 0; 35. m1.ty = 0; 36. 37. 38. m2 = CalculateMatrix(p1:p1, p2:p2, p3:p3, p1:pb, p2:pc, p3:pd); 39. if(v 0) 40. m2.tx = trs1.transform.matrix.tx * (h + 1) * (v + 1); 41. 42. else 43. m2.tx = (pb.x - psa.x) - (p1.x - pxs0) - (pd.x - npsv+10.x) - (p3.x - pxs0); 44. 45. if(tid 0) 46. m2.ty = trs1.transform.matrix.ty * (h + 1) * (v + 1); 47. 48. else 49. m2.ty = (pc.y - psa.y) - (p2.y - pys0) - (pd.y - nps0h+1.y) - (p3.y - pys0); 50. trace(m2.ty); 51. 52. ta.transform.matrix = m1; 53. tb.transform.matrix = m2; 54. 55. 56. 嗯，这实在是太凑合了，需要合并许多计算，后面继续优化