0

I have an SVG image that is of size 200px x 300px but based on some conditions, I need to draw small circles that have a radius value of 30 whenever a condition fails and want this to be layered evenly (no overlapping), over a specified region of my image.

There could be multiple circles drawn but obviously don't want these to go off the image but instead wrapped around to the next line down when 5 circles have already been drawn on the first row of the image.

The same would then apply on row 2, once 5 circles of radius 30 are drawn, wrap to the next line.

I'm using snapsvg.io but unsure how to calculate the region of the image, where I want my circles drawn and unsure how to perform the wrap down to the next line.

halfer
  • 19,824
  • 17
  • 99
  • 186
tonyf
  • 34,479
  • 49
  • 157
  • 246
  • 1
    the modulus operator in javascript will be useful for wrapping. – Robert Longson May 31 '16 at 10:16
  • Have not used this operator - will take a look but still unsure how to work out the boundaries of a certain region of my image, to add my circles? – tonyf May 31 '16 at 10:20
  • You want your circles drawn from x = 0 + r to x = 200 - r don't you? – Robert Longson May 31 '16 at 10:23
  • That's correct but with no overlapping and only allowing up to 5 circles per row. – tonyf May 31 '16 at 10:25
  • If you draw them 2r apart they won't overlap. – Robert Longson May 31 '16 at 10:26
  • Just on a side note which I want to use for this requirement, is it possible to assign unique IDs to a text item, circle element using snapsvg as I would like to target these IDs within CSS? – tonyf May 31 '16 at 10:27
  • http://stackoverflow.com/questions/19642312/set-id-attribute-on-a-snap-svg-graphic – Robert Longson May 31 '16 at 10:30
  • Great thanks. Can you point me to another thread that you may know that may assist with this region calculation + circle drawing pls. – tonyf May 31 '16 at 10:39
  • No, that's too specialised. You need to write some code and we can help correct it if you get stuck. – Robert Longson May 31 '16 at 10:43
  • Understand but unsure how to retrieve dimensions of image region? – tonyf May 31 '16 at 11:07
  • It not at all clear what you mean by "retrieve dimensions of image region". You will need to explain that. Also 5x60 is 300. So how are you going to fit five circles horizontally if the width is 200? – Paul LeBeau May 31 '16 at 11:18
  • @PaulLeBeau - understand what you are saying but I also have a viewbox that has scaled the image larger and have actually managed to draw up five circles along the first row. To answer your question about "retrieve dimensions of image region", I guess from an SVG perspective, I need to calculate the area of the image, I believe it's length x width. – tonyf May 31 '16 at 12:24
  • What region though? What is it exactly that you are trying to get the dimensions of? Please create a working snippet or JSFiddle so we can see what you are trying to do. – Paul LeBeau May 31 '16 at 13:15
  • @RobertLongson - Hi Robert, just wondering if you are able to assist with my new query pls, see: http://stackoverflow.com/questions/37592540/clickable-link-on-a-svg-circle-text-or-line – tonyf Jun 02 '16 at 12:59

1 Answers1

0

Managed to work out how to achieve this by calculating the boundary of the region I wanted to target and also using javascript's modulo operator as suggested by Robert Longson.

By boundary, I manually determined each corner position of my image region that I wanted to use, i.e. left to right to bottom and to left again - basically width/height.

Further to this, I knew that I would only display 7 small circles from left to right across this image region and so when loop index % 7 = 0 then I reset my (x,y) coordinates to start on the next ine - 2r.

tonyf
  • 34,479
  • 49
  • 157
  • 246