羔羊引擎之九宫格的秘密

qq229449388

经常听别人说，九宫格，九宫格，你真的知道九宫格吗？
羔羊引擎里面提供GYScaleSprite和GYScaleShape，能够进行九宫格拉伸，但同时也支持，重复，拉伸，裁切3种效果，为何可以一个类支持如此多效果，大家先看效果，让我吃完芋圆给你们解释


首先说说，什么是九宫格，作用是什么，可能这个知识点太老，我就长话短说，网上文章也很多。九宫格，简单点说，就是把图，划分成九份，井字那种，中心部分可以宽高同时拉伸，上和下的中间部分可以横行拉伸，左和右的中间部分可以纵向拉伸
1 2 3
4 5 6
7 8 9
如上，2和8，可以横拉伸，4和6可以纵拉伸，5可以纵横方向都拉伸，1 3 7 9四个角不允许拉伸。
这样可以有什么作用呢，作用就是当放大这个图片，你会感觉不会变形。屁话，图片放大肯定变形啊，按照上面的逻辑，这样不会变形的只有四个角。当然我说的能有不变形的效果，是针对特定的图，如按钮，请看下面这个按钮图，就不会变形，仔细思考，是不是这样，这个就是九宫格的作用。

那么九宫格是代码怎么实现，其实逻辑已经说的很清楚，既然是4个角不变，我们就用可以裁切一部分图片并且缩放的api，进行分块绘制。
as3里面，其实可以这么做的，bitmapData和graphics都可以，但是bitmapData是要建立一个指定宽高的对象，不能灵活缩放宽高，graphics则不指定宽高，可以清理不断重画。而graphics使用beginBitmapFill+matrix则可以实现绘制一部分图片并且缩放。
具体用法参考as3的帮助文档，而绘制过程则可以参考羔羊引擎源码，GYScaleShape这个类的drawImg方法，源码太长，我就不在这里贴了。

下面说说为何除了九宫格，还能支持重复，裁切，拉伸功能。
拉伸就不用说了，九宫格就已经能拉伸，其实算是包含的功能
重复呢，完全不一样，大家查看beginBitmapFill，其实有参数控制重复绘制

1. beginBitmapFill(_initData, _matrix,false);

复制代码

第三个参数，就是是否重复平铺的方式去绘制。这个方法也是九宫格要用的，所以适合并入一个类。
裁切呢？
那也是跟九宫格需要的条件重复了，九宫格需要绘制一部分，以及拉伸，所以拉伸和裁切其实都是九宫格需要的。
可以看出，支持九宫格的对象，内部是一定能实现裁切和拉伸两种效果的，至于重复，就得看对于引擎是否提供。
所以大家，应该使用新的引擎，看到支持九宫格，可以考虑内部是否也支持拉伸和裁切，不要总是问别人有没有，有些东西明白原理，就知道有没有。

羔羊引擎如何使用九宫格呢，代码如下

1. shape = new GYScaleSprite;
   
2.                         shape.toolTipString = "九宫格拉伸";
   
3.                         shape.bitmapData = (GYSprite.skinTheme as SanGuoTheme).commonBtn_upBD;//设置位图，这里直接用主题按钮
   
4.                         shape.scale9GridRect = new Scale9GridRect;//设置了九宫格
   
5.                         shape.x = 210;
   
6.                         shape.y = 0;
   
7.                         shape.width = 100;
   
8.                         shape.height = 100;
   
9.                         s.addChild(shape);

复制代码

使用简单，这里特别说明一下，Scale9GridRect类型不是Rectangle那种类型，内部只有4个属性，分别是leftGap rightGap topGap bottomGap，与四个边的距离，默认是7，7，7，7。
GYScaleShape有个mode属性，控制裁切、拉伸、重复模式，在没有设置scale9GridRect或者scale9GridRect为null的情况下，设置这个mode才有效果

1. mode == ScaleMode.CLIP;//裁切 其中还可以用clipX clipY控制裁切起点
   
2. mode == ScaleMode.REPEAT;//重复
   
3. mode == ScaleMode.SCALE;//拉伸

复制代码

这里主要ScaleMode是羔羊引擎的类，因为flex里面有个类和这个一样名字，别搞错了。
lesson7.rar (65.3 KB, 下载次数: 1)

2017-11-16 01:53 上传

点击文件名下载附件

13240360340

强烈支持羔羊

switch

还有芋圆么