GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 13:21:41 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

improved "preserve alpha" blending mode

Browse Source
This commit is contained in:
Kyle
2021-10-18 21:15:21 -07:00
parent 865ca561a6
commit 75ff392f22
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
js/creator-23.js
View File

@@ -132,6 +132,7 @@ function sizeCanvas(name, width = Math.round(card.width * (1 + 2 * card.marginX)
sizeCanvas('card'); sizeCanvas('card');
sizeCanvas('frame'); sizeCanvas('frame');
sizeCanvas('frameMasking'); sizeCanvas('frameMasking');
sizeCanvas('frameCompositing');
sizeCanvas('text'); sizeCanvas('text');
sizeCanvas('paragraph'); sizeCanvas('paragraph');
sizeCanvas('line'); sizeCanvas('line');
@@ -323,21 +324,30 @@ function drawFrames() {
frameMaskingContext.drawImage(black, 0, 0, frameMaskingCanvas.width, frameMaskingCanvas.height); frameMaskingContext.drawImage(black, 0, 0, frameMaskingCanvas.width, frameMaskingCanvas.height);
frameMaskingContext.globalCompositeOperation = 'source-in'; frameMaskingContext.globalCompositeOperation = 'source-in';
item.masks.forEach(mask => frameMaskingContext.drawImage(mask.image, scaleX((bounds.x || 0) - (ogBounds.x || 0) - ((ogBounds.x || 0) * ((bounds.width || 1) / (ogBounds.width || 1) - 1))), scaleY((bounds.y || 0) - (ogBounds.y || 0) - ((ogBounds.y || 0) * ((bounds.height || 1) / (ogBounds.height || 1) - 1))), scaleWidth((bounds.width || 1) / (ogBounds.width || 1)), scaleHeight((bounds.height || 1) / (ogBounds.height || 1)))); item.masks.forEach(mask => frameMaskingContext.drawImage(mask.image, scaleX((bounds.x || 0) - (ogBounds.x || 0) - ((ogBounds.x || 0) * ((bounds.width || 1) / (ogBounds.width || 1) - 1))), scaleY((bounds.y || 0) - (ogBounds.y || 0) - ((ogBounds.y || 0) * ((bounds.height || 1) / (ogBounds.height || 1) - 1))), scaleWidth((bounds.width || 1) / (ogBounds.width || 1)), scaleHeight((bounds.height || 1) / (ogBounds.height || 1))));
frameMaskingContext.drawImage(item.image, frameX, frameY, frameWidth, frameHeight); if (item.preserveAlpha) { //preserves alpha, and blends colors using an alpha that only cares about the mask(s), and the user-set opacity value
if (item.erase) {frameContext.globalCompositeOperation = 'destination-out';} //draw the image onto a separate canvas to view its unaltered state
var oldAlphaData; frameCompositingContext.clearRect(0, 0, frameCanvas.width, frameCanvas.height);
if (item.preserveAlpha) { frameCompositingContext.drawImage(item.image, frameX, frameY, frameWidth, frameHeight);
oldAlphaData = frameContext.getImageData(0, 0, frameCanvas.width, frameCanvas.height).data; //create pixel arrays for the existing image, new image, and alpha mask
} var existingData = frameContext.getImageData(0, 0, frameCanvas.width, frameCanvas.height)
frameContext.drawImage(frameMaskingCanvas, 0, 0, frameCanvas.width, frameCanvas.height); var existingPixels = existingData.data;
if (item.preserveAlpha) { var newPixels = frameCompositingContext.getImageData(0, 0, frameCanvas.width, frameCanvas.height).data;
var newRGBData = frameContext.getImageData(0, 0, frameCanvas.width, frameCanvas.height); var maskPixels = frameMaskingContext.getImageData(0, 0, frameCanvas.width, frameCanvas.height).data;
var pixels = newRGBData.data; const functionalAlphaMultiplier = frameContext.globalAlpha / 255;
for (var i = 3; i < oldAlphaData.length; i += 4) { //manually blends colors, basing blending-alpha on the masks and desired draw-opacity, but preserving alpha
pixels[i] = oldAlphaData[i]; for (var i = 0; i < existingPixels.length; i += 4) {
const functionalAlpha = maskPixels[i + 3] * functionalAlphaMultiplier //functional alpha = alpha ignoring source image
existingPixels[ i ] = existingPixels[ i ] * (1 - functionalAlpha) + newPixels[ i ] * functionalAlpha; //RED
existingPixels[i + 1] = existingPixels[i + 1] * (1 - functionalAlpha) + newPixels[i + 1] * functionalAlpha; //GREEN
existingPixels[i + 2] = existingPixels[i + 2] * (1 - functionalAlpha) + newPixels[i + 2] * functionalAlpha; //BLUE
} }
frameContext.putImageData(newRGBData, 0, 0); frameContext.putImageData(existingData, 0, 0);
} else {
frameMaskingContext.drawImage(item.image, frameX, frameY, frameWidth, frameHeight);
if (item.erase) {frameContext.globalCompositeOperation = 'destination-out';}
frameContext.drawImage(frameMaskingCanvas, 0, 0, frameCanvas.width, frameCanvas.height);
} }
} }
}); });
if (!haveDrawnPrePTCanvas && drawTextBetweenFrames) { if (!haveDrawnPrePTCanvas && drawTextBetweenFrames) {