feat: add setBlendedPixel for draw* functions

src/draw/__tests__/drawLineOnImage.test.ts

@@ -20,6 +20,24 @@ test('RGB image', () => {
   expect(result).not.toBe(image);
 });
 
+test('RGBA image with different alphas', () => {
+  const image = testUtils.createRgbaImage([
+    [100, 150, 200, 150, 100, 150, 0, 150],
+    [100, 200, 5, 150, 3, 200, 0, 150],
+    [150, 200, 255, 150, 6, 150, 0, 150],
+  ]);
+
+  const from = { row: 0, column: 0 };
+  const to = { row: 1, column: 1 };
+  const result = image.drawLine(from, to, { strokeColor: [255, 0, 0, 50] });
+  expect(result).toMatchImageData([
+    [145, 106, 141, 170, 100, 150, 0, 150],
+    [100, 200, 5, 150, 76, 141, 0, 170],
+    [150, 200, 255, 150, 6, 150, 0, 150],
+  ]);
+  expect(result).not.toBe(image);
+});
+
 test('out parameter set to self', () => {
   const image = testUtils.createRgbImage([
     [100, 150, 200, 100, 150, 0],

src/draw/drawCircleOnImage.ts

@@ -4,6 +4,7 @@
 import { Point } from '../utils/geometry/points';
 import { getDefaultColor } from '../utils/getDefaultColor';
 import { getOutputImage } from '../utils/getOutputImage';
+import { setBlendedVisiblePixel } from '../utils/setBlendedVisiblePixel';
 import checkProcessable from '../utils/validators/checkProcessable';
 import { validateColor } from '../utils/validators/validators';
 
@@ -60,22 +61,24 @@
   radius = Math.round(radius);
 
   if (radius === 0) {
-    newImage.setVisiblePixel(center.column, center.row, color);
+    setBlendedVisiblePixel(newImage, center.column, center.row, { color });
     return newImage;
   }
 
   if (!fill) {
     circle(center.column, center.row, radius, (column: number, row: number) => {
-      newImage.setVisiblePixel(column, row, color);
+      setBlendedVisiblePixel(newImage, column, row, { color });
     });
   } else {
     if (radius === 1) {
-      newImage.setVisiblePixel(center.column, center.row, fill);
+      setBlendedVisiblePixel(newImage, center.column, center.row, {
+        color: fill,
+      });
     }
     circle(center.column, center.row, radius, (column: number, row: number) => {
-      newImage.setVisiblePixel(column, row, color);
+      setBlendedVisiblePixel(newImage, column, row, { color });
 
       //todo: fill is not optimal we can fill symmetrically
       if (column - 1 > center.column) {
         newImage.drawLine(
           { row, column: column - 1 },

src/draw/drawLineOnImage.ts

@@ -4,6 +4,7 @@ import { Image } from '../Image';
 import { Point } from '../utils/geometry/points';
 import { getDefaultColor } from '../utils/getDefaultColor';
 import { getOutputImage } from '../utils/getOutputImage';
+import { setBlendedVisiblePixel } from '../utils/setBlendedVisiblePixel';
 import checkProcessable from '../utils/validators/checkProcessable';
 import { validateColor } from '../utils/validators/validators';
 
@@ -56,7 +57,7 @@ export function drawLineOnImage(
     Math.round(origin.column + to.column),
     Math.round(origin.row + to.row),
     (column: number, row: number) => {
-      newImage.setVisiblePixel(column, row, color);
+      setBlendedVisiblePixel(newImage, column, row, { color });
     },
   );
   return newImage;

src/draw/drawPoints.ts

@@ -3,6 +3,7 @@ import { Mask } from '../Mask';
 import { Point } from '../utils/geometry/points';
 import { getDefaultColor } from '../utils/getDefaultColor';
 import { getOutputImage, maskToOutputMask } from '../utils/getOutputImage';
+import { setBlendedVisiblePixel } from '../utils/setBlendedVisiblePixel';
 import checkProcessable from '../utils/validators/checkProcessable';
 import { validateColor } from '../utils/validators/validators';
 
@@ -61,10 +62,11 @@ export function drawPoints(
   });
 
   for (const point of points) {
-    newImage.setVisiblePixel(
+    setBlendedVisiblePixel(
+      newImage,
       Math.round(origin.column + point.column),
       Math.round(origin.row + point.row),
-      color,
+      { color },
     );
   }
 

src/draw/drawPolygonOnImage.ts

@@ -4,6 +4,7 @@ import { Image } from '../Image';
 import { arrayPointsToObjects } from '../utils/arrayPointsToObjects';
 import { Point } from '../utils/geometry/points';
 import { getOutputImage } from '../utils/getOutputImage';
+import { setBlendedVisiblePixel } from '../utils/setBlendedVisiblePixel';
 import checkProcessable from '../utils/validators/checkProcessable';
 import { validateColor } from '../utils/validators/validators';
 
@@ -61,10 +62,11 @@ export function drawPolygonOnImage(
     for (let row = 0; row < newImage.height; row++) {
       for (let column = 0; column < newImage.width; column++) {
         if (robustPointInPolygon(arrayPoints, [column, row]) === -1) {
-          newImage.setPixel(
+          setBlendedVisiblePixel(
+            newImage,
             Math.round(origin.column) + column,
             Math.round(origin.row) + row,
-            fillColor,
+            { color: fillColor },
           );
         }
       }

src/draw/drawRectangle.ts

@@ -3,6 +3,7 @@ import { Mask } from '../Mask';
 import { Point } from '../utils/geometry/points';
 import { getDefaultColor } from '../utils/getDefaultColor';
 import { getOutputImage, maskToOutputMask } from '../utils/getOutputImage';
+import { setBlendedVisiblePixel } from '../utils/setBlendedVisiblePixel';
 import checkProcessable from '../utils/validators/checkProcessable';
 
 export interface DrawRectangleOptions<OutType> {
@@ -82,16 +83,24 @@ export function drawRectangle(
       currentColumn < column + width;
       currentColumn++
     ) {
-      newImage.setVisiblePixel(currentColumn, row, strokeColor);
-      newImage.setVisiblePixel(currentColumn, row + height - 1, strokeColor);
+      setBlendedVisiblePixel(newImage, currentColumn, row, {
+        color: strokeColor,
+      });
+      setBlendedVisiblePixel(newImage, currentColumn, row + height - 1, {
+        color: strokeColor,
+      });
     }
     for (
       let currentRow = row + 1;
       currentRow < row + height - 1;
       currentRow++
     ) {
-      newImage.setVisiblePixel(column, currentRow, strokeColor);
-      newImage.setVisiblePixel(column + width - 1, currentRow, strokeColor);
+      setBlendedVisiblePixel(newImage, column, currentRow, {
+        color: strokeColor,
+      });
+      setBlendedVisiblePixel(newImage, column + width - 1, currentRow, {
+        color: strokeColor,
+      });
     }
   }
   if (fillColor !== 'none') {
@@ -105,8 +114,12 @@ export function drawRectangle(
         currentColumn < column + width - 1;
         currentColumn++
       ) {
-        newImage.setVisiblePixel(currentColumn, currentRow, fillColor);
-        newImage.setVisiblePixel(currentColumn, currentRow, fillColor);
+        /* setBlendedVisiblePixel(newImage, currentColumn, currentRow, {
+          color: fillColor,
+        });*/
+        setBlendedVisiblePixel(newImage, currentColumn, currentRow, {
+          color: fillColor,
+        });
       }
     }
   }

src/utils/__tests__/setBlendedVisiblePixel.test.ts

@@ -0,0 +1,63 @@
+import { setBlendedVisiblePixel } from '../setBlendedVisiblePixel';
+
+test('GREYA image, default options', () => {
+  const image = testUtils.createGreyaImage([
+    [50, 255],
+    [20, 30],
+  ]);
+  setBlendedVisiblePixel(image, 0, 1);
+  expect(image).toMatchImageData([
+    [50, 255],
+    [0, 255],
+  ]);
+});
+
+test('GREYA image: set pixel out of bounds', () => {
+  const image = testUtils.createGreyaImage([
+    [50, 255, 1, 2, 3, 4],
+    [20, 30, 5, 6, 7, 8],
+    [1, 2, 3, 4, 5, 6],
+  ]);
+  setBlendedVisiblePixel(image, 0, 5, { color: [40, 40] });
+  expect(image).toMatchImageData([
+    [50, 255, 1, 2, 3, 4],
+    [20, 30, 5, 6, 7, 8],
+    [1, 2, 3, 4, 5, 6],
+  ]);
+});
+
+test('RGBA image: set pixel out of bounds', () => {
+  const image = testUtils.createGreyaImage([
+    [50, 255, 1, 200, 2, 3, 4, 200],
+    [20, 30, 5, 200, 6, 7, 8, 200],
+    [1, 2, 3, 200, 4, 5, 6, 200],
+  ]);
+  setBlendedVisiblePixel(image, 0, 5, { color: [40, 40, 40, 40] });
+  expect(image).toMatchImageData([
+    [50, 255, 1, 200, 2, 3, 4, 200],
+    [20, 30, 5, 200, 6, 7, 8, 200],
+    [1, 2, 3, 200, 4, 5, 6, 200],
+  ]);
+});
+
+test('GREYA image: alpha different from 255', () => {
+  const image = testUtils.createGreyaImage([[50, 64]]);
+  setBlendedVisiblePixel(image, 0, 0, { color: [100, 128] });
+  const alpha = 128 + 64 * (1 - 128 / 255);
+  const component = (100 * 128 + 50 * 64 * (1 - 128 / 255)) / alpha;
+  expect(image).toMatchImageData([[component, alpha]]);
+});
+
+test('asymetrical test', () => {
+  const image = testUtils.createGreyaImage([
+    [50, 255, 1, 2, 3, 4],
+    [20, 30, 5, 6, 7, 8],
+    [1, 2, 3, 4, 5, 6],
+  ]);
+  setBlendedVisiblePixel(image, 2, 0, { color: [0, 125] });
+  expect(image).toMatchImageData([
+    [50, 255, 1, 2, 0, 127],
+    [20, 30, 5, 6, 7, 8],
+    [1, 2, 3, 4, 5, 6],
+  ]);
+});

src/utils/setBlendedVisiblePixel.ts

@@ -0,0 +1,67 @@
+import { Image } from '../Image';
+import { Mask } from '../Mask';
+
+import { getDefaultColor } from './getDefaultColor';
+import { assert } from './validators/assert';
+
+export interface SetBlendedVisiblePixelOptions {
+  /**
+   * Color with which to blend the image pixel.
+   * @default `'Opaque black'`.
+   */
+  color?: number[];
+}
+
+/**
+ * Blend the given pixel with the pixel at the specified location in the image if the pixel is in image's bounds.
+ * @param image - The image with which to blend.
+ * @param column - Column of the target pixel.
+ * @param row - Row of the target pixel.
+ * @param options - Set blended pixel options.
+ */
+export function setBlendedVisiblePixel(
+  image: Image | Mask,
+  column: number,
+  row: number,
+  options: SetBlendedVisiblePixelOptions = {},
+) {
+  const { color = getDefaultColor(image) } = options;
+
+  if (!image.alpha) {
+    image.setVisiblePixel(column, row, color);
+  } else {
+    assert(image instanceof Image);
+
+    const sourceAlpha = color.at(-1) as number;
+
+    if (sourceAlpha === image.maxValue) {
+      image.setVisiblePixel(column, row, color);
+      return;
+    }
+
+    const targetAlpha = image.getValue(column, row, image.channels - 1);
+
+    const newAlpha =
+      sourceAlpha + targetAlpha * (1 - sourceAlpha / image.maxValue);
+    if (column >= 0 && column < image.width && row >= 0 && row < image.height) {
+      image.setValue(column, row, image.channels - 1, newAlpha);
+    }
+    for (let component = 0; component < image.components; component++) {
+      const sourceComponent = color[component];
+      const targetComponent = image.getValue(column, row, component);
+
+      const newComponent =
+        (sourceComponent * sourceAlpha +
+          targetComponent * targetAlpha * (1 - sourceAlpha / image.maxValue)) /
+        newAlpha;
+      if (
+        column >= 0 &&
+        column < image.width &&
+        row >= 0 &&
+        row < image.height
+      ) {
+        image.setValue(column, row, component, newComponent);
+      }
+    }
+  }
+}