当前位置：文江博客话题详情

JavaScript（SVG 绘图）：定位某个区域中的 x 点数量

发布于 2024-08-30 01:44:12 字数 885 浏览 6 评论 0原文

我正在使用 http://raphaeljs.com/ 尝试绘制多个小圆圈。我遇到的问题是画布具有固定宽度，如果我想绘制 1000 个圆圈，它们不会包裹到“新线”上（因为您必须指定每个圆圈的 xy 位置）。

例如我想要这个：

................................................ ....

看起来像这样

........................................................

： .........

目前我正在这样做：

for ( var i = 0; i < 1000; i++ ) {
        var multiplier = i*3;
        if ( i <= 50 ) {
            paper.circle((2*multiplier),2,2);
        } else if ( i >= 51 && i <= 101 ) {
            paper.circle((2*multiplier) - 304,8,2);
        } else if ( i >= 152 && i <= 202 ) {
            paper.circle((2*multiplier) - 910,14,2);
        }
    }

供参考：circle(x co-ord, y co-ord, radius)

这很混乱。我必须为我想要的每个新行添加一个 if 语句。一定是更好的方法吗..？

原文

I'm using http://raphaeljs.com/ to try and draw multiple small circles. The problem I'm having is that the canvas has a fixed width, and if I want to draw, say, 1000 circles, they don't wrap onto a 'new line' (because you have to specify the xy position of each circle).

E.g.
I want this:

..................................................

to look like this:

............................

......................

At the moment I'm doing this:

for ( var i = 0; i < 1000; i++ ) {
        var multiplier = i*3;
        if ( i <= 50 ) {
            paper.circle((2*multiplier),2,2);
        } else if ( i >= 51 && i <= 101 ) {
            paper.circle((2*multiplier) - 304,8,2);
        } else if ( i >= 152 && i <= 202 ) {
            paper.circle((2*multiplier) - 910,14,2);
        }
    }

For reference: circle(x co-ord, y co-ord, radius)

This is messy. I have to add an if statement for every new line I want. Must be a better way of doing it..?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸 2024-09-06 01:44:12

您需要模。

我不确定你的边界框到底是什么，但类似：

var width = 300;
for (var i = 0; i < 1000; i++) {
    var multiplier = i*3;
    var x = 2 * multiplier * i % width;
    var y = 2 + 6 * (i + 50) / 100;
}

You want modulo.

I'm not sure exactly what your bounding box is, but something like:

var width = 300;
for (var i = 0; i < 1000; i++) {
    var multiplier = i*3;
    var x = 2 * multiplier * i % width;
    var y = 2 + 6 * (i + 50) / 100;
}

回复收藏 0 原文

~没有更多了~