我有一個PNG圖像,有一些透明的部分。現在我想將顏色疊加層應用於圖像的非透明部分,同時保持透明部分不變。如何用Easeljs/Createjs中的顏色疊加位圖的非透明部分?
如果我使用ColorFilter
它填充整個位圖。我也嘗試了AlphaMaskFilter
(使用與源代碼相同的PNG),但它也不起作用。整個位圖總是以顏色填充。
有關如何做到這一點的其他建議?
我有一個PNG圖像,有一些透明的部分。現在我想將顏色疊加層應用於圖像的非透明部分,同時保持透明部分不變。如何用Easeljs/Createjs中的顏色疊加位圖的非透明部分?
如果我使用ColorFilter
它填充整個位圖。我也嘗試了AlphaMaskFilter
(使用與源代碼相同的PNG),但它也不起作用。整個位圖總是以顏色填充。
有關如何做到這一點的其他建議?
你會寫一個過濾器,或者:
rect()
和source-out
compositeOperation OR下面是使用上述第一種方法的樣本插件,這可能是最有效的:
(function() {
"use strict";
function ColorMaskFilter(color) {
this.color = color;
}
var p = createjs.extend(ColorMaskFilter, createjs.Filter);
p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
if (!this.color) { return true; }
targetCtx = targetCtx || ctx;
if (targetX == null) { targetX = x; }
if (targetY == null) { targetY = y; }
targetCtx.save();
if (ctx != targetCtx) {
return false;
}
targetCtx.globalCompositeOperation = "source-out"; // Use source-in to fill the shape instead
targetCtx.fillStyle = this.color;
targetCtx.rect(targetX,targetY,width,height);
targetCtx.fill();
targetCtx.restore();
return true;
};
p.clone = function() {
return new AlphaMaskFilter(this.color);
};
createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());
我用這個例子放在一起快速小提琴:http://jsfiddle.net/dbtwd463/
注:編輯從原來只是建議的方法,包括一個樣品和小提琴
根據蘭尼的建議,我可以拿出噸他的過濾器。
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<canvas id="canvas" width="50" height="50" style="border:1px solid red; background: pink">
no canvas!
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var stage = new createjs.Stage(canvas);
function init(img) {
var bmp = new createjs.Bitmap(img);
stage.addChild(bmp);
bmp.filters = [new createjs.ColorMaskFilter('#ffff00')];
bmp.cache(0, 0, 30, 30);
stage.update();
}
(function() {
"use strict";
function ColorMaskFilter(color) {
this.color = color;
}
var p = createjs.extend(ColorMaskFilter, createjs.Filter);
p.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {
targetCtx = targetCtx || ctx;
if (targetX == null) {
targetX = x;
}
if (targetY == null) {
targetY = y;
}
targetCtx.save();
if (ctx != targetCtx) {
// TODO: support targetCtx and targetX/Y
// clearRect, then draw the ctx in?
return false;
}
if (!this.mask || this.mask.width != width || this.mask.height != height) {
var shape = new createjs.Shape();
shape.graphics.beginFill(this.color || '#ff0000');
shape.graphics.drawRect(0, 0, width, height);
shape.cache(0, 0, width, height);
this.mask = shape.cacheCanvas;
}
targetCtx.globalCompositeOperation = "source-in";
targetCtx.drawImage(this.mask, targetX, targetY);
targetCtx.restore();
return true;
};
/** docced in super class **/
p.clone = function() {
return new ColorMaskFilter(this.color);
};
/** docced in super class **/
p.toString = function() {
return "[ColorMaskFilter]";
};
createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());
</script>
<hr>Source: <img width="30" height="30" onload="init(this)" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzA5OUIxQjFGQUM5MTFFNjlCRDRBMjM4Qzg2RDM5M0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzA5OUIxQjJGQUM5MTFFNjlCRDRBMjM4Qzg2RDM5M0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MDk5QjFBRkZBQzkxMUU2OUJENEEyMzhDODZEMzkzQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3MDk5QjFCMEZBQzkxMUU2OUJENEEyMzhDODZEMzkzQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pkob9IwAAAB0SURBVHjaYmT4X/GfYQAAE8MAARYY4z9DOyM9LGRkqPw/oD4e+KCGgcN2S+WA1ENqW2R7KJpxUPh48AQ1vuAhBwCj7v+g8vGoxaMWj1o8avGoxdSpJHAV8KNBTZWgBtbBj8CNwdFUTfX29UjrwgyYxQABBgBraRUTSfHtgAAAAABJRU5ErkJggg=="
/>
您好,感謝您的回答。根據你的建議,我在下面發佈了一個ColorMaskFilter過濾器。它似乎正在按預期工作,但如果您可以請看看,我將不勝感激。 – supersan
你的方法應該沒問題 - 但這裏基於AlphaMaskFilter更簡單。 http://jsfiddle.net/dbtwd463/ – Lanny
謝謝。非常感謝您的投入和時間。我將你的答案標記爲已接受的答案。當你有機會的時候,請按照SO推薦的那樣用小提琴的複製粘貼來更新你的答案。 – supersan