TolyClock

Android原生绘图之一起画个表

Stars
7

AndroidCanvasPaint,PathAPI Canvas`` Canvassaverestore


1.View
public class TolyClockView extends View {

    public TolyClockView(Context context) {
        this(context, null);
    }

    public TolyClockView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        init();
    }

    private void init() {
        //TODO 
    }
    
       @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //TODO 
    }
2.

View,`` x,y,save(),


3.:(``)

,Pictureinit() PictureonDraw``

//
private Picture mPictureGrid;//Canvas
private Point mCoo = new Point(500, 800);//
private Picture mPictureCoo;//Canvas

//init()
mPictureGrid = HelpDraw.getGrid(getContext());
mPictureCoo = HelpDraw.getCoo(getContext(), mCoo);
//
mMainPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mMainPaint.setStyle(Paint.Style.STROKE);
mMainPaint.setStrokeCap(Paint.Cap.ROUND);

//onDraw
canvas.drawPicture(mPictureGrid);
canvas.drawPicture(mPictureCoo);

APIcanvas``,


1.onDraw
canvas.save();//()
canvas.translate(mCoo.x, mCoo.y);//
canvas.restore();//root
2.

canvas.save()(), canvas.translate(mCoo.x, mCoo.y) :(Canvasroot)

3.:drawBreakCircle(canvas)
 /**
 * 
 * @param canvas
 */
private void drawBreakCircle(Canvas canvas) {
    for (int i = 0; i < 4; i++) {
        canvas.save();//()
        canvas.rotate(90 * i);
        mMainPaint.setStrokeWidth(8);
        mMainPaint.setColor(Color.parseColor("#D5D5D5"));
        //-350, -350, 350, 350,1070
        canvas.drawArc(
                -350, -350, 350, 350,
                10, 70, false, mMainPaint);
        canvas.restore();//()
    }
}     

i=0 save

canvas.restore() 21``

i=1 save canvas.rotate(90 * 1)90 ``:,canvascanvas 9090

canvas.restore() 21``

root


4.

60()5360/60=6

    private void drawDot(Canvas canvas) {
        for (int i = 0; i < 60; i++) {
            if (i % 5 == 0) {
                canvas.save();
                canvas.rotate(30 * i);
                mMainPaint.setStrokeWidth(8);
                mMainPaint.setColor(ColUtils.randomRGB());
                canvas.drawLine(250, 0, 300, 0, mMainPaint);

                mMainPaint.setStrokeWidth(10);
                mMainPaint.setColor(Color.BLACK);
                canvas.drawPoint(250, 0, mMainPaint);
                canvas.restore();
            } else {
                canvas.save();
                canvas.rotate(6 * i);
                mMainPaint.setStrokeWidth(4);
                mMainPaint.setColor(Color.BLUE);
                canvas.drawLine(280, 0, 300, 0, mMainPaint);
                canvas.restore();
            }
        }
    }

5.
 /**
     * 
     *
     * @param canvas
     */
    private void drawH(Canvas canvas) {

        canvas.save();
        canvas.rotate(40);
        mMainPaint.setColor(Color.parseColor("#8FC552"));
        mMainPaint.setStrokeCap(Paint.Cap.ROUND);
        mMainPaint.setStrokeWidth(8);
        canvas.drawLine(0, 0, 150, 0, mMainPaint);
        canvas.restore();
    }
6.
    /**
     * 
     * @param canvas
     * @param deg
     */
    private void drawM(Canvas canvas) {
        canvas.save();
        canvas.rotate(120);
        mMainPaint.setColor(Color.parseColor("#87B953"));
        mMainPaint.setStrokeWidth(8);
        canvas.drawLine(0, 0, 200, 0, mMainPaint);
        mMainPaint.setColor(Color.GRAY);
        mMainPaint.setStrokeWidth(30);
        canvas.drawPoint(0, 0, mMainPaint);
        canvas.restore();
    }
