EaselJS的九宫格缩放图片

本文介绍了如何利用EaselJS的ScaleBitmap类来实现九宫格缩放图片,解决了在预加载过程中显示进度条时保持比例不变形的问题。虽然原ScaleBitmap存在缩放宽高时的显示BUG和不支持spriteSheet切片,但经过代码修改,现在可以成功对由spriteSheet打包的图片进行九宫格缩放。
摘要由CSDN通过智能技术生成

要做预加载,得显示一个进度条,进度条需要拉伸不变形,于是去搜了一下有没有类似flash影片剪辑里面“九宫格切片”的功能。

确实找到了,地址如下:

https://github.com/CreateJS/EaselJS/tree/6abc90f5c32a29e90666fc2c7dcde5d8b6c8a34f/extras/ScaleBitmap


但是有两个问题

1、只缩放宽/高的时候,显示有BUG

2、从基友那里拿到的图片素材是spriteSheet打包出来的,这个类只支持整张位图的切片,像这样:



所以要修改一下原来的代码

构造函数的地方:

        this.snapToPixel = true;
        //这里加入sourceRect属性
        this.sourceRect = new createjs.Rectangle(0,0,this.image.width,this.image.height);

重写draw():

p.draw = function(ctx, ignoreCache) {
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值