Canva画4个角,实现扫描二维码用的4个角

这是今天美工发给我的一个切图，问我需要切哪些图标；糗了一眼，我只说了要中间最小的图标就行了。其他的都可以自己画的嘛。。。。（其实用图片搬砖效率还是更快一点，不过本人还是有点傲娇······）

好久没用Canvas画过东西了，看了一下外边4个角就是8条线,里面画一个圆角矩形就行了。

先看下本菜逼做的效果图吧，，没错效果就是TM这么挫，要做好看一点，可以自己弄。。。

先上代码吧。

/**
 * 用canvas画只有一个角是圆角的矩形,请用{@link android.graphics.drawable.shapes.RoundRectShape} 

 * Created by Tangxb on 2016/7/13.
 */
public class FourRoundView extends View {
    private Paint mPaint;
    private Paint mPaint2;
    private int mWidth;
    private int mHeight;
    private float mStrokeWidth;
    private float mLineWidth;
    private int mLineColor;
    private float rx;
    private float ry;
    private RectF rectF;

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

    public FourRoundView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FourRoundView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public FourRoundView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.FourRoundView);
        mLineWidth = ta.getDimension(R.styleable.FourRoundView_lineWidth, dip2px(10));
        mStrokeWidth = ta.getDimension(R.styleable.FourRoundView_strokeWidth, dip2px(10));
        mLineColor = ta.getColor(R.styleable.FourRoundView_lineColor, Color.BLACK);
        ta.recycle();

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(mLineColor);
        mPaint.setStrokeWidth(mStrokeWidth);
        mPaint2 = new Paint(mPaint);
        mPaint2.setStrokeJoin(Paint.Join.ROUND);
        mPaint2.setStyle(Paint.Style.STROKE);
        mPaint2.setStrokeWidth(mStrokeWidth / 2);
        rx = 10;
        ry = 10;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        rectF = new RectF(mWidth / 2F - 50F, mHeight / 2F - 50F, mWidth / 2F + 50F, mHeight / 2F + 50F);
    }

    /**
     * the stoke is always centered 

     * 这里不用0,用的mStrokeWidth / 2F替换0;原因请看上面的链接
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 左上角
        canvas.drawLine(0, mStrokeWidth / 2F, mLineWidth, mStrokeWidth / 2F, mPaint);
        canvas.drawLine(mStrokeWidth / 2F, mStrokeWidth / 2F, mStrokeWidth / 2F, mLineWidth, mPaint);
        // 左下角
        canvas.drawLine(mStrokeWidth / 2F, mHeight - mLineWidth, mStrokeWidth / 2F, mHeight, mPaint);
        canvas.drawLine(mStrokeWidth / 2F, mHeight - mStrokeWidth / 2F, mLineWidth, mHeight - mStrokeWidth / 2F, mPaint);
        // 右上角
        canvas.drawLine(mWidth - mLineWidth, mStrokeWidth / 2F, mWidth, mStrokeWidth / 2F, mPaint);
        canvas.drawLine(mWidth - mStrokeWidth / 2F, mStrokeWidth / 2F, mWidth - mStrokeWidth / 2F, mLineWidth, mPaint);
        // 右下角
        canvas.drawLine(mWidth - mStrokeWidth / 2F, mHeight - mLineWidth, mWidth - mStrokeWidth / 2F, mHeight, mPaint);
        canvas.drawLine(mWidth - mLineWidth, mHeight - mStrokeWidth / 2F, mWidth, mHeight - mStrokeWidth / 2F, mPaint);
        canvas.drawRoundRect(rectF, rx, ry, mPaint2);
    }

    /**
     * 将dip或dp值转换为px值，保证尺寸大小不变
     *
     * @param dipValue
     * @return
     */
    public int dip2px(float dipValue) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
}

附上four_round_attrs.xml

<resources>

    <declare-styleable name="FourRoundView">
        <attr name="lineWidth" format="dimension|reference" />
        <attr name="strokeWidth" format="dimension|reference" />
        <attr name="lineColor" format="color|reference" />
    declare-styleable>

resources>

可能你已经注意到我在代码中写的注释了，如果只想实现画一个圆角的矩形请用RoundRectShape,同时在onDraw里面没有使用0这个点，是因为设置了strokeWidth，会让坐标偏移（the stoke is always centered）

虽然很简单,主要是好久没写博客，简单滴冒个泡泡。。。。。