從我的 "慕課-手記" 中搬過來

上一篇，我實現了正多邊形的繪製，不過是用比較取巧的方式，僅能繪製出多邊形，而不知道任意頂點座標，沒法再在頂點外繪製圖片、文字...

支付寶芝麻信用分-分析中，有個正五邊形，各頂點外還有圖片與文字，想繪製這麼一個東西就需要知道各端點的座標，那麼利用圓上的三角函式可以解出.

• 分析並繪製正多邊形

根據三角函式：
y=cy + Rsin(360/n);
x=cx + Rcos(360/n);
所以各頂點的座標：

for (int i = 0; i < mN; i++) {
    bx = mCx + (float) (mR * Math.cos((DEGREES_UNIT * i) * Math.PI / 180));
    by = mCy + (float) (mR * Math.sin((DEGREES_UNIT * i) * Math.PI / 180));
    canvas.drawLine(mCx, mCy, bx, by, mPaint);
    points.add(new PointF(bx, by));
}
 

• 繪製文字

String text = "item-" + i;
float tw = mPaint.measureText(text);
float tx = rx - tw / 2;
System.out.println(mPaint.getFontMetricsInt().top);
System.out.println(mPaint.getFontMetricsInt().bottom);
float ty = ry + mPaint.getFontMetricsInt().bottom;

canvas.drawText(text, tx, ty, mPaint);
 

• 任意角度起始繪製圖形

canvas.rotate(mRotateDegrees, mCx, mCy);

如若不想旋轉文字，那麼上面的旋轉程式碼就放在：

canvas.save();
canvas.rotate(mRotateDegrees, mCx, mCy);
/*
省略 繪製 圖形程式碼
*/
canvas.restore();

如此一來，文字確實沒有被旋轉方向，但是文字出現的位置就不對了，
因繪製文字時，給定的座標，還是以預設繪製計算的

• 配合上面的圖形，在頂點處繪製水平顯示的文字

float rx, ry;
for (int i = 0; i < mN; i++) {
    p = points.get(i);
    rx = (float) (mCx + (p.x - mCx) * Math.cos(mRotateDegrees * Math.PI / 180) - (p.y - mCy)
            * Math.sin(mRotateDegrees * Math.PI / 180));
    ry = (float) (mCy + (p.x - mCx) * Math.sin(mRotateDegrees * Math.PI / 180) + (p.y - mCy)
            * Math.cos(mRotateDegrees * Math.PI / 180));

    String text = "item-" + i;
    float tw = mPaint.measureText(text);
    float tx = rx - tw / 2;
    System.out.println(mPaint.getFontMetricsInt().top);
    System.out.println(mPaint.getFontMetricsInt().bottom);
    float ty = ry + mPaint.getFontMetricsInt().bottom;

    //canvas.drawText(text, p.x, p.y, mPaint);
    canvas.drawText(text, tx, ty, mPaint);

}