2013-06-23 31 views
10

我创建这是一种弧形滑盖的进步view.I可以借鉴基础上,其中弧的或多或少的自定义视图中绘制路径上用户触摸用户触摸(在x轴)通过计算扫描,我通过首先计算用户沿x轴触摸的百分比来实现这一点。.. 0%将一路向左,100%将一路向右。自定义视图drawArc,检测弧

我想要更进一步,而不是基于用户按下的x坐标绘制弧线,我只想在用户触及实际弧线绘制路径时使其移动,因此它更逼真。我还是新的自定义视图和我的数学是有限的,但如果我得到一些提示,我将不胜感激,谢谢

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; 
    } 
} 

回答

9

这是否对你的工作? 你不需要很多数学。您可以计算触摸点距弧线中心的距离(这是一个很容易的圆),并可以与您使用的半径进行比较。这将告诉你,如果点在弧(几乎,见下面的全案)。

Point touchEv = ...; 
Point circleCenter = ...; 

//the radius of the circle you used to draw the arc 
float circleRadius = ...; 
//how far from the arc should a touch point treated as it's on the arc 
float maxDiff = getResources().getDimension(R.dimen.max_diff_dp); 

//calculate the distance of the touch point from the center of your circle 
float dist = Math.pow(touchEv.x-circleCenter.x,2) + Math.pow(touchEv.y- circleCenter.y,2) 
dist = Math.sqrt(dist); 

//We also need the bounding rect of the top half of the circle (the visible arc) 
Rect topBoundingRect = new Rect(circleCenter.x - circleRadius, 
      circleCenter.y - circleRadius, 
      circleCenter.x + circleRadius, 
      circleCenter.y); 


if (Math.abs(dist - circleRadius) <= maxDiff && 
    topBoundingRect.contains(touchEv.x, touchEv.y)) { 
    // the user is touching the arc 

} 
+0

我希望我可以选择2个最佳答案,我会点击你,谢谢你100万 – brux

+0

无后顾之忧,很乐意帮助:) – Plato

+0

我改变了主意,做了这个正确的,因为我仍然完全把我的头围绕它,但你的代码的作品,你有任何机会吗? – brux

11

我想让它,只有当用户触摸的实际弧 平局路径

上动弹的onTouchEvent()你需要检查是否xPositionyPosition正在履行一些条件开始。如果是的话,你做的东西,你现在正在做的。如果不是,return true

条件:

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

enter image description here

让我们来计算,以该点(X,Y)的距离( A,b)在中心:

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

distance()是一个简单的欧几里德DISTA点(X,Y)和(A,B)之间NCE:

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

+3

+1为图:) – Plato