Android学习之——画笔样式

最新推荐文章于 2022-11-03 19:45:02 发布

家驹六月天

最新推荐文章于 2022-11-03 19:45:02 发布

阅读量890

点赞数 2

文章标签： android

本文链接：https://blog.youkuaiyun.com/lalallallalla/article/details/91411407

版权

画笔的基本属性

        mPaint.setStrokeWidth(10);//设置画笔宽度
        mPaint.setColor(Color.BLUE);//设置画笔颜色
        mPaint.setStyle(Paint.Style.STROKE);//设置画笔样式

        mPaint.setTextSize();//字体大小
        mPaint.setTextAlign();//对齐方式
        mPaint.setShadowLayer();//阴影
        mPaint.setUnderlineText();//是否显示下划线
        mPaint.setFakeBoldText();//true 表示粗体，false表示正常
        mPaint.setTextSkewX();//float，设置文本在水平方向上的倾斜，负数表示右斜，正数表示左斜
        mPaint.setTextScaleX();//设置比例因子,默认为1，当大于1的时候表示横向拉伸，
// 当小于1的时候表示横向压缩。该方法往往用于一些特效字体的显示场合。
        mPaint.setStrikeThruText();//设置文本删除线
        mPaint.setLetterSpacing();//设置行间距，默认是0.
        mPaint.setTypeface();//设置文本字体样式
        mPaint.setLinearText();//设置是否打开线性文本标识
        mPaint.setHinting();//设置画笔的隐藏模式
        mPaint.setFontFeatureSettings();//设置字体的样式，这个样式和CSS样式很类似
        mPaint.setStrokeMiter(float miter);//设置笔画的倾斜度

画环形文字

        Path path1 = new Path();
        path1.addCircle(400 , 400 ,300 , Path.Direction.CW); //画路径
        Path path2 = new Path();
        path2.addCircle(400 , 1200 ,300 ,Path.Direction.CCW); //画路径
        canvas.drawCircle(400,400 ,300 ,mPaint);   //画圆
        canvas.drawCircle(400, 1200 ,300 ,mPaint); //画圆
        canvas.drawPoint( 400 , 400 ,mPaint);  //画点
        canvas.drawPoint(400 , 1200 ,mPaint);  //画点
        canvas.drawTextOnPath("学习Android 绘图！",path1,0,0, mPaint);   //画环形文字
        canvas.drawTextOnPath("学习Android 绘图！",path2,-50,-50, mPaint); //画环形文字
//        canvas.drawTextOnPath(文字,路径,横向偏移量,纵向偏移量,画布);

Canvas

//           (1)Canvas平移
          canvas.drawRect(300 ,300 ,800 ,800 ,mPaint);
          mPaint.setColor(Color.BLUE);
          canvas.translate(100 ,100 );
          canvas.drawRect( 300 ,300 ,800 ,800 ,mPaint);
//           (2)Canvas缩放
          canvas.scale(0.5f , 0.5f , 550 ,550);
          mPaint.setColor(Color.RED);
          canvas.drawRect( 300 ,300 ,800 ,800 ,mPaint);
//           (3)Canvas旋转
          canvas.rotate(-10);
          canvas.drawRect(300 ,300 ,800 ,800 ,mPaint);
          canvas.rotate(-20 , 550 ,550);
          canvas.drawRect(300 ,300 ,800 ,800 ,mPaint);
//           (4)Canvas角度倾斜画布
          canvas.save();
          canvas.skew( 0 ,tan(60));
          canvas.drawRect(300 ,300 ,800 ,800 ,mPaint);
          canvas.restore();

 public float tan(int degree){
        return (float) Math.tan(degree*1.0/180*Math.PI);
    }

接下来，就是我们最常用到的渐变了，一起来学习一下！

线性渐变

        LinearGradient linearGradient = new LinearGradient(100 , 100 ,300 ,300 , Color.RED , Color.BLUE , Shader.TileMode.MIRROR);
