0

I am using Konva.js to render some colourful boxes.

I have a Stage with some set size and regions within that Stage, bound by points (e.g. rectangles, but they can be any polygons).

I then need to add some number of smaller rects inside this area such that they look nice and are uniformly distributed.

E.g.

// these numbers are an example only, irrelevant
let width = 500 * 1.936402653140851;
let height = 500;
// setup stage, boilerplate
var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

// region layer - boundaries
var regionLayer = new Konva.Layer({
    scale: {x: width/4963, y: height/2563} // these numbers are an example only, irrelevant
    });
    stage.add(regionLayer);

// for this example, a single region, L-shaped on it's side
   let box = new Konva.Line({
                  name: 'region-1',
                  points: [1067, 681,
                            3337, 681, 
                            3337, 987, 
                            3037, 987,
                            3037, 787,
                            1067, 787],
                  closed: true,
                  fill: 'blue',
                                    opacity: 0.5
              });
    regionLayer.add(box);
    
    regionLayer.draw();


// layer to draw rects in 
    let rectsLayer = new Konva.Layer({
    scale: {x: width/4963, y: height/2563} // these numbers are an example only, irrelevant
    });

     
     for (let i = 0; i < 90; i++) { // e.g. some number up to X
     let rect = new Konva.Rect({
        width: 20,
        height: 20,
        fill: 'red',
        x: 1067 + 40 * (i + 1),
        y: 681  + 20
     });
     rectsLayer.add(rect);
     
     }
    stage.add(rectsLayer);
    rectsLayer.draw();

The result of the above is something like this

screenshot

What I'd like to have, is those boxes filling free area within the boundaries of my polygon only.

I read a whole heap about Delauney triangulation, Voronoi diagrams and sequencing for normal distribution to make it happen, but sadly I came up with zilch on practical approach of doing this.

https://jsfiddle.net/x4aksz1y/2/

zaitsman
  • 8,984
  • 6
  • 47
  • 79
  • Its a bit unclear from your question, but are you trying to fill the lilac shape with the red boxes as a pattern ? Making a pattern with a repeating block is easy and there are various ways to achieve a fill or fill effect. You can also go in to compositing as in the answer to [this question](https://stackoverflow.com/questions/36097859/how-to-add-a-texture-to-a-konva-image-object-in-konvajs). Let me know and I'll provide some code. – Vanquished Wombat Dec 05 '20 at 10:23
  • No, i have some number of red shapes in my db, and i need to visually render them within this shape such that they do not get outside the boundaries and are uniformly distributed. I do not need to fill it. – zaitsman Dec 05 '20 at 11:18
  • Could you provide a picture of what you need to achieve. I want to help but I don't get what you need to produce. – Vanquished Wombat Dec 05 '20 at 11:38
  • I will draw something tomorrow, in the meantime the top image in this article more or less is on point: http://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/ – zaitsman Dec 05 '20 at 11:40

0 Answers0