在 Javascript 中生成黄斑网格

Generate Macular Grid in Javascript

本文关键字：黄斑 网格 Javascript      更新时间：2023-09-26

如何在Javascript中生成黄斑网格？在黄斑网格中包含一个圆圈，应该采用"V"形格式。

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

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

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

我从未听说过这种图形类型，也找不到信息。如果这是数学推导的，那么我有兴趣了解它是如何工作的。

我遵守的规则：

  1. 环以线性方式减少其点数。 20， 16， 12， 8.
  2. 每个交替环偏移迭代角度的 1/2。例如，如果它们在交替行中每 20 度，则偏移 10 度。
  3. 该图似乎没有均匀地间隔环，但我认为这就是意图。

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

  1. 主功能允许半径（外圈）
  2. 您可以指定外环和内环中的圆数
  3. 然后您可以指定退化（抱歉命名不佳，我的初始函数反向工作）。这应该是增加每个环的点数。你需要 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
}

希望这有帮助。弄清楚这一点很有趣。

[编辑]

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

  1. 向外趋势（见Math.pow补充）
  2. 增加了向中间的轻微旋转趋势（参见角度中的 +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/

MacularGrid B 的输出：

 jsfiddle.net/jyoshna/tcgefwen/2
相关文章：