android绘画基础 ---)多种样式的进度条(

赵子龙 发布于 2016/05/06 15:52
阅读 1K+
收藏 0


    



     








1 绘制一个矩形 
 
  


        /**
         * 创建图片
         */
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        /**
         * 创建画布
         */
        Canvas canvas = new Canvas(bitmap);
        /**
         * 创建画笔
         */
        Paint paint = new Paint()
        /**
         * 设置画笔的颜色
         */
        paint.setColor(Color.parseColor("#ff6600"));
        /**
         * 绘制矩形背景
         * Draw the specified Rect using the specified paint. The rectangle will
         * be filled or framed based on the Style in the paint.
         *
         * @param left   The left side of the rectangle to be drawn
         * @param top    The top side of the rectangle to be drawn
         * @param right  The right side of the rectangle to be drawn
         * @param bottom The bottom side of the rectangle to be drawn
         * @param paint  The paint used to draw the rect
         * public void drawRect ( float left, float top, float right, float bottom,
         * @NonNull Paint paint){
         * native_drawRect(mNativeCanvasWrapper, left, top, right, bottom, paint.getNativeInstance());
         *  }
         */
        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        canvas.drawRect(0, 0, mWidth, mHeight, paint);


        /**
         * 绘制显示的文字
         */
        Paint textPaint = new Paint();
        textPaint.setColor(Color.BLUE);
        /**
         * 设置搞锯齿
         */
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(15);
        /**
         * 设置绘制的字体样式
         * The default NORMAL typeface object
                public static final Typeface DEFAULT;
         * The default BOLD typeface object. Note: this may be not actually be bold, depending on what fonts are installed. Call getStyle() to knowfor sure.
                public static final Typeface DEFAULT_BOLD;
         * The NORMAL style of the default sans serif typeface.
                public static final Typeface SANS_SERIF;
         *  The NORMAL style of the default serif typeface.
                public static final Typeface SERIF;
         * The NORMAL style of the default monospace typeface.
            public static final Typeface MONOSPACE;
        */
        textPaint.setTypeface(Typeface.DEFAULT);
        /**
         * 设置文字的对齐方式
         */


        textPaint.setTextAlign(Paint.Align.CENTER);
        /**
         * Draw the text, with origin at (x,y), using the specified paint. The
         * origin is interpreted based on the Align setting in the paint.
         *
         * @第一个参数 text  The text to be drawn
         * @第二个参数 x     The x-coordinate of the origin of the text being drawn
         * @第三个参数 y     The y-coordinate of the baseline of the text being drawn
         * @第四个参数 paint The paint used for the text (e.g. color, size, style)
         */
        canvas.drawText("hollow", mWidth / 2, 20, textPaint);


        /**
         * 分别绘制不同样式的文字
         */
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);
        canvas.drawText("DEFAULT_BOLD", mWidth / 2, 45, textPaint);


        textPaint.setTypeface(Typeface.SANS_SERIF);
        canvas.drawText("SANS_SERIF", mWidth / 2, 66, textPaint);


        textPaint.setTypeface(Typeface.SERIF);
        canvas.drawText("SERIF", mWidth / 2, 96, textPaint);


        textPaint.setTypeface(Typeface.MONOSPACE);
        canvas.drawText("MONOSPACE", mWidth / 2, 116, textPaint);




        /**
         * 将绘制的图片设置显示
         */
        imageView.setImageBitmap(bitmap);




在这里设置绘制出来的矩形颜色为 #00ff66 
当然我们也可以绘制出来相应的具有渐变效果的矩形,我们只需要将上面的paint.setColor()这个方法进行相应的替换


/**
* 创建背景使用到的渐变颜色
*/

int[] colors = new int[]{Color.YELLOW, Color.GREEN, Color.BLUE};
/**
* 定义渐变开始的位置信息
*/
float[] postions = new float[]{0f, 0.5f, 1.0f};
/**
* 创建渐变背景
*/
LinearGradient linearGradient = new LinearGradient(0, 0, mWidth, mHeight, colors, postions, Shader.TileMode.REPEAT);

