Question

我试图在Bitmap对象上使用EaselJS的colorMatrixFilter，缓存然后将其用作SpriteSheet对象的源图像，但它不能在Chrome上运行。它适用于Firefox和Safari。

Chrome （应该是blue狐狸）：

an orange fox

Safari浏览器：

a blue fox

这是我的代码：

lr.SpriteSheet = function (sSprite, nFrameWidth, nFrameHeight, oAnimations) {
    var _cacheBmp = new createjs.Bitmap(sSprite);

    return {
        Sprite: function (oArgs) {
            oArgs = oArgs || {};

            _cacheBmp.filters = oArgs.aFilters || [];
            _cacheBmp.cache(0, 0, _cacheBmp.image.width, _cacheBmp.image.height);
            var spriteSheet = new createjs.SpriteSheet({
                images: [_cacheBmp.cacheCanvas],
                frames: {width: nFrameWidth, height: nFrameHeight},
                animations: oAnimations
            });
            this.self = new createjs.Sprite(spriteSheet, oArgs.sAction || 0);
            this.self.set({
                x: (oArgs.nX || 0) * lr.GRID,
                y: (oArgs.nY || 0) * lr.GRID
            }).set(oArgs.oProps || {});
            lr.scene.addChild(this.self);
        }
    }
}

<子>

var fox = new lr.SpriteSheet("Graphics/Fox.png", 30, 40, {
        stand: 0,
        run: {
            frames: [0,0,0,0,1,1,2,3,3,4,4,4,4,3,3,2,1,1,0,0,0,0,5,5,6,7,7,8,8,8,8,7,7,6,5,5], // Easing
            next: true
        },
        jump: [10, 14, "neutral", 0.5],
        runJump: [5, 7, "split", 0.666],
        neutral: 15,
        split: 8,
        fall: 16,
        land: [16, 20, "stand", 0.5],
        almostFalling: [9, 9, true, 0.1]
    });

<子>

var matrix = new createjs.ColorMatrix().adjustColor(-25, 10, -25, -180);
var player = new fox.Sprite({
    nX: 1, nY: 1,
    oProps: {regX: 7, regY: 6},
    nWidth: 11, nHeight: 30,
    aFilters: [new createjs.ColorMatrixFilter(matrix)],
    sAction: "run",
    aPush: [lr.movable, lr.collidable]
});

我已经尝试检查_cacheBmp.filters值并返回[colorMatrixFilter]，我认为这是正确的。有人能帮助我吗？

Answer 1

看起来我要回答我自己的问题ag a i n。无论如何，这是一个愚蠢的错误......

经过大量时间尝试解决不存在的跨源安全问题，我发现问题出现了，因为我在本地进行测试（file:///），并且过滤器或缓存不起作用对于某些浏览器，在这种情况下。

如果您遇到完全相同的问题，请转到localhost。

EaselJS colorMatrixFilter不适用于Chrome

1 个答案: