利用canvas画chrome logo

上一篇写了几个简单的lodingview，这篇详细的写下如何使用canvas 画chrome logo，只需要四步。看图就明白
代码下载

chromelogo.png chromelogo1.png

几乎到达了预计的效果。具体的步骤如下
1先画三个120度的扇形

 private void drawSector(Canvas canvas)//将圆分成三个扇形
    {
        RectF rectF = new RectF(mPadding, mPadding,
                mWidth - mPadding, mWidth - mPadding);
        canvas.drawArc(rectF, -30, 120
                , true, mPaintYellow);
        canvas.drawArc(rectF, 90, 120
                , true, mPaintGreen);
        canvas.drawArc(rectF, 210, 120
                , true, mPaintRed);
    }

2第二步画三个等边三角形，正好是内切三角形和扇形交接处的阴影效果

private void drawTriangle(Canvas canvas) {//画三个等边三角形组成的大三角形正好是内切三角形
        Point point1 = getPoint((mWidth / 2 - mPadding) / 2, 90);
        Point point2 = getPoint((mWidth / 2 - mPadding), 150);
        Point point3 = getPoint((mWidth / 2 - mPadding) / 2, 210);
        Point point4 = getPoint((mWidth / 2 - mPadding), 270);
        Point point5 = getPoint((mWidth / 2 - mPadding) / 2, 330);
        Point point6 = getPoint((mWidth / 2 - mPadding), 30);
        Path pathYellow = new Path();
        pathYellow.moveTo(mWidth / 2 - point1.x, mWidth / 2 - point1.y);
        pathYellow.lineTo(mWidth / 2 - point2.x, mWidth / 2 - point2.y);
        pathYellow.lineTo(mWidth / 2 - point3.x, mWidth / 2 - point3.y);
        pathYellow.close();
        Path pathGreen = new Path();
        pathGreen.moveTo(mWidth / 2 - point3.x, mWidth / 2 - point3.y);
        pathGreen.lineTo(mWidth / 2 - point4.x, mWidth / 2 - point4.y);
        pathGreen.lineTo(mWidth / 2 - point5.x, mWidth / 2 - point5.y);
        pathGreen.close();
        Path pathRed = new Path();
        pathRed.moveTo(mWidth / 2 - point5.x, mWidth / 2 - point5.y);
        pathRed.lineTo(mWidth / 2 - point6.x, mWidth / 2 - point6.y);
        pathRed.lineTo(mWidth / 2 - point1.x, mWidth / 2 - point1.y);
        pathRed.close();
        canvas.drawPath(pathGreen, mPaintGreen);
        canvas.drawPath(pathRed, mPaintRed);
        canvas.drawPath(pathYellow, mPaintYellow);

        //扇形交接处隐形效果
        for (int i = 0; i < Math.abs(mWidth / 2 - point2.y) / 2f; i++) {

            int fraction = 35 - i;
            if (fraction > 0) {
                lineColor = (Integer) evaluator.evaluate(fraction / 100f, startYellowColor, endColor);
                mPaintLine.setColor(lineColor);
            } else {
                mPaintLine.setColor(Color.argb(0, 0, 0, 0));
            }

            canvas.drawLine(mWidth / 2, point2.y + i,
                    mWidth / 2 - point2.x * 8f / 10f, mWidth / 2 - point2.y
                    , mPaintLine);

        }


        for (int i = 0; i < Math.abs(point3.x) / 2f; i++) {
            int fraction = 35 - i;
            if (fraction > 0) {
                lineColor = (Integer) evaluator.evaluate(fraction / 100f, startGreenColor, endColor);
                mPaintLine.setColor(lineColor);
            } else

                mPaintLine.setColor(Color.argb(0, 0, 0, 0));

            canvas.drawLine(mWidth / 2 - point3.x - i, mWidth / 2 - point3.y,
                    mWidth / 2 - point4.x, mWidth / 2 - point4.y
                    , mPaintLine);


        }


        for (int i = 0; i < Math.abs(mWidth / 2 - point5.x) / 2f; i++) {
            int fraction = 30 - i;
            if (fraction > 0) {
                lineColor = (Integer) evaluator.evaluate(fraction / 100f, startRedColor, endColor);
                mPaintLine.setColor(lineColor);
            } else

                mPaintLine.setColor(Color.argb(0, 0, 0, 0));
            canvas.drawLine(mWidth / 2 - point5.x + i, mWidth / 2 - point5.y,
                    mWidth / 2 - point6.x, mWidth / 2 - point6.y
                    , mPaintLine);

        }

    }

3最后画中心的圆，logo就出现了

  private void drawCircle(Canvas canvas) {//画中心的圆覆盖
        canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth / 2 - mPadding) / 2, mPaintWhite);
        canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth / 2 - mPadding) / 2 / 6 * 5, mPaintBulue);
    }

利用三角函数计算圆周上的点

    private Point getPoint(float radius, float angle) {
        float x = (float) ((radius) * Math.cos(angle * Math.PI / 180f));
        float y = (float) ((radius) * Math.sin(angle * Math.PI / 180f));
        Point p = new Point(x, y);
        return p;
    }

代码下载