使用scaleBitmap类缩放和拉伸

使用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这样的实用程序可以帮助解决这个难题。