画心形
学习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:
丘比特之箭,咻~~~
组合后:
然并卵,里面有个问题(没发现的请忽视),现在并没有解决,啥时候想起来了,再议~ ~~
为什么这么做呢?当然是逼死强迫症啦
其实,主要是还没想好怎么解决(#斜眼)