Android Canvas绘制丘比特之箭

画心形

学习Android图形绘制过程中，随随便便的作品。
随便看看就好~~~

package com.zdl.gift.custom;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by zdl on 2017/8/30.
 */

public class Heart extends View {

    private Paint heartPaint;
    private RectF rectFTopLeft;
    private RectF rectFTopRight;
    private RectF rectFBottom;
    private int width;
    private int height;
    private Paint whitePaint1;
    private Paint whitePaint2;
    private RectF rectFLeft;
    private RectF rectFRight;

    public Heart(Context context) {
        super(context);
    }

    public Heart(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public Heart(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = 3*getMeasuredWidth()/4;//取宽的3/4来绘制，让旋转图形过后，心形能够完全展示
        height = 3*getMeasuredHeight()/4;//取高的3/4来绘制，让旋转图形过后，心形能够完全展示
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.TRANSPARENT);//设置背景透明
        canvas.rotate(45, getMeasuredWidth()/2, getMeasuredHeight()/2);//旋转45°，使心形变正

        rectFTopLeft.set(2, height/3+2, 2*width/3-2, height-2);//心形的左上部绘制位置
        rectFTopRight.set(width/3+2, 2, width-2, 2*height/3-2);//心形的右上部绘制位置
        rectFBottom.set(width/3, height/3, width-4, height-4);//心形的下部绘制位置
        rectFLeft.set(width/3, height-4, width, height);//心形左边描边位置
        rectFRight.set(width-4, height/3, width, height);//心形右边描边位置

        canvas.drawRect(rectFBottom, heartPaint);//心下部
        canvas.drawRect(rectFLeft, whitePaint2);//心下部左边描边
        canvas.drawRect(rectFRight, whitePaint2);//心下部右边描边
        /*
        先画心的下部正方形，再画心的左上角、右上角，是为了覆盖正方形的左上角的点
        这里给心左上角、右上角描边，修改起始角度和经过角度，是为了将上面正方形的左上角红色覆盖
         */
        canvas.drawArc(rectFTopLeft, 90, 180, true, heartPaint);//心左上角
        canvas.drawArc(rectFTopLeft, 90, 185, false, whitePaint1);//心左上角描边
        canvas.drawArc(rectFTopRight, 180, 180, true, heartPaint);//心右上角
        canvas.drawArc(rectFTopRight, 175, 186, false, whitePaint1);//心右上角描边

    }

    private void init() {
        heartPaint = new Paint();//画心的红色画笔
        heartPaint.setAntiAlias(true);//抗锯齿
        heartPaint.setColor(Color.RED);

        whitePaint1 = new Paint();//给心形描边的白色画笔
        whitePaint1.setAntiAlias(true);
        whitePaint1.setColor(Color.WHITE);
        whitePaint1.setStrokeWidth(4.0f);//画笔的宽度
        whitePaint1.setStyle(Paint.Style.STROKE);//FILL:实心     STROKE:空心

        whitePaint2 = new Paint();//给心形描边的白色画笔
        whitePaint2.setAntiAlias(true);
        whitePaint2.setColor(Color.WHITE);

        rectFTopLeft = new RectF();//心左上角位置
        rectFTopRight = new RectF();//心右上角位置
        rectFBottom = new RectF();//心下部位置
        rectFLeft = new RectF();//心下部左边描边位置
        rectFRight = new RectF();//心下部右边描边位置
    }
}

来张效果图：

这里要说一下，为什么心周围要描白边呢，你猜~~

当然是做这个啦

接下来就是箭了：

画箭头

package com.zdl.gift.custom;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by zdl on 2017/8/30.
 */

public class Arrow extends View {

    private int width;
    private int height;
    private Paint arrowPaint;
    private Path arrowPath;

    public Arrow(Context context) {
        super(context);
    }

    public Arrow(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public Arrow(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.TRANSPARENT);
        canvas.rotate(165, width/2, height/2);

        //箭头主体
        arrowPath.moveTo(20, height/2-3);
        arrowPath.lineTo(width-30, height/2-3);
        arrowPath.lineTo(width-30, height/2-12);
        arrowPath.lineTo(width, height/2);
        arrowPath.lineTo(width-30, height/2+12);
        arrowPath.lineTo(width-30, height/2+3);
        arrowPath.lineTo(20, height/2+3);
        arrowPath.close();
        canvas.drawPath(arrowPath, arrowPaint);

        //上部尾翼
        for (int i = 0; i < 3; i++) {
            arrowPath.moveTo(20+20*i, height/2-3);
            arrowPath.lineTo(0+20*i, height/2-23);
            arrowPath.lineTo(12+20*i, height/2-23);
            arrowPath.lineTo(32+20*i, height/2-3);
            arrowPath.close();
            canvas.drawPath(arrowPath, arrowPaint);
        }

        //下部尾翼
        for (int i = 0; i < 3; i++) {
            arrowPath.moveTo(20+20*i, height/2+3);
            arrowPath.lineTo(0+20*i, height/2+23);
            arrowPath.lineTo(12+20*i, height/2+23);
            arrowPath.lineTo(32+20*i, height/2+3);
            arrowPath.close();
            canvas.drawPath(arrowPath, arrowPaint);
        }
    }

    private void init() {
        arrowPaint = new Paint();//箭头的画笔
        arrowPaint.setAntiAlias(true);//抗锯齿
        arrowPaint.setColor(Color.parseColor("#33ffff"));
        arrowPaint.setStyle(Paint.Style.FILL);//FILL:实心     STROKE:空心

        arrowPath = new Path();
    }
}

箭Get：

丘比特之箭，咻~~~

组合后：

然并卵，里面有个问题（没发现的请忽视），现在并没有解决，啥时候想起来了，再议~
为什么这么做呢？当然是逼死强迫症啦~~
其实，主要是还没想好怎么解决（#斜眼）