gpt4 book ai didi

java - 自定义View drawArc,检测用户在弧形绘制路径上的触摸

转载 作者:搜寻专家 更新时间:2023-10-30 21:45:19 24 4
gpt4 key购买 nike

我正在创建一个自定义 View ,它是一种弧形 slider 进度 View 。我可以根据用户触摸的位置(在 x 轴上)通过计算扫描来绘制或多或少的弧形,我首先这样做计算用户沿 x 轴触摸的百分比。0% 将一直向左,100% 将一直向右。

我想更进一步,而不是根据用户按下的 x 坐标绘制圆弧,我想让它仅在用户触摸实际圆弧绘制路径时移动,这样更逼真。我对自定义 View 还是新手,我的数学知识有限,但如果我能得到一些提示,我将不胜感激,谢谢

how it looks when user moves there finger on the area of the rectangle as a percentage along the x axis

class ArcProgress extends View {

Context cx;
float width;

float height;
float center_x, center_y;
final RectF oval = new RectF();
final RectF touchArea = new RectF();

float sweep = 0;
float left, right;
int percent = 0;

public ArcProgress(Context context) {
super(context);
cx = context;

}

public int getPercentage() {
return percent;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

setBackgroundColor(0xfff0ebde);

width = (float) getWidth();
height = (float) getHeight();

float radius;

if (width > height) {
radius = height / 3;
} else {
radius = width / 3;
}

Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(0xffd2c8b6);
paint.setStrokeWidth(35);

paint.setStyle(Paint.Style.STROKE);

center_x = width / 2;
center_y = height / 2;

left = center_x - radius;
float top = center_y - radius;
right = center_x + radius;
float bottom = center_y + radius;

oval.set(left, top, right, bottom);

//this is the background arc, it remains constant
canvas.drawArc(oval, 180, 180, false, paint);

paint.setStrokeWidth(10);
paint.setColor(0xffe0524d);
//this is the red arc whichhas its sweep argument manipulated by on touch
canvas.drawArc(oval, 180, sweep, false, paint);

}

@Override
public boolean onTouchEvent(MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_MOVE) {

float xPosition = event.getX();
float yPosition = event.getY();
if (oval.contains(xPosition, yPosition)) {

float x = xPosition - left;
float s = x * 100;
float b = s / oval.width();
percent = Math.round(b);
sweep = (180 / 100.0f) * (float) percent;

invalidate();

} else {
if (xPosition < left) {
percent = 0;

sweep = (180 / 100.0f) * (float) percent;
invalidate();
}
if (xPosition > right) {
percent = 100;

sweep = (180 / 100.0f) * (float) percent;
invalidate();
}
}
}

return true;
}
}

最佳答案

I want to make it move only when the user touches on the actual arc draw path

onTouchEvent()开头你需要检查是否xPositionyPosition正在满足某些条件。如果是,你就做你现在正在做的事情。如果没有,return true .

条件:

我们要检查 x, y 是否在那个灰色弧形背景中:

enter image description here

让我们计算从 (x, y) 到中心点 (a, b) 的距离:

final dist = distance(x, y, a, b)

distance()是点 (x,y) 和 (a,b) 之间的简单欧氏距离:

double distance(int x, int y, int a, int b)
{
return Math.sqrt((x - a) * (x - a) + (y - b) * (y - b));
}

x, y 在那个灰色弧形背景中,如果 y > Y && dist >= r && dist <= R .

关于java - 自定义View drawArc,检测用户在弧形绘制路径上的触摸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17264498/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com