SweepGradient sweepGradient = new SweepGradient(mWidth / 2, mHeight / 2, colors, postions);

/**
* 将渐变的背景设置旋转45度,设置为水平方向的渐变
*/
Matrix matrix = new Matrix();
matrix.setRotate(45, mWidth / 2, mHeight / 2);


linearGradient.setLocalMatrix(matrix);

paint.setShader(linearGradient);


这样的话我们就可以绘制出来了具有渐变效果的矩形

2 绘制多个点 


  /**
         * 创建图片
         */
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        /**
         * 创建画布
         */
        Canvas canvas = new Canvas(bitmap);


        /**
         * 创建画笔
         */
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#ff6600"));
        /**
         * 画矩形背景
         */
        canvas.drawRect(0, 0, mWidth, mHeight, paint);


        /**
         * 画点操作
         */
        //定义点的位置 
        float[] pts = new float[]{
                10, 10,
                20, 20,
                30, 30,
                50, 50
        };
        //设置画出的点的颜色为白色
        paint.setColor(Color.parseColor("#ffffff"));
        //设置画笔的宽度 
        paint.setStrokeWidth(10);
        //画点操作
        canvas.drawPoints(pts, 0, pts.length, paint);
        //将画出的图形设置显示到ImageView上
        imageView.setImageBitmap(bitmap);
        
        
3 绘制多条直线  
 Bitmap bimap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bimap);
        Paint paint = new Paint();


        paint.setColor(Color.parseColor("#ff6600"));
        /**
         * 画矩形背景
         */
        canvas.drawRect(0, 0, mWidth, mHeight, paint);


        /**
         * 画直线
         */


        float[] floats = new float[]{
                0, 0, 100, 0,
                0, 10, 100, 10,
                0, 30, 100, 30
        };


        paint.setStrokeWidth(5);
        paint.setColor(Color.WHITE);


        /**
         * 画多条直线
         */
        canvas.drawLines(floats, 0, floats.length, paint);


        imageView.setImageBitmap(bimap);
        
        
        
4 绘制椭圆或者圆  




 
        Bitmap bimap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bimap);
        Paint paint = new Paint();


        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#ff6600"));
        /**
         * 画矩形背景
         */
        canvas.drawRect(0, 0, mWidth, mHeight, paint);


        paint.setColor(Color.WHITE);
        /**
         * 定义矩形的大小
         */
        RectF rect = new RectF();
        rect.left = 10;
        rect.top = 10;
        rect.right = 100;
        rect.bottom = 100;


        /**
         * 当对应的值设置成为一定的极限后,就会出现相应的圆形 或者 是椭圆
         */
        /**
         * 设置四个角在x轴方向与y轴方向的角度
         */
        float roatx = 10;
        float roaty = 10;
        /**
         * 绘制椭圆 或者 是圆形
         */
        canvas.drawRoundRect(rect, roatx, roaty, paint);




        RectF rect1 = new RectF();
        rect1.left = 100;
        rect1.top = 10;
        rect1.right = 200;
        rect1.bottom = 110;


        /**
         * 设置的角度正好的宽与高的一半
         * 将画出圆形
         */
        float roatx1 = 50;
        float roaty2 = 50;


        canvas.drawRoundRect(rect1, roatx1, roaty2, paint);


5 绘制时钟