//        LinearGradient linearGradient = new LinearGradient(起点X轴 ,起点Y轴 ,终点X轴 ,终点Y轴 ,颜色1, 颜色2 ,渐变样式);
        mPaint.setShader(linearGradient);
        canvas.drawCircle(200 , 200 ,100  , mPaint);

自定义渐变

当然，如果要多种颜色或者自定义渐变范围的话也是可以的！

但必须注意的是，color的长度必须和fw的长度一致，否则会直接闪退！

        int[] color = { Color.BLUE , Color.RED , Color.MAGENTA , Color.GRAY};
        float[] fw = {0f , 0.2f , 0.5f , 1.0f };
        LinearGradient linearGradient = new LinearGradient(100 , 100 ,300 ,300 , color, fw , Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);
        canvas.drawRect(100 ,100 ,300 ,300 ,mPaint);

我们注意到，LinearGradient 方法中最好一个参数是一个枚举类型，其中有三个参数可选，我们来看一下效果！

        int[] color = { Color.BLUE , Color.RED , Color.MAGENTA , Color.GRAY};
        float[] fw = {0f , 0.3f , 0.6f , 1.0f };
        LinearGradient linearGradient = new LinearGradient(100 , 100 ,200,200 , color, fw , Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);
        canvas.drawRect(100 ,100 ,300 ,300 ,mPaint);

CLAMP REPEAT MIRROR

渐变字体

   int[] color = { Color.BLUE , Color.RED , Color.MAGENTA , Color.GRAY};
        float[] fw = {0f , 0.3f , 0.6f , 1.0f };
        LinearGradient linearGradient = new LinearGradient(0 , 0 ,getMeasuredHeight() ,0 , color, fw , Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);
        canvas.drawText("Android 渐变字体"  , 0 , getMeasuredHeight()/2 , mPaint);

SweepGradient扫描渐变

和以上渐变差不多，SweepGradient也支持多色渐变！

        int[] color = { Color.BLUE , Color.RED , Color.MAGENTA , Color.GRAY};
        float[] fw = {0f , 0.3f , 0.6f , 1.0f };
//        SweepGradient gradient = new SweepGradient(450 , 450 ,Color.RED , Color.GREEN);
        SweepGradient gradient = new SweepGradient(450 , 450 ,color , fw);
        mPaint.setShader(gradient);
        canvas.drawCircle(450 ,450 ,450 , mPaint);

效果是这样子的!

RadialGradient放射渐变

RadialGradient gradient = new RadialGradient(450 , 450 ,450,Color.RED , Color.BLUE ,Shader.TileMode.CLAMP);
mPaint.setShader(gradient);
canvas.drawCircle(450 , 450 , 450 , mPaint);

和以上渐变差不多，RadialGradient也支持多色渐变！

float curx = 0 ;
float cury = 0;
float heigth = 0;
float radius;
float width = 0;
float tradius;
ValueAnimator valueAnimator = null;
RadialGradient radialGradient;


 @Override
    protected void onDraw(android.graphics.Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(curx,cury,tradius,mPaint);
    }



@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (valueAnimator != null && valueAnimator.isRunning()){
            valueAnimator.cancel();
        }
        curx = event.getX();
        cury = event.getY();
        float maxRadius = 0;
        float maxRadius2 = 0;
        if ((width -curx) > curx){
            maxRadius = width -curx;
        }else{
            maxRadius = curx;
        }

        if ((heigth -cury) > cury){
            maxRadius2 = heigth -cury;
        }else{
            maxRadius2 = cury;
        }

        radius = Math.max(maxRadius, maxRadius2);
        valueAnimator = ValueAnimator.ofFloat(1,radius);
        valueAnimator.setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tradius = (Float) animation.getAnimatedValue();
                radialGradient = new RadialGradient(curx,cury, tradius,Color.BLUE,Color.GREEN, Shader.TileMode.CLAMP);
                mPaint.setShader(radialGradient);
                invalidate();
            }
        });

        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
                mPaint.setShader(null);
                tradius = 0;
                invalidate();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mPaint.setShader(null);
                tradius = 0;
                invalidate();
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }
        });
        valueAnimator.start();

        return super.onTouchEvent(event);
    }