使用scaleBitmap类缩放和拉伸
位图,画架,图形,小贴士
我们一直在寻找在createJS中优化、简化或创建更好工作流的方法,scaleBitmap就是一个很好的例子。使用旧的flash方法,在easeljs的“extras”文件夹中提供的scalebitmap类使用一种简单的网格方法来创建可伸缩的元素,为光栅设计提供了一些灵活性。
我们知道,我们知道,scalebitmap(又称scale9或9-slice)早在flash之前就已经是一种用户界面模式了,但是当它作为内置行为包含在flash和actionscript 2中时,它肯定会被Adobe所普及。我们是超级粉丝,甚至提供了位图解决方案,因为Flash的实现仅限于矢量内容。
附带条件
scale9将矩形内容拆分为3×3网格。
未缩放比例映射网格
scaleBitmap使用的3×3网格
四个角(1、3、7和9)以正常大小绘制在缩放的sprite的外角上。
顶部和底部边框(2和8)水平缩放
左右边框(4和6)垂直缩放
中心(5)水平和垂直缩放+
拉伸比例9网格
网格,垂直和水平拉伸。
这允许您创建精灵,可以缩放到任何大小,同时以可预测的方式扭曲部分内容。在随EaseLJS附带的示例中,提供了一个简单的语音气泡图像,当单击时,它将缩放到随机大小。
带网格覆盖的示例图像
scaleBitmap示例图像
这里是前一个演示的快速代码笔分叉,在这里图像可以交换出来,以更好地了解内容如何缩放(很抱歉Grant使用了他的相似性)。
用法和示例
要使用scalebitmap类,请下载并将其包含在项目中(easeljs不将其作为小型化或组合库的一部分包含在内)。您不必确保在创建实例之前桶专卖加载图像,但在图像准备就绪之前,它们不会呈现。
使用定义中心正方形(X、Y、宽度和高度)的AcreateJS矩形指定网格。
一
二
三
四
五
六
七
<trans data src=“var sb=new createjs.scalebitmap”(“path/to/image.png”,
新建createjs.rectangle(12、12、5、10));
sb.set draw size(200,100);//设置初始绘制大小。
stage.addchild(sb);//添加到stage“>var sb=new createjs.scalebitmap(“path/to/image.png”,
新建createjs.rectangle(12、12、5、10));
sb.set draw size(200,100);//设置初始绘制大小。
stage.addchild(sb);//添加到stage</trans>
这个确切的想法被用在这个周年纪念代码笔中,允许气泡中的文本改变,气泡可以缩放以适应内容,而不会扭曲图形。
请注意,scaleBitmap easeljs类用于基于图像的内容。还可以缓存动态桶专卖内容,然后应用scalebitmap。下面是一个示例。其他方法可能对使用矢量图形绘制的资产更有意义(例如使用命令更改属性)。
StageGL当前不支持scaleBitmap。
更大解决方案的一部分
创建高保真体验通常需要为一系列不同的分辨率、视角甚至性能配置文件创建资产的成本。这意味着内容必须以视网膜(和更高)分辨率编写才能在任何设备上工作,并且可能会通过网络发送大量内容,或者需要复杂的加载模式来选择正确的下载和显示资产。
通过诸如google的AMP项目这样的计划来获得更快的网络浏览体验、eWebPack等工具来编译和拆分资产、新的协议(如ehttp/2)来总体上加快浏览速度,甚至是行业最佳实践(如使用gimageoptimizfor super compressing pngs),显然仍然需要优化内容。我们认为像scalebitmap这样的实用程序可以帮助解决这个难题。