绘制表盘
/**
     * 绘制表盘
     */
    private Bitmap drawDail() {
        
        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();


        paint.setColor(Color.BLUE);
        paint.setStrokeWidth(5);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);


        canvas.save();


        /**
         * 绘制外周表盘
         */


        canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - 10, paint);


        /**
         * 绘制中心点圆
         */


        paint.setStyle(Paint.Style.FILL);


        canvas.drawCircle(mWidth / 2, mHeight / 2, 5, paint);




        /**
         * 绘制刻度
         */
        paint.setColor(Color.BLACK);


        /**
         * 这里采用的绘制方式是只绘制竖直方向上的一条直线,每绘制一次就将整个画布旋转30度
         */
        for (int i = 0; i < 12; i++) {
            if (i % 3 == 0) {
                paint.setStrokeWidth(5);
                canvas.drawLine(mWidth / 2, 13, mWidth / 2, 23, paint);
            } else {
                paint.setStrokeWidth(3);
                canvas.drawLine(mWidth / 2, 13, mWidth / 2, 20, paint);
            }


            canvas.rotate(30, mWidth / 2, mHeight / 2);
        }
        /**
         * 到这里我们基本的一个表盘就已经绘制出来了
         */
        canvas.restore();
        


        return bitmap;


    }
    
    绘制指针
     private Bitmap drawModelSign(Bitmap bitmap) {


        Bitmap bitmap1 = Bitmap.createBitmap(bitmap);
        Canvas canvas = new Canvas(bitmap1);


        paint.setAntiAlias(true);
        paint.setColor(Color.YELLOW);
        paint.setStrokeWidth(5);




        /**
         * 获取时间数据
         */
        Calendar calendar = Calendar.getInstance();
        int hours = calendar.get(Calendar.HOUR);
        int second = calendar.get(Calendar.SECOND);
        int minute = calendar.get(Calendar.MINUTE);


        /**
         * 指针的长度
         */
        float length = mHeight / 2;
        /**
         * 旋转角度
         */


        float degrees = 0;
        /**
         * 时针
         */
        canvas.save();


        degrees = 30 * hours + minute / 60 * 30;
        canvas.rotate(degrees, mWidth / 2, mHeight / 2);
        canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, length * 8 / 10, paint);


        canvas.restore();
        /**
         * 分针
         */
        canvas.save();
        paint.setStrokeWidth(3);
        degrees = 6 * minute + second / 60 * 6;
        canvas.rotate(degrees, mWidth / 2, mHeight / 2);
        canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, length * 6 / 10, paint);
        canvas.restore();
        /**
         * 秒针
         */
        canvas.save();
        paint.setStrokeWidth(2);
        degrees = 6 * second;
        canvas.rotate(degrees, mWidth / 2, mHeight / 2);
        canvas.drawLine(mWidth / 2, mHeight / 2 + 20, mWidth / 2, length * 3 / 10, paint);
        canvas.restore();




        /**
         * 绘制显示24小时格式的时间 文字
         */
        canvas.save();
        paint.setStrokeWidth(2);
        paint.setColor(Color.RED);
        String text = calendar.get(Calendar.HOUR_OF_DAY) + ":" + minute + ":" + second;
        /**
         * Draw the text, with origin at (x,y), using the specified paint. The
         * origin is interpreted based on the Align setting in the paint.
         *
         * @param text  The text to be drawn
         * @param x     The x-coordinate of the origin of the text being drawn
         * @param y     The y-coordinate of the baseline of the text being drawn
         * @param paint The paint used for the text (e.g. color, size, style)
         */
        canvas.drawText(text, mWidth / 2 - 25, mHeight / 2 - 45, paint);
        canvas.restore();




        return bitmap1;
    }
    
    
    创建动态的时钟
    
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (timer != null) {
            timer.cancel();
        }


    }


    private int mWidth = 200;
    private int mHeight = 200;


    private Timer timer;
    private Bitmap bitmap;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imageView);
      
        /**
         * 获取表盘
         */
        bitmap = drawDail();




        /**
         * 创建定时器
         */
        timer = new Timer();
        /**
         * 每间隔一秒时间来绘制一次
         */
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                MainActivity.this.runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Bitmap bitmaps = drawModelSign(bitmap);
                        imageView.setImageBitmap(bitmaps);
                    }
                });




            }
        }, 0, 1000);
    }


          


详细信息请查看:

http://blog.csdn.net/zl18603543572/article/details/51250216




加载中
返回顶部
顶部