javascript - EaselJS colorMatrixFilter 不适用于 Chrome

标签 javascript google-chrome html5-canvas easeljs createjs

我尝试在 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] ,我认为是正确的。有人可以帮助我吗?

最佳答案

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

在花了很多时间尝试解决一个不存在的跨域安全问题后,我发现问题的发生是因为我在本地测试 (file:///),并且对于某些浏览器,过滤器或缓存在这种情况下不起作用。

如果您遇到完全相同的问题,请访问本地主机。

关于javascript - EaselJS colorMatrixFilter 不适用于 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26693363/

相关文章:

javascript - 无法让 JavaScript 弹出闰年警报

javascript - 由于 'Only secure origins are allowed',无法使用 navigator.geolocation

google-chrome - 确定哪个资源导致 Chrome 中出现 SSL 警告

javascript - 图像在 Firefox 中不显示

javascript - context.clearRect() 真的那么贵吗?

HTML5 Canvas 不保留绘制顺序

javascript - Office.context.mailbox.displayNewMessageForm 在移动设备中不起作用

javascript - 动态写入js文件

javascript - 默认情况下突出显示的选项卡

javascript - Node.js 全屏打开 chrome