7.
    /**
     * 
     *
     * @param canvas
     * @param deg
     */
    private void drawS(Canvas canvas, float deg) {
        mMainPaint.setStyle(Paint.Style.STROKE);
        mMainPaint.setColor(Color.parseColor("#6B6B6B"));
        mMainPaint.setStrokeWidth(8);
        mMainPaint.setStrokeCap(Paint.Cap.SQUARE);

        canvas.save();
        canvas.rotate(deg);

        canvas.save();
        canvas.rotate(45);
        //pathinit
        mMainPath.addArc(-25, -25, 25, 25, 0, 240);
        canvas.drawPath(mMainPath, mMainPaint);
        canvas.restore();

        mMainPaint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawLine(-25, 0, -50, 0, mMainPaint);

        mMainPaint.setStrokeWidth(2);
        mMainPaint.setColor(Color.BLACK);
        canvas.drawLine(0, 0, 320, 0, mMainPaint);

        mMainPaint.setStrokeWidth(15);
        mMainPaint.setColor(Color.parseColor("#8FC552"));
        canvas.drawPoint(0, 0, mMainPaint);
        canvas.restore();
    }


8.
/**
 * 
 * @param canvas
 */
private void drawText(Canvas canvas) {
    mMainPaint.setTextSize(60);
    mMainPaint.setStrokeWidth(5);
    mMainPaint.setStyle(Paint.Style.FILL);
    mMainPaint.setTextAlign(Paint.Align.CENTER);
    mMainPaint.setColor(Color.BLUE);
    canvas.drawText("", 350, 30, mMainPaint);
    canvas.drawText("", 0, 350 + 30, mMainPaint);
    canvas.drawText("", -350, 30, mMainPaint);
    canvas.drawText("", 0, -350 + 30, mMainPaint);
    //assets
    Typeface myFont = Typeface.createFromAsset(getContext().getAssets(), "CHOPS.TTF");
    mMainPaint.setTypeface(myFont);
    mMainPaint.setTextSize(70);
    canvas.drawText("Toly", 0, -150, mMainPaint);
}

1.

canvas.rotate(XXX); ! :

11:12:45?

45 / 12.f * 360 - 90
12 / 60.f * 360 - 90 + 45 / 60.f * 1
11 / 60.f * 360 - 90 + 12 / 60.f * 30 + 45 / 3600.f * 30
2.,
Calendar calendar = Calendar.getInstance();
int hour = calendar.get(Calendar.HOUR_OF_DAY);
int min = calendar.get(Calendar.MINUTE);
int sec = calendar.get(Calendar.SECOND);

drawS(canvas, hour / 60.f * 360 - 90 + min / 60.f * 30 + sec / 3600.f * 30);
drawM(canvas, min / 60.f * 360 - 90 + sec / 60.f);
drawH(canvas, sec / 60.f * 360 - 90);

3.,?

Handler + Timer

public class ClockActivity extends AppCompatActivity {

    /**
     * Handler
     */
    Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            mView.invalidate();//
        }
    };

    private View mView;
    private Timer timer = new Timer();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toly_clock);
        ButterKnife.bind(this);

        mView = findViewById(R.id.id_toly_clock);

        TimerTask timerTask = new TimerTask() {
            @Override
            public void run() {
                mHandler.sendEmptyMessage(0);//
            }
        };
        //
        timer.schedule(timerTask, 0, 1000);
    }
}

ok(...)


1.

| | ---|---|--- V0.1--github|2018-11-8|Android

2.

| QQ|| ---|---|---|---| | 1981462002|zdl1994328| github||CSDN|

3.

1----, 2---- 3---- 4----


+

1.HelpDraw
/**
 * <br/>
 * 2018/11/5 0005:8:43<br/>
 * [email protected]<br/>
 * 
 */
public class HelpDraw {

    /**
     * 
     */
    public static Point getWinSize(Context context) {
        Point point = new Point();
        Utils.loadWinSize(context, point);
        return point;
    }

    /**
     * 
     */
    public static Picture getGrid(Context context) {
        return getGrid(getWinSize(context));
    }

    /**
     * 
     */
    public static Picture getCoo(Context context, Point coo) {
        return getCoo(coo, getWinSize(context));
    }


