From 5fffdce6c1c3448d7af63088e91e5b5d75eda18c Mon Sep 17 00:00:00 2001 From: enkimute Date: Wed, 12 Dec 2018 17:36:39 +0100 Subject: [PATCH 1/3] added bilinear filtering for drawimage --- src/bitmap.js | 34 ++++++++++++++++++++++++++++++++++ src/context.js | 3 ++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/src/bitmap.js b/src/bitmap.js index 714faef..3c2d872 100644 --- a/src/bitmap.js +++ b/src/bitmap.js @@ -122,6 +122,40 @@ class Bitmap { this.data[i+3]); } + /** + * Get the bilinear interpolated RGBA value at a given pixel position and returns it as a hexadecimal number(See {@link NAMED_COLORS} for examples) + * + * @param {number} x fractional X axis potiion + * @param {number} y fractional Y axis position + * + * @returns {number} + * + * @memberof Bitmap + */ + getPixelRGBA_bilinear(x,y) { + let floorx = Math.floor(x), + floory = Math.floor(y), + fractx = x-floorx, + fracty = y-floory, + + i00 = this.calculateIndex(floorx, floory), + i01 = this.calculateIndex(floorx, floory+1), + i10 = this.calculateIndex(floorx+1, floory), + i11 = this.calculateIndex(floorx+1, floory+1), + + r00 = this.data[i00], r01 = this.data[i01], r10 = this.data[i10], r11 = this.data[i11], + g00 = this.data[i00+1], g01 = this.data[i01+1], g10 = this.data[i10+1], g11 = this.data[i11+1], + b00 = this.data[i00+2], b01 = this.data[i01+2], b10 = this.data[i10+2], b11 = this.data[i11+2], + a00 = this.data[i00+3], a01 = this.data[i01+3], a10 = this.data[i10+3], a11 = this.data[i11+3]; + + r00 += (r01-r00)*fracty; r10 += (r11-r10)*fracty; r00 += (r10-r00)*fractx; + g00 += (g01-g00)*fracty; g10 += (g11-g10)*fracty; g00 += (g10-g00)*fractx; + b00 += (b01-b00)*fracty; b10 += (b11-b10)*fracty; b00 += (b10-b00)*fractx; + a00 += (a01-a00)*fracty; a10 += (a11-a10)*fracty; a00 += (a10-a00)*fractx; + + return uint32.fromBytesBigEndian(r00,g00,b00,a00); + } + /** * Get Pixel RGBA Seperate * diff --git a/src/context.js b/src/context.js index dad02c4..77b5a6b 100644 --- a/src/context.js +++ b/src/context.js @@ -562,7 +562,8 @@ class Context { for(var j=0; j Date: Wed, 12 Dec 2018 17:54:42 +0100 Subject: [PATCH 2/3] edge bug fix interpolated images --- src/bitmap.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/bitmap.js b/src/bitmap.js index 3c2d872..ce8cab0 100644 --- a/src/bitmap.js +++ b/src/bitmap.js @@ -139,9 +139,9 @@ class Bitmap { fracty = y-floory, i00 = this.calculateIndex(floorx, floory), - i01 = this.calculateIndex(floorx, floory+1), - i10 = this.calculateIndex(floorx+1, floory), - i11 = this.calculateIndex(floorx+1, floory+1), + i01 = this.calculateIndex(floorx, Math.min(this.height-1,floory+1)), + i10 = this.calculateIndex(Math.min(this.width-1,floorx+1), floory), + i11 = this.calculateIndex(Math.min(this.width-1,floorx+1), Math.min(this.height-1,floory+1)), r00 = this.data[i00], r01 = this.data[i01], r10 = this.data[i10], r11 = this.data[i11], g00 = this.data[i00+1], g01 = this.data[i01+1], g10 = this.data[i10+1], g11 = this.data[i11+1], From 825107ebcd811a6162956c7ffcda5d8cacf5fd13 Mon Sep 17 00:00:00 2001 From: Alexey Ermolaev Date: Tue, 29 Jan 2019 00:40:59 +0300 Subject: [PATCH 3/3] Use composite when drawing images Fixes bug when alpha from foreground image would overwrite alpha from background image --- src/context.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/context.js b/src/context.js index 77b5a6b..a2f14ce 100644 --- a/src/context.js +++ b/src/context.js @@ -563,7 +563,9 @@ class Context { var ty = j/dh; var ssy = sy+Math.floor(ty * sh); //var rgba = bitmap.getPixelRGBA(ssx,ssy); - var rgba = bitmap.getPixelRGBA_bilinear(sx+tx*sw,sy+ty*sh); + var fgRGBA = bitmap.getPixelRGBA_bilinear(sx+tx*sw,sy+ty*sh); + var bgRGBA = this.bitmap.getPixelRGBA_bilinear(dx+i, dy+j); + var rgba = this.composite(0, 0, bgRGBA, fgRGBA); this.bitmap.setPixelRGBA(dx+i, dy+j, rgba); } }