[编辑]

Question

如何在Javascript中生成黄斑网格？在Macular网格中包含一个应该在＆＃39; V＆＃39;形状格式。

在＆＃39; V＆＃39;中创建虚线圆圈形状？让我们知道如何解决这个问题？

要识别黄金网格形状，请参阅以下链接我添加了屏幕截图。

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度。
图表似乎没有均匀地分隔戒指，但我认为这是意图。

所以这是我的尝试： 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

这是最终结果的更新小提琴。 http://jsfiddle.net/lannymcnie/sbmaLed1/6/

Answer 2

MacularGrid B的输出：

 jsfiddle.net/jyoshna/tcgefwen/2

在Javascript中生成黄色网格

2 个答案:

[编辑]