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

使用scaleBitmap类缩放和拉伸的更多相关文章

  1. PHP的图片处理类(缩放、加图片水印和剪裁)

    <!--test.php文件内容--> <?php //包含这个类image.class.php include "image.class.php"; $img ...

  2. vue使用自定义指令v-dialogDrag来控制element ui中el-dialog的拖动缩放,拉伸问题

    1 在vue的utils中新建一个dialogDrag.js import Vue from 'vue' Vue.directive('dialogDrag', { bind(el, binding, ...

  3. Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)

    在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...

  4. php处理类

    Thomas Boutell 以及众多的开发者创造了以GD图形库闻名的一个图形软件库,用于动态的图形计算. GD提供了对于诸如C, Perl, Python, PHP, OCaml等等诸多编程语言的支 ...

  5. 缩放动画(ScaleTransform)

    在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...

  6. 使用Vitamio打造自己的Android万能播放器(2)—— 手势控制亮度、音量、缩放

    前言 本章继续完善播放相关播放器的核心功能,为后续扩展打好基础.   声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://ove ...

  7. WPF 不要给 Window 类设置变换矩阵(分析篇):System.InvalidOperationException: 转换不可逆。

    原文:WPF 不要给 Window 类设置变换矩阵(分析篇):System.InvalidOperationException: 转换不可逆. 最近总是收到一个异常 "System.Inva ...

  8. Visual Studio Code 缩放设置

    Windows下的软件的操作都很类似,所以刚开始使用vs code的时候习惯性地使用Ctrl+鼠标滚轮进行缩放,然而在vs code上不管用. 在vs code中有两类缩放: 一.整体缩放:包括菜单栏 ...

  9. Java类的继承与多态特性-入门笔记

    相信对于继承和多态的概念性我就不在怎么解释啦!不管你是.Net还是Java面向对象编程都是比不缺少一堂课~~Net如此Java亦也有同样的思想成分包含其中. 继承,多态,封装是Java面向对象的3大特 ...

随机推荐

  1. 《算法》第四章部分程序 part 2

    ▶ 书中第四章部分程序,加上自己补充的代码,随机生成各类无向图 ● 随机生成无向图 package package01; import edu.princeton.cs.algs4.StdOut; i ...

  2. Java的I/O对文件的操作

    I/O操作主要是指使用Java进行输入,Java所有的I/O机制都是基于数据流进行输入输出,这些数据流表示了字符或者字节数据的流动序列. 主要是通过下面两个类实现对文件的输入输出操作: FileInp ...

  3. workerman-todpole 执行流程(3)

    通过前两篇文章的分析: workerman-todpole 执行流程(1) workerman-todpole 执行流程(2) 我们已经详细了解了主进程以及子进程的启动细节,但之前的文章并没有考虑 W ...

  4. django之ModelBase类及mezzanine的page link类

    class ModelBase(type): """ Metaclass for all models. """ def __new__(c ...

  5. 使用子查询创建表(oracle)

    转自:https://blog.csdn.net/lxh123456789asd/article/details/81164321 语句: CREATE TABLE tablename[(column ...

  6. jquery元素使用

    特殊用法: var formFields = $([]).add(_ele1).add(_ele2);  可将多个元素整合到一个集合中 1.has方法 has()方法查找自己,has为子集条件,即包含 ...

  7. 爬虫--Scrapy-持久化存储操作2

    1.管道的高级操作 将爬取到的数据值分别存储到本地磁盘.redis数据库.mysql数据. 需求:将爬取到的数据值分别存储到本地磁盘.redis数据库.mysql数据. 1.需要在管道文件中编写对应平 ...

  8. SRM-供应商关系管理-组织模式

    https://wiki.scn.sap.com/wiki/display/SRM/PPOMA_BBP 供应商关系管理 ... 组织模式 PPOMA_BBP     跳到元数据结束   由Ivy Li ...

  9. ORM 的基本操作

    https://www.cnblogs.com/sss4/p/7070942.html

  10. +load +initialize

    +load方法 在app启动的时候各个类的+load方法都会被调用,+load方法不是通过消息机制调用的,它是直接调用的,因此无论是在子类或者category中复写此方法,复写的+load方法都会被调 ...