flex中对于位图的九宫格 scale9Grid使用方法

最近做游戏,发现flash里位图是无法使用scale9Grid这个属性,,,没办法,只好自己写了一个,,,原理很简单,,用程序把位图切成九块,,装里一个Sprite里,然后重写Sprite的width和height这两个方法,根据改变大小来重新设置位图的各个位置…这样就实现了位图的不变形缩放….
ps:近期我会把以前做的一些小东西的源码放出来,供大家学习使用…

严重声明,,,

发现好多人都不知道这个问题,,用FLASH编译,位图使用scale9Grid也没用,

package PopDialog
{
        import flash.display.Sprite;
        import flash.display.Bitmap;
        import flash.display.BitmapData;
        import flash.geom.Rectangle;
        import flash.geom.Point;
        
        public class BitmapScale9Grid extends Sprite
        {
                private var source : Bitmap;
                private var scaleGridTop : Number;
                private var scaleGridBottom : Number;
                private var scaleGridLeft : Number;
                private var scaleGridRight : Number;
                
                private var leftUp : Bitmap;
                private var leftCenter : Bitmap;
                private var leftBottom : Bitmap;
                private var centerUp : Bitmap;
                private var center : Bitmap;
                private var centerBottom : Bitmap;
                private var rightUp : Bitmap;
                private var rightCenter : Bitmap;
                private var rightBottom : Bitmap;
                
                private var _width : Number;
                private var _height : Number;
                
                private var minWidth : Number;
                private var minHeight : Number;
                
                public function BitmapScale9Grid(source:Bitmap, scaleGridTop:Number, scaleGridBottom:Number, scaleGridLeft:Number, scaleGridRight:Number ) 
                {
                        this.source = source;
                        this.scaleGridTop = scaleGridTop;
                        this.scaleGridBottom = scaleGridBottom;
                        this.scaleGridLeft = scaleGridLeft;
                        this.scaleGridRight = scaleGridRight;
                        init();
                        
                }
                
                private function init() : void {
                        _width = source.width;
                        _height = source.height;
                        
                        leftUp = getBitmap(0, 0, scaleGridLeft, scaleGridTop);
                        this.addChild(leftUp);
                        
                        leftCenter = getBitmap(0, scaleGridTop, scaleGridLeft, scaleGridBottom - scaleGridTop);
                        this.addChild(leftCenter);
                        
                        leftBottom = getBitmap(0, scaleGridBottom, scaleGridLeft, source.height - scaleGridBottom);
                        this.addChild(leftBottom);
                        
                        centerUp = getBitmap(scaleGridLeft, 0, scaleGridRight - scaleGridLeft, scaleGridTop);
                        this.addChild(centerUp);
                        
                        center = getBitmap(scaleGridLeft, scaleGridTop, scaleGridRight - scaleGridLeft, scaleGridBottom - scaleGridTop);
                        this.addChild(center);
                        
                        centerBottom = getBitmap(scaleGridLeft, scaleGridBottom, scaleGridRight - scaleGridLeft, source.height - scaleGridBottom);
                        this.addChild(centerBottom);
                        
                        rightUp = getBitmap(scaleGridRight, 0, source.width - scaleGridRight, scaleGridTop);
                        this.addChild(rightUp);
                        
                        rightCenter = getBitmap(scaleGridRight, scaleGridTop, source.width - scaleGridRight, scaleGridBottom - scaleGridTop);
                        this.addChild(rightCenter);
                        
                        rightBottom = getBitmap(scaleGridRight, scaleGridBottom, source.width - scaleGridRight, source.height - scaleGridBottom);
                        this.addChild(rightBottom);
                        
                        minWidth = leftUp.width + rightBottom.width;
                        minHeight = leftBottom.height + rightBottom.height;
                }
                
                private function getBitmap(x:Number, y:Number, w:Number, h:Number) : Bitmap {
                        var bit:BitmapData = new BitmapData(w, h);
                        bit.copyPixels(source.bitmapData, new Rectangle(x, y, w, h), new Point(0, 0));
                        var bitMap:Bitmap = new Bitmap(bit);
                        bitMap.x = x;
                        bitMap.y = y;
                        return bitMap;
                }
                
                override public function set width(w : Number) : void {
                        if(w < minWidth) {
                                w = minWidth;
                        }
                        _width = w;
                        refurbishSize();
                }
                
                override public function set height(h : Number) : void {
                        if(h < minHeight) {
                                h = minHeight;
                        }
                        _height = h;
                        refurbishSize();
                }
                
                private function refurbishSize() : void {
                        leftCenter.height = _height - leftUp.height - leftBottom.height;
                        leftBottom.y = _height - leftBottom.height;
                        centerUp.width = _width - leftUp.width - rightUp.width;
                        center.width = centerUp.width;
                        center.height = leftCenter.height;
                        centerBottom.width = center.width;
                        centerBottom.y = leftBottom.y;
                        rightUp.x = _width - rightUp.width;
                        rightCenter.x = rightUp.x;
                        rightCenter.height = center.height;
                        rightBottom.x = rightUp.x;
                        rightBottom.y = leftBottom.y;
                }
        }
}
二、哪些时候会无效 
1、只对矢量图起作用,对图片无效。解决办法参考: 
http://bbs.blueidea.com/viewthread.php?tid=2915069 
2、对Shape对象使用scale9Grid,有效。但是如果用Shape.graphics.beginBitmapFill (new BitmapData());//仅用了一个BitmapData对象填充Shape对象后,无效! 
3、对Sprite对象使用scale9Grid: 
(1)仅对Sprite对象下的“图形元件”和“直接绘制的形状”有效。 
(2)对Sprite对象下的Sprite对象,无效! 
(3)对Sprite对象下的“图形元件”,如果该“图形元件”内仅包含另个Sprite对象,依然无效。 
4、参考博客:scale9Grid – When it works and when it does not 
http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ 
三、Flex中使用Embed标签 
Embed(source="track.png",scaleGridTop="20",scaleGridLeft="7",scaleGridRight="9",scaleGridBottom="80"); 
四、创建一个具有九宫格功能的Bitmap 
http://flex2.group.iteye.com/group/blog/513064 
五、推荐http://bbs.9ria.com/thread-47414-1-1.html(第三个页面打不开,郁闷) 
[Embed(source="ee.gif",scaleGridTop="10",scaleGridBottom="90",scaleGridLeft="10",scaleGridRight="90")]
private var abe:Class;
本文转载自: http://blog.sina.com.cn/s/blog_456a32b901011nxg.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用flex布局实现九宫格,可以按照以下步骤进行操作: 1. 创建一个容器元素,并设置其为display:flex,以便启用flex布局。比如使用`<div>`元素,并给它一个类名,比如"container"。 2. 在容器元素内部创建九个子元素,每个子元素代表一个格子。可以使用`<div>`元素,并给它们一个共同的类名,比如"block"。 3. 设置每个子元素的样式,包括宽度、高度、背景颜色等。可以使用flex属性来控制子元素的伸缩性,使它们平分容器的空间。 4. 设置容器元素的布局属性,如justify-content和align-items,来控制子元素的对齐方式和间距。比如使用`justify-content: space-around;`可以使子元素在容器均匀分布。 下面是一个示例代码,展示了如何使用flex布局实现九宫格: ```html <style> .container { display: flex; flex-wrap: wrap; justify-content: space-around; width: 300px; height: 300px; } .block { background-color: orange; flex: 1 1 100px; } </style> <body> <div class="container"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> </body> ``` 在上面的示例,container类设置为flex布局,block类控制格子的样式。通过这样的设置,我们可以实现一个简单的九宫格布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [flex弹性盒布局最后一行左对齐的实现思路](https://download.csdn.net/download/weixin_38713099/14801503)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [flex 九宫格布局实现](https://blog.csdn.net/think_A_lot/article/details/127919958)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [【Flex】利用flex布局一个九宫格](https://blog.csdn.net/Sonnenlicht77/article/details/129128228)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值