1

I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.

The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.

My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?

(Using fabricjs 3.6.3)

Sample of outline around drawn area of objects

Scenario with group of objects where an object is in landscape position

arius
  • 11
  • 3
  • Do you have the coordinates of the rectangles? (x,y,width,height) Or are they already drawn to canvas and you need to find and outline them? – Michael Radionov Apr 09 '20 at 15:08
  • They are drawn but each rectangle is represented by a JS object so I can get the width, height and can also get the top left corner relative to the canvas area. – arius Apr 09 '20 at 17:37
  • Is it correct to assume that the rectangular objects will always have the same size and they will be organized in rows and columns like a table? – Michael Radionov Apr 11 '20 at 08:16
  • For the majority of my use cases yes. There is a scenario where 1 or 2 rectangles could be placed in a landscape position because of lack of space. I added a second sample image to show a possible layout (sorry, I should have added that as a a first sample to begin with). I 've been thinking of getting the canvas output as a PNG and then using a method like the one described here with the marching ants algo [link](https://stackoverflow.com/questions/28207232/draw-border-around-nontransparent-part-of-image-on-canvas) but also adding a bit of empty space between the border. – arius Apr 11 '20 at 16:58

0 Answers0