EaselJS Spritesheet和位图ColorFilterMatrix [英] EaselJS Spritesheet and Bitmap ColorFilterMatrix

问题描述

我使用带有JSON文件的PreloadJS根据需要分别为每个精灵加载精灵表。现在，我想将ColorMatrixFilter应用于Sprites或Spritesheet。

I am loading spritesheets individually for each sprite on demand using PreloadJS with JSON files. Now, I would like to apply a ColorMatrixFilter to the Sprites or Spritesheet.

经过一番研究，我发现了Lanny的这段代码 http ：//jsfiddle.net/lannymcnie/NRH5X/ ，其中JSON SpriteSheet定义位于Javascript代码中，并且在SpriteSheet创建中使用了对位图cacheCanvas [bmp.cacheCanvas]的引用。

After some research I found this snippet from Lanny http://jsfiddle.net/lannymcnie/NRH5X/ where the JSON SpriteSheet definition is within the Javascript code and a reference to the Bitmap cacheCanvas [bmp.cacheCanvas] is used to in the SpriteSheet creation.

现在，如果我使用JSON文件定义SpriteSheet，则无法引用位图cacheCanvas。如果SpriteSheet类具有一个可选参数来附加一个过滤器，那么它将很重要，它不仅可以执行以下操作，而且还支持JSON文件加载：

Now, if I'm using JSON files to define the SpriteSheet, I can't reference the Bitmap cacheCanvas. It would be nice if the SpriteSheet class had an optional parameter to attach a filter so that it would essential do the following but also supporting JSON file loading:

var bmp = new createjs.Bitmap(<"Image Defined in JSON SpriteSheet file">);
bmp.filters = [new createjs.BlurFilter(10,10,1)];
bmp.cache(0,0,img.width,img.height);

var data2 = new createjs.SpriteSheet({
    "images": [bmp.cacheCanvas], // Note we are using the bitmap's cache
    "frames": {"height": 292, "width": 165},
    "animations": {"run": [0, 25, "run", 2]}
});

这样类似的东西就可以工作：

So that something like this would work:

var spriteSheet = loaderQueue.getResult(spriteSheetId);

var spriteSheetNewColor = spriteSheet.filter(new createjs.BlurFilter(10,10,1))

或者我可以获取SpriteSheet img，以便使用上述技术使用过滤器重新创建SpriteSheet吗？

Or can I get the SpriteSheet img so that I can recreate the SpriteSheet using the filter using the above technique?

推荐答案

您可以直接操纵 images 数组，并注入经过过滤/缓存的图像。它要求您预加载图像，对其进行过滤，然后在SpriteSheet中替换图像。加载数组中的所有图像后，您还可以从SpriteSheet获取 complete 事件，并在那里进行工作：

You can directly manipulate the images array, and inject a filtered/cached image. It requires you to preload the images, filter them, and then replace the image in the SpriteSheet. You can also get a complete event from the SpriteSheet when all images in the array are loaded, and do the work there:

// pseudocode 
spritesheet.on("complete", function(e) {
    for (var i=0; i<spritesheet._images.length; i++) {
        // Filter Code Here
        // Then
        spritesheet.images[i] = filteredBitmap.cacheCanvas;
    }
}

如果您使用更改图像尺寸（例如模糊）的滤镜，这种方法可能会变得混乱。

This approach could get messy if you use a filter that changes the image dimensions (like blur). You can see in my demo that you referenced that the blurred image gets offset because of this.

这不是一个优雅的解决方案，但是您的建议是一个非常具体的请求，不太可能添加到SpriteSheet中更好的方法是自己扩展SpriteSheet并添加这种行为，也许可以使用 _handleImageLoad 方法。

Its not an elegant solution, but your suggestion is a pretty specific request, and unlikely to be added to SpriteSheet. A better approach is to extend SpriteSheet yourself and add this behaviour, maybe in the _handleImageLoad method.

希望帮助！

这篇关于EaselJS Spritesheet和位图ColorFilterMatrix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！