0

我正在尝试绘制一个像谷歌支付点代码这样的斑点圆圈，System.Drawing.Graphics这里使用的是谷歌支付点代码的示例。

一个图像

我尝试使用此 C# 代码：

 private void DrawSpot(Graphics graphics)
    {
        var lineWidth = ImageSize * Constants.DotSizeScale / 6f;
        var pen = new System.Drawing.Pen(System.Drawing.Brushes.Blue, lineWidth);

        var colors = new System.Drawing.Brush[]
        {
            System.Drawing.Brushes.LightGoldenrodYellow,
            System.Drawing.Brushes.DeepSkyBlue,
            System.Drawing.Brushes.ForestGreen,
            System.Drawing.Brushes.Red
        };

        var randomColor = new Random();
        var randomBit = new Random();

        var tick_fraction = 0.1f;
        var theta = 0f;
        var radios = ImageSize;

        var Levels = 4;

        for (int j = 0; j < Levels; j++)
        {
            var dtheta = (float)(2 * Math.PI / (60 - j * j));
            var step = (j * ImageSize / 10);
            radios = 300 - step;
            float rx1 = radios * (1 - tick_fraction);
            float ry1 = radios * (1 - tick_fraction);

            if (j % 2 == 0)
            {
                theta = 0f;
            }
            else
            {
                theta = dtheta * 1.1f;
            }

            for (int i = 0; i < (60 - j * j); i++)
            {
                float x1 = (float)(step + radios + radios * Math.Cos(theta));
                float y1 = (float)(step + radios + radios * Math.Sin(theta));

                // just a way to get different colors.
                if (j == 0)
                {
                    if (i % 2 == 0)
                    {
                        pen.Brush = colors[randomColor.Next(0, 3)];
                    }
                    else
                    {
                        pen.Brush = System.Drawing.Brushes.LightGray;
                    }
                }
                else
                {
                    if (randomBit.Next(0, 2) == 0)
                    {
                        pen.Brush = System.Drawing.Brushes.LightGray;
                    }
                    else
                    {
                        pen.Brush = colors[randomColor.Next(0, 3)];
                    }
                }
                graphics.DrawEllipse(pen, x1, y1, lineWidth, lineWidth);
                theta += dtheta;
            }
        }
    }

我得到了这个结果： 在此处输入图像描述

我正在寻求帮助以获得完全相同的点排列，并且我正在尝试使常量值可变并与我想在每个部分绘制的点数相关。（这里的部分是 1/4）。我正在寻找一个使用圆半径和级别数以及点数的公式，在 google spot 中有 7 个级别。（水平是一个带有斑点的完整圆圈）٫ 此外，您可以看到斑点呈对角线排列。

4

1 回答 1

1

如果您没有格式规范，最简单的选择可能是仅测量示例图像。即为每个级别创建一个半径和点数对的列表。

为了使您的描述分辨率独立，您可以以某种方式标准化半径，例如通过将半径除以斑点的大小。

要使用所述列表，您需要更改代码以从点数计算增量角度，而不是使用固定的dtheta. 就像是

var myList = new List<(float Radius, int SpotCount)>(){
    (4.2, 42)
    ...
    ...
};
...
var (radiusNormalized, spotCount) = myList[level];
var theta = Math.Pi * 2 / spotCount;
var radiusPixels = radiusNormalized * SpotSizeInPixels;
于 2021-09-14T12:58:09.857 回答