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

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

好久没用

Canvas

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

先看下本菜逼做的效果图吧，

，没错效果就是TM这么挫，要做好看一点，可以自己弄。。。

先上代码吧。

/**
* 用canvas画只有一个角是圆角的矩形,请用{@link android.graphics.drawable.shapes.RoundRectShape} <br>
* 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);
}

/**
* <a href="http://stackoverflow.com/questions/15309029/android-paint-stroke-width-positioning">the stoke is always centered</a> <br>
* 这里不用0,用的<code>mStrokeWidth / 2F</code>替换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

<?xml version="1.0" encoding="utf-8"?>
<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）

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