在 Javascript 中生成黄斑网格

Question

如何在Javascript中生成黄斑网格？在 Macular 网格中包含一个 no.of 圆圈，其形状格式应为 'V'。

创建 'V' 形状的虚线圆圈？让我们知道如何解决这个问题？

要识别黄斑网格形状，请参考下面link我添加了屏幕截图。

https://www.dropbox.com/s/0uzfyuzednuldi4/Screen%20Shot%202015-01-27%20at%208.04.47%20PM.png?dl=0

Answer 1

我从未听说过这种图表类型，也找不到相关信息。如果这是从数学上推导出来的，那么我很想知道它是如何工作的。

我遵守的规则：

环以线性方式减少它们的点数。 20、16、12、8。
每个交替环偏移迭代角度的 1/2。例如，如果它们在交替行中每隔 20 度，那么它将偏移 10 度。
该图似乎 space 环不均匀，但我认为这是意图。

所以这是我的尝试： http://jsfiddle.net/lannymcnie/sbmaLed1/

主要功能允许半径（外圈）
可以指定外圈圈数，内圈圈数
然后您可以指定退化（抱歉命名不当，我的初始函数反向工作）。这应该是增加每个环的点数。您需要 4 个才能获得效果。不过，您可以改变它以获得一些有趣的效果 (http://jsfiddle.net/lannymcnie/sbmaLed1/3/)

这是主要功能：

function drawMac(radius, start, end, degenerate) {
    var g = new createjs.Graphics().f("#f00").dc(0,0,5);
    for (var i=start, l=end; i<=l; i+=degenerate) {
        var segments = i; // Easier to read than "i"
        var d = segments/end * radius;
        var counter = segments%(degenerate*2) == 0;
        var offset = Math.PI*2 * 1/segments;
        for (var j=0; j<segments; j++) {
            var angle = Math.PI*2 * (j/segments);
            var s = new createjs.Shape(g);
            s.x = Math.sin(angle) * d;
            s.y = Math.cos(angle) * d;
            container.addChild(s);
        }
    }
    container.rotation = 45; // Cuz it looks cooler
}

希望这对您有所帮助。解决这个问题很有趣。

[编辑]

我做了一些小的调整，让它更接近了：

向外发展（见 Math.pow 补充）
向中间添加了轻微的旋转趋势（参见角度中的 +0.002）

这是最终函数：

function drawMac(radius, start, end, degenerate) {
    var g = new createjs.Graphics().f("#f00").dc(0,0,5);
    for (var i=start, l=end; i<=l; i+=degenerate) {
        var segments = i; // Easier to read than "i"
        var d = Math.pow(segments/end, 0.75) * radius;
        var counter = segments%(degenerate*2) == 0;
        var offset = Math.PI*2 * 1/segments;
        for (var j=0; j<segments; j++) {
            var angle = Math.PI*2 * (j/segments+i*0.002);
            var s = new createjs.Shape(g);
            s.x = Math.sin(angle) * d;
            s.y = Math.cos(angle) * d;
            container.addChild(s);
        }
    }
    container.rotation = 45; // Cuz it looks cooler
}

这使其匹配率约为 98%。我将结果导入 Photoshop，并对生成的结果进行了一些轻微的旋转和缩放，这是我的结果覆盖在原始结果上（我的是深红色）。 http://screens.gskinner.com/Screen%20Shot%202015-01-29%20at%209.55.06%20AM.png

这里是更新后的 fiddle 最终结果。 http://jsfiddle.net/lannymcnie/sbmaLed1/6/

Answer 2

MacularGrid B 的输出：

 jsfiddle.net/jyoshna/tcgefwen/2

在 Javascript 中生成黄斑网格

Generate Macular Grid in Javascript

javascript

geometry

automatic-ref-counting

easeljs

[编辑]