如何计算要用于圆的SVG图像的区域? [英] How to calculate a region of an SVG image to be used for circles?

问题描述

我有一个SVG图像，尺寸为200px x 300px，但是根据某些条件，每当条件失败时，我都需要绘制一个半径值为30的小圆圈，并希望将其均匀地分层(不重叠)，在我图像的指定区域上.

可能绘制了多个圆圈，但是显然不希望它们脱离图像，而是在图像的第一行上已经绘制了5个圆圈时，环绕到下一行.

然后在第2行上应用相同的方法，一旦绘制了半径为30的5个圆，则换行到下一行.

我正在使用snapsvg.io，但不确定如何计算图像区域，我想在其中绘制圆并不确定如何进行下一行的换行.

解决方案

设法计算出要实现的目标，方法是计算要定位的区域的边界，并使用罗伯特·朗森(Robert Longson)建议的javascript模运算符. >

通过边界，我手动确定了我要使用的图像区域的每个角位置，即从左到右再到底部，再到左-基本上是宽度/高度.

此外，我知道我只会在该图像区域上从左到右显示7个小圆圈，因此当循环索引％7 = 0时，我将重置(x，y)坐标以开始下一个ine -2r.

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.

解决方案

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.

这篇关于如何计算要用于圆的SVG图像的区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！