-
需求：隨著手指滑動(dòng)喘垂，出現(xiàn)一個(gè)指示用的箭頭禾酱，向這樣的
[圖片上傳失敗...(image-57ef8e-1574057435378)]
畫一條線很簡單全释，用
onTouchEvent()即可已骇，難點(diǎn)在畫那個(gè)小箭頭上面孝凌，看著簡單方咆，畫起來各種角度、坐標(biāo)系蟀架，畫的欲仙欲死的···
- 首先確定2個(gè)點(diǎn)的位置瓣赂，并傳給自定義控件arrowView
private ArrowView av;
private float startX;
private float startY;
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
//記下按下去的初始位置榆骚，actionbarHeight和statusHeight是toolBar和狀態(tài)欄的高度
startX = event.getX();
startY = event.getY()-actionBarHeight-statusHeight;
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
float moveY = event.getY()-actionBarHeight-statusHeight;
av.clear(); //每次移動(dòng)的時(shí)候都先清空一次path
av.setPath(startX,startY,moveX,moveY); //將2個(gè)點(diǎn)的位置傳給arrowView
break;
case MotionEvent.ACTION_UP:
//do something
}
break;
}
return super.onTouchEvent(event);
}
- ArrowView來了
package com.aidebar.intentdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
/**
* @author xzj
* @date 2016/10/26 14:59.
*/
public class ArrowView extends View {
private Paint paint;
private Path path;
private Paint arrowPaint;
private Path arrowPath;
private float startX;
private float startY;
private float endX;
private float endY;
public ArrowView(Context context) {
super(context);
init();
}
public ArrowView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ArrowView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paint = new Paint();
arrowPaint = new Paint();
arrowPaint.setAntiAlias(true);
arrowPaint.setColor(Color.RED);
arrowPaint.setStrokeWidth(5);
arrowPaint.setStyle(Paint.Style.FILL);//箭頭是個(gè)實(shí)心三角形，所以用fill
arrowPath = new Path();
path = new Path();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
setArrowPath();
canvas.drawPath(path, paint);
canvas.drawPath(arrowPath, arrowPaint);
}
/**
* 畫箭頭
*/
public void setArrowPath() {
double H = 18; // 箭頭高度
double L = 13.5; // 底邊的一半
double angle = Math.atan(L / H); // 箭頭角度
double arrowLength = Math.sqrt(L * L + H * H); // 箭頭的長度
//箭頭就是個(gè)三角形煌集，我們已經(jīng)有一個(gè)點(diǎn)了妓肢，根據(jù)箭頭的角度和長度，確定另外2個(gè)點(diǎn)的位置
double[] point1 = rotateVec(endX - startX, endY - startY, angle, arrowLength);
double[] point2 = rotateVec(endX - startX, endY - startY, -angle, arrowLength);
double point1_x = endX - point1[0];
double point1_y = endY - point1[1];
double point2_x = endX - point2[0];
double point2_y = endY - point2[1];
int x3 = (int) point1_x;
int y3 = (int) point1_y;
int x4 = (int) point2_x;
int y4 = (int) point2_y;
// 畫線
arrowPath.moveTo(endX, endY);
arrowPath.lineTo(x3, y3);
arrowPath.lineTo(x4, y4);
arrowPath.close();
}
// 計(jì)算
/**
* @param diffX X的差值
* @param diffY Y的差值
* @param angle 箭頭的角度（箭頭三角形的線與直線的角度）
* @param arrowLength 箭頭的長度
*/
public double[] rotateVec(float diffX, float diffY, double angle, double arrowLength) {
double arr[] = new double[2];
// 下面的是公式苫纤，得出的是以滑動(dòng)出的線段末點(diǎn)為中心點(diǎn)旋轉(zhuǎn)angle角度后,線段起點(diǎn)的坐標(biāo)碉钠，這個(gè)旋轉(zhuǎn)后的線段也就是“變長了的箭頭的三角形的一條邊”
//推導(dǎo)見注釋1
double x = diffX * Math.cos(angle) - diffY * Math.sin(angle);
double y = diffX * Math.sin(angle) + diffY * Math.cos(angle);
double d = Math.sqrt(x * x + y * y);
//根據(jù)相似三角形，得出真正的箭頭三角形頂點(diǎn)坐標(biāo)方面，這里見注釋2
x = x / d * arrowLength;
y = y / d * arrowLength;
arr[0] = x;
arr[1] = y;
return arr;
}
public void setPath(float startX, float startY, float endX, float endY) {
path.moveTo(startX,startY);
path.lineTo(endX,endY);
this.startX = startX;
this.startY = startY;
this.endX = endX;
this.endY = endY;
invalidate();
}
public void clear() {
path.reset();
arrowPath.reset();
}
}
注釋1：前方高能放钦，初中數(shù)學(xué)老師來臨
一個(gè)點(diǎn)坐標(biāo)為（x1,y1),與x軸夾角為A，與原點(diǎn)距離為r恭金，那么
x1 = r *cosA ————–①
y1 = r *sinA ————–②
以原點(diǎn)為圓心操禀，將該點(diǎn)旋轉(zhuǎn)B度后，得到點(diǎn)（x2,y2)
x2 = r *cos(A+B)= r *(cosAcosB - sinAsinB)
y2 = r *sin(A+B)= r *(sinAcosB + cosAsinB)
將①②式帶入可得：
x2 = x1cosB - y1sinB
y2 = y1cosB + x1sinB
注釋2：前方高能横腿，初中數(shù)學(xué)老師又來
x/x1=arrowLength/d
x = x1 / d * arrowLength
EOF ?
