使用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这样的实用程序可以帮助解决这个难题。
最新文章
- 新手学习web遇到的一些乱码问题
- RTSP协议媒体数据发包相关的细节
- 【Junit】JUnit-4.12使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误
- C# 毕业证书打印《五》
- 我用的/etc/vimrc
- vs2013的asp.net 管理
- 【转】可执行程序包括BSS段、数据段、代码段
- python zookeeper 学习笔记
- MySQL注入总结
- Struts2初学习记录
- BZOJ 1552: [Cerc2007]robotic sort( splay )
- Twitter Bootstrap JavaScript插件
- Google HTML/CSS 编码规范
- uva11059(最大乘积)
- https及证书
- python之路--MySQL数据库初识
- Python3基础-高级用法
- Set ";$USE_DEPRECATED_NDK=true"; in gradle.properties to continue using the current NDK integration. 解决办法
- Python3学习笔记11-循环语句
- jQuery对象的操作