    /**
     * 
     *
     * @param winSize 
     */
    private static Picture getGrid(Point winSize) {

        Picture picture = new Picture();
        Canvas recording = picture.beginRecording(winSize.x, winSize.y);
        //
        Paint paint = new Paint();
        paint.setStrokeWidth(2);
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.STROKE);
        //new float[]{, },
        paint.setPathEffect(new DashPathEffect(new float[]{10, 5}, 0));
        recording.drawPath(HelpPath.gridPath(50, winSize), paint);
        return picture;

    }

    /**
     * 
     *
     * @param coo     
     * @param winSize 
     */
    private static Picture getCoo(Point coo, Point winSize) {
        Picture picture = new Picture();
        Canvas recording = picture.beginRecording(winSize.x, winSize.y);
        //
        Paint paint = new Paint();
        paint.setStrokeWidth(4);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        //new float[]{, },
        paint.setPathEffect(null);

        //
        recording.drawPath(HelpPath.cooPath(coo, winSize), paint);
        //
        recording.drawLine(winSize.x, coo.y, winSize.x - 40, coo.y - 20, paint);
        recording.drawLine(winSize.x, coo.y, winSize.x - 40, coo.y + 20, paint);
        //
        recording.drawLine(coo.x, winSize.y, coo.x - 20, winSize.y - 40, paint);
        recording.drawLine(coo.x, winSize.y, coo.x + 20, winSize.y - 40, paint);
        //
        drawText4Coo(recording, coo, winSize, paint);
        return picture;
    }

    /**
     * 
     *
     * @param canvas  
     * @param coo     
     * @param winSize 
     * @param paint   
     */
    private static void drawText4Coo(Canvas canvas, Point coo, Point winSize, Paint paint) {
        //
        paint.setTextSize(50);
        canvas.drawText("x", winSize.x - 60, coo.y - 40, paint);
        canvas.drawText("y", coo.x - 40, winSize.y - 60, paint);
        paint.setTextSize(25);
        //X
        for (int i = 1; i < (winSize.x - coo.x) / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(100 * i + "", coo.x - 20 + 100 * i, coo.y + 40, paint);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.x + 100 * i, coo.y, coo.x + 100 * i, coo.y - 10, paint);
        }

        //X
        for (int i = 1; i < coo.x / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(-100 * i + "", coo.x - 20 - 100 * i, coo.y + 40, paint);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.x - 100 * i, coo.y, coo.x - 100 * i, coo.y - 10, paint);
        }

        //y
        for (int i = 1; i < (winSize.y - coo.y) / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(100 * i + "", coo.x + 20, coo.y + 10 + 100 * i, paint);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.x, coo.y + 100 * i, coo.x + 10, coo.y + 100 * i, paint);
        }

        //y
        for (int i = 1; i < coo.y / 50; i++) {
            paint.setStrokeWidth(2);
            canvas.drawText(-100 * i + "", coo.x + 20, coo.y + 10 - 100 * i, paint);
            paint.setStrokeWidth(5);
            canvas.drawLine(coo.x, coo.y - 100 * i, coo.x + 10, coo.y - 100 * i, paint);
        }
    }
}
2.HelpPath
/**
 * <br/>
 * 2018/11/5 0005:8:05<br/>
 * [email protected]<br/>
 * 
 */
public class HelpPath {

    /**
     * :path
     *
     * @param step    
     * @param winSize 
     */
    public static Path gridPath(int step, Point winSize) {

        Path path = new Path();

        for (int i = 0; i < winSize.y / step + 1; i++) {
            path.moveTo(0, step * i);
            path.lineTo(winSize.x, step * i);
        }

        for (int i = 0; i < winSize.x / step + 1; i++) {
            path.moveTo(step * i, 0);
            path.lineTo(step * i, winSize.y);
        }
        return path;
    }

    /**
     * 
     *
     * @param coo     
     * @param winSize 
     * @return 
     */
    public static Path cooPath(Point coo, Point winSize) {
        Path path = new Path();
        //x
        path.moveTo(coo.x, coo.y);
        path.lineTo(winSize.x, coo.y);
        //x
        path.moveTo(coo.x, coo.y);
        path.lineTo(coo.x - winSize.x, coo.y);
        //y
        path.moveTo(coo.x, coo.y);
        path.lineTo(coo.x, coo.y - winSize.y);
        //y
        path.moveTo(coo.x, coo.y);
        path.lineTo(coo.x, winSize.y);
        return path;
    }
}
3.Utils
public class Utils {
    /**
     * 
     *
     * @param ctx 
     * @param winSize 
     */
    public static void loadWinSize(Context ctx, Point winSize) {
        WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        if (wm != null) {
            wm.getDefaultDisplay().getMetrics(outMetrics);
        }
        winSize.x = outMetrics.widthPixels;
        winSize.y = outMetrics.heightPixels;
    }

}