使用的平板电脑 EaselJS + sourceRect 上不可见的剪辑图像答案

【问题标题】：clipped image not visible on Tablet EaselJS + sourceRect used使用的平板电脑 EaselJS + sourceRect 上不可见的剪辑图像
【发布时间】：2014-10-03 10:34:39
【问题描述】：

我正在开发一个移动项目（装有 iOS 8.0.2 的 iPad）；我想剪裁我的图像以减少显示。在 PC 上显示时效果很好，而我们在平板电脑上测试时，剪裁的图像根本不显示。你有什么建议

    this.background = new createjs.Bitmap('some_image.png');
    //create a clipping of drawn image!
    var dims = this.background.getBounds();
    this.background.sourceRect = new createjs.Rectangle(0, 15, dims.width, dims.height);
    this.background.x = 248;
    this.background.y = 86;
    this.stage.addChild(this.background);

【问题讨论】：

你在使用phonegap吗？似乎它与 preloadjs 配合得不是很好。看看这个：community.createjs.com/discussions/preloadjs/…
嗨，renatop 我既没有使用phonegap也没有使用preloadjs
哦，您是在等待图像完全加载后再使用吗？如果不是，那可能是你的问题。
是的，它的加载和缓存也只发生在 iOS 8.0.2 中

标签： mobile easeljs

【解决方案1】：

我遇到了同样的问题。我已经放弃使用位图来剪切图像。我找到了另一个解决方案，这里是“

easeljs splitting an image into pieces

“。祝你好运。

【讨论】：

伙计们，请在投反对票时解释一下自己......我会认为这是一个很好的迂回解决方案，不要介意这是一个综述
我会认为这是一个很好的回旋处，问题精灵被正确绘制，位图（未裁剪）也是如此，但裁剪图像会更容易使用“随机”精灵回答提供的是关于 Bitmaps&sourceRects 的文章，但不适用于我们的案例

【解决方案2】：

我正在锻炼，代码是这样的：

var img, stage;
function init() {
    //wait for the image to load
    img = new Image();
    img.onload = handleImageLoad;
    img.src = "./res/image.png";
}

function handleImageLoad(evt) {
    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("canvas");

    // create a new Bitmap, and slice out one image from the sprite sheet:
    var bmp = new createjs.Bitmap(evt.target).set({x:200, y:200});
    bmp.sourceRect = new createjs.Rectangle(916, 101, 84, 84); 
    //x,y,width,height

    stage.addChild(bmp);

    stage.update();
}

这是一个例子： https://github.com/CreateJS/EaselJS/blob/master/examples/Filters_animated.html

【讨论】：