javascript - Automatic arrangement of images/rectangles on a canvas with overlapping -


i looking randomly arrange number of images (or simplicity, rectangles) of given sizes on canvas. want these images/rectangles able overlap (edges, sides etc) i.e. don't want image covering image entirely. these images/rectangles parallel x , y axes. also, want images fit canvas area no unused white space.

i came across bin packing, quadtree etc. none of these allow overlaps. have idea how might implemented? or point me towards right direction?

thank :)

assuming conditions specified:

  • no unused white space
  • axis aligned orientation
  • allow margin overlapping
  • never cover whole image

we can use bin packing or quadtree algorithms (or whatever), first want manipulate data set.

  1. loop through list of image dimensions
    • decide if image should allowed overlap (for tuning desired output)
    • increase dimension data (within margin) used in preferred algorithm(bin-pack/quadtree) (keeping original data well)
  2. process data chosen algorithm
  3. sort z order/render order (sort random, sort area, etc)
  4. render images using original dimension data - sure use origin points @ center of area, not corners

essentially, decide overlap of given image before set arranged.

i can think of 2 limitations:

  1. the minimum image size based on largest overlap allow.
    • this solved sorting largest smallest rendering order.
  2. depending on how sort images , size of canvas, images may not fill canvas - there may gaps left bin packing.
    • this may solvable more complex algorithms - haven't used them enough know.
    • you may able scale images fill area - again, don't know enough area.

Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -