在圆形公式上绘制矩形

Question

我正在尝试在一个圆圈上绘制音频文件的频谱。像这样：

所以在圆圈上，我只想像您在图像上看到的那样绘制矩形。

我有这个代码：

public void onRender(Canvas canvas, FFTData data, Rect rect) {
    canvas.drawCircle(rect.width()/2, rect.height()/2, 200, mPaint);

    for (int i = 0; i < data.bytes.length / mDivisions; i++) {
        byte rfk = data.bytes[mDivisions * i];
        byte ifk = data.bytes[mDivisions * i + 1];
        float magnitude = (rfk * rfk + ifk * ifk);
        int dbValue = (int) (10 * Math.log10(magnitude));


    }
}

其中 FFTData 是 Android 提供给我的快速傅立叶变换数据。现在在我的 dbValue 中，我得到了信号的强度。 mDivisions 是我想要多少条。目前设置为16，因为我不知道我可以在圆圈上设置多少。

我不知道如何在圆线上绘制以他的中心为中心的矩形...所以我想要一个高度基于 dbValue 的矩形，以便获得高和低矩形。并且中心必须放在我的圆线上。

有人可以帮我解决这个数学公式吗？

Answer 1

在圆的所有 360 度上运行一个循环（以所需的步长），并将每个点的极坐标（这个角度和圆的半径）转换为笛卡尔坐标，例如，如 here 所述。通过这种方式，您可以获得矩形中心的位置。

Translate坐标系，使原点在圆线上的所需点，然后rotate在该点的圆角。

或者，您可以通过以角度 +- 一些偏移量和半径 +- 一些偏移量（与要绘制的值成比例）来构建梯形。它将具有较短的内边缘和较长的外边缘。如果并排绘制这样的梯形可能会更好看。

Answer 2

我认为你所需要的只是一支铅笔和一张纸，还有一点数学知识，还有一些空闲时间来玩 :-)

  public class MainActivity extends Activity {
  ImageView drawingImageView;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    drawingImageView = (ImageView) this.findViewById(R.id.DrawingImageView);

                Paint paint;
                paint = new Paint();
                paint.setColor(Color.GREEN);
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(16);

               final  Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
                    .getDefaultDisplay().getWidth(), (int) getWindowManager()
                    .getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
                Canvas canvas = new Canvas(bitmap);

                int centerX =400;
                int centerY =400;
                int R = 200;

                canvas.drawCircle(centerX, centerY, R, paint);

                int h = 100;

                paint.setColor(Color.RED);
                Path p = new Path();
                p.moveTo(centerX + R - h/2, centerY);
                p.lineTo(centerX + R + h/2, centerY);
                canvas.drawPath(p, paint);

                p = mySpectrumDrawer(centerX,centerY,R,h,15);
                canvas.drawPath(p, paint);

                h = 50;
                p = mySpectrumDrawer(centerX,centerY,R,h,30);
                canvas.drawPath(p, paint);
                h = 60;   
                p = mySpectrumDrawer(centerX,centerY,R,h,60);
                canvas.drawPath(p, paint);
                h = 80;
                p = mySpectrumDrawer(centerX,centerY,R,h,90);
                canvas.drawPath(p, paint);

                drawingImageView.setImageBitmap(bitmap);

    } 

  private Path mySpectrumDrawer(int centerX, int centerY,int R,int height, int angel){

        Path p = new Path();

        int dX = (int) (R*(Math.cos(Math.toRadians(angel))));
        int dY = (int) (R*(Math.sin(Math.toRadians(angel))));

        int dhx = (int) (height/2*(Math.cos(Math.toRadians(angel))));
        int dhy = (int) (height/2*(Math.sin(Math.toRadians(angel))));

        p.moveTo(centerX + dX - dhx , centerY - dY + dhy);
        p.lineTo(centerX + dX + dhx , centerY - dY - dhy);

        return p;
  }
}