车载需要做一个suv后门的开关演示器,用户可以通过在屏幕上触摸来控制车门的开关角度;所以我们需要做一个类似与扇形的进度条;
需要具备的基础知识如下:
画点:
画图片:
画线:canvas.drawLine(startX, startY, endX, endY, linePaint);
画扇形:https://blog.csdn.net/ls15256928597/article/details/70077825
填充色渐变:https://blog.csdn.net/harvic880925/
首先我们考虑最简单的场景:即车门最大只能打开90度;如下图:
p点是用户touch的区域;
q点是显示在进度刻度上的点,根据p点的变化来变化;
oq是需要展示的游标;
正方形是实际view的大小;
那么我们需要做的是,
view的绘制,大致思路如下
- 绘制蓝色扇形区域
- 绘制q点
- 绘制oq线段
步骤1.绘制蓝色扇形,
1.知道圆点,知道半经,先画一个正方形,正方形的中心就是圆点,正方形边长的一半,就是半径;
2.扇形是从,90度,画到180度的;
步骤2.绘制q点
1.需要知道q点对应的x,y
2.x和y可以根据半斤和角度a通过勾股定理计算出来
3.角度a根据用户点击p对应的x和y值,然后根据勾股定理计算出来
步骤3.绘制线段
步骤2中计算出q点的x和y,o点的x,y是已知的,连接起来即可;
所以ondraw方法,分为3步:
那么p点如何知道,那就要通过ontouch方法,事件的x,y对应的就是p点的x和y,代码如下:
然后通过勾股定理,计算出角度a;
最后调用 invalidate(),通知重绘,也就是每move一次,界面重绘一次;
package com.ford.sync.fordcalendar.ui.view;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import com.ford.sync.fordcalendar.R;
/**
* author: lwang253 date: 2021/1/25 create CalendarApplication.
*/
public class ArcProgress extends View {
private int max = 90;// 支持的最大角度
private Paint arcPaint; // 弧形画笔
private Paint linePaint; // 直线画笔
private Paint pointPaint; // 点画笔
private int radio;
private int whsize; //
private double angle; // 当前的角度
private float touchX; // 触摸x
private float touchY; // 触摸y
private float pointX; // 刻度x
private float pointY; // 刻度y
public ArcProgress(Context context) {
super(context);
init();
}
public ArcProgress(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public ArcProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public ArcProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
arcPaint = new Paint();
arcPaint.setStyle(Paint.Style.FILL);
arcPaint.setStrokeWidth(1);
arcPaint.setTextSize(30);
linePaint = new Paint();
linePaint.setStyle(Paint.Style.FILL);
linePaint.setStrokeWidth(3);
linePaint.setColor(Color.BLACK);
pointPaint = new Paint();
pointPaint.setAntiAlias(true);
pointPaint.setTextSize(36);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// canvas.drawColor(Color.RED);// 实际可以去掉,用于观察view的实际大小
calculatePointByAngle(angle);
drawArc(canvas);
drawLine(canvas);
drawPoint(canvas);
}
/**
* 根据当前的角度,找到刻度q点的位置
*
* @param angle
*/
private void calculatePointByAngle(double angle) {
Log.d("ArcProgress", "sin30:" + Math.sin(30 * Math.PI / 180));
pointX = radio - (float) (radio * Math.sin(angle * Math.PI / 180));
pointY = radio + (float) (radio * Math.cos(angle * Math.PI / 180));
Log.d("ArcProgress", "calculatePointByAngle pointX:" + pointX + ";pointY:" + pointY);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
whsize = w > h ? h : w;
radio = whsize / 2;
super.onSizeChanged(w, h, oldw, oldh);
}
private void drawPoint(Canvas canvas) {
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.radio_sel);
Rect mSrcRect = new Rect(0, 0, bmp.getWidth(), bmp.getHeight());
int left = (int) (pointX - bmp.getWidth()/2);
int top = (int) (pointY - bmp.getHeight()/2);
Rect mDestRect = new Rect(left, top, left+bmp.getWidth(), top+bmp.getHeight());
canvas.drawBitmap(bmp, mSrcRect, mDestRect, pointPaint);
}
private void drawLine(Canvas canvas) {
canvas.drawLine(radio, radio, pointX, pointY, linePaint);
}
private void drawArc(Canvas canvas) {
// 矩形区域,这种方式画出来的扇形占view的1/4
RectF oval = new RectF(0, 0, whsize, whsize);
// 渐变的填充色
Shader gradient = new RadialGradient(radio, radio,
radio, Color.TRANSPARENT, Color.BLUE, Shader.TileMode.REPEAT);
arcPaint.setShader(gradient);
canvas.drawArc(oval, 90, 90, true, arcPaint);
}
public float Dp2Px(Context context, float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (dp * scale + 0.5f);
}
/**
* 根据触摸点,计算角度
*
* @param event
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
touchX = event.getX();
touchY = event.getY();
Log.d("ArcProgress", "x:" + touchX + "; y:" + touchY);
if (touchX > radio || touchY < radio) {
// 在另外三个区域不处理touch事件;
return true;
}
calculateAngle();
Log.d("ArcProgress", "angle:" + angle);
invalidate();// 计算出角度后,刷新界面
break;
}
return true;
}
/**
* 三角函数计算角度a Math.atan计算的是弧度
*/
private void calculateAngle() {
angle = Math.atan((radio - touchX) / (touchY - radio)) * 180 / Math.PI;
if (angle > 90) {
angle = 90;
}
if (angle < 0) {
angle = 0;
}
}
};
网友评论