1

I have an area (in this case, the Kitchen area with yellow borders), inside this area there are other shapes (numbered 1 and 2 light blue color) that divide the kitchen area into several parts (A, B, C). I need to calculate separately the area of each Green part.

enter image description here

I use a js worker to calculate the area of the blue and green zone(in total). But I need to somehow calculate these divided green zones separately. To calculate area I use getImageData() where I get pixels of the entire kitchen area. Then I loop the pixels and filter. Depending on the color of the pixel, I add it to the area result of either the blue or green zone.

Are there ready-made solutions in Fabric.js or Canvas for counting a part of a zone in another zone? If not, do you have any ideas how to implement it?

Here is a small piece of code with a pixel cycle:

calculateCoverage: function (options) {
    options.oversampling = options.oversampling || 1;

    var result = {},
        pixel = new app.Color(),
        oversamplingArea = Math.pow(options.oversampling, 2),
        pixelCoverage, value,
        i;

    for (i = 0; options.imageData && i < options.imageData.data.length; i += 4) {
        pixel.x = options.imageData.data[i];
        pixel.y = options.imageData.data[i + 1];
        pixel.z = options.imageData.data[i + 2];
        pixel.a = options.imageData.data[i + 3];

        // Apply binary filtering to the pixel value.
        pixel.filter(app.Color.BinaryFilter).filter(app.Color.BinaryFilterAlpha);

        // Ignore low alpha pixels.
        if (!pixel.a) {
            continue;
        }
        pixelCoverage = this.getPixelCoverageType(pixel, options.types);
        value = pixel.a / 255 / oversamplingArea;

        if (!result[pixelCoverage]) {
            result[pixelCoverage] = 0;
        }
        // Iterate pixel coverage data.
        result[pixelCoverage] += value;
    }
    return result;
}
Helder Sepulveda
  • 15,500
  • 4
  • 29
  • 56
Andrei
  • 11
  • 3
  • Does your solution produce a correct result? – danh Apr 28 '22 at 14:19
  • Ouch... calculating area by counting pixel should be a last resort, don't you have vector data of that drawing? – Helder Sepulveda Apr 28 '22 at 15:16
  • @danh sorry, what do you mean? with this method, I can calculate the entire area of either the green or blue zone. But not separately zone A or С for example – Andrei Apr 29 '22 at 08:45
  • @HelderSepulveda could you explain in more detail what you mean? what is vector data? And how can I use it to calculate the area of ​​something? Sorry, I'm just new to canvas and fabricjs. – Andrei Apr 29 '22 at 08:45
  • https://docs.qgis.org/2.8/en/docs/gentle_gis_introduction/vector_data.html ... How did you draw your kitchen are and the inside shapes? Your sample code only has the calculateCoverage – Helder Sepulveda Apr 29 '22 at 13:03
  • @Andrei, see if this idea for flood fill is inspiring: https://stackoverflow.com/a/36409006/294949 – danh Apr 29 '22 at 19:55
  • @danh Thank you very much! I was able to use exactly this method from your link and it worked. – Andrei May 12 '22 at 09:04

0 Answers0