2012-08-15 100 views
4

如何使用图形类绘制箭头?如何使用android图形类绘制箭头?

即时通讯使用android图形类,基本上即时通讯试图在地图上显示路径。所以我需要在画布上打印一个箭头。帮我弄清楚!

谢谢!

这是我用来画线的方法之一。我想在每条线的边缘打印一个箭头。

//  ArrayList<Point> ArrayListPoints = new ArrayList<Point>(); // Assign the shortest path here 

//  ArrayListPoints.add(new Point(262,100)); 
//  ArrayListPoints.add(new Point(262,165)); 
//  ArrayListPoints.add(new Point(346,165)); 
//  ArrayListPoints.add(new Point(420,165)); 

     ArrayList<Point> ArrayListPointsFINAL; 

    ArrayListPointsFINAL = storePath.ArrayListPoints; 

    if(ArrayListPointsFINAL == null){ 
     System.out.println("ArrayListPointsFINAL is NULL"); 
    } 
    else{ 

    ArrayList<Float> ArrayList_X = new ArrayList<Float>(); 
    ArrayList<Float> ArrayList_Y = new ArrayList<Float>(); 
    //int size = get.ArrayListPoints.size(); 

    for(int i=0; i<ArrayListPointsFINAL.size(); i++){ 
     ArrayList_X.add(Float.parseFloat(String.valueOf(ArrayListPointsFINAL.get(i).x))); 
     ArrayList_Y.add(Float.parseFloat(String.valueOf(ArrayListPointsFINAL.get(i).y))); 
      } 

    for(int i=1; i<ArrayList_X.size(); i++){ 
     Paint myPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     myPaint.setStrokeWidth(8/*1 /getResources().getDisplayMetrics().density*/); 
     myPaint.setColor(0xffff0000); //color.RED 
     // myPaint.setStyle(myPaint); 

     canvas.drawLine(ArrayList_X.get(i), ArrayList_Y.get(i), ArrayList_X.get(i-1), ArrayList_Y.get(i-1),myPaint);  

    } 
+2

你试过这样做还?如果您需要帮助,请发布一些失败的尝试。 – TheZ 2012-08-15 19:14:11

+1

完成:)给我提示如何绘制箭头! – Ruby 2012-08-15 19:25:18

回答

0

您可以改为绘制一个位图并应用一个矩阵。

+0

我画了一张位图:)现在它的工作。谢谢。!! – Ruby 2012-08-16 09:53:24

0

//使用自定义视图,您可以绘制使用路径原语:

private Paint mPaint;     // paint object 
    private Path mPathGrid;     // path object 

    @Override 
    protected void onDraw(Canvas canvas) 
    { 

     if (mPaint == null) 
     mPaint = new Paint();     // cache your paint object 
      if (mPathGrid == null) 
    mPathGrid = new Path();     // and your path 

     mPaint.setStyle(Paint.Style.FILL); 
     mPaint.setAntiAlias(true); 

     // a white arrow pointing down 
     mPaint.setColor(Color.WHITE); 
     mPaint.setStrokeWidth(2); 
     mPathGrid.reset(); 
     mPathGrid.moveTo(100.0, 100.0);   // 100,100 is starting point of path 

       // "draw" the outline of your arrow... play "connect the dots"... 
     mPathGrid.lineTo(100.0 + 10.0f, 100.0); 
     mPathGrid.lineTo(100.0 + 10.0f, 100.0 - 5.0f); 
     mPathGrid.lineTo(100.0 + 13.0f, 100.0 - 5.0f); 
     mPathGrid.lineTo(100.0 + 10.0f, 100.0 - 8.0f); 
     mPathGrid.lineTo(100.0 + 7.0f, 100.0 - 5.0f); 
     mPathGrid.lineTo(100.0 + 10.0f, 100.0 - 5.0f); 
     canvas.drawPath(mPathGrid, mPaint); 

     super.onDraw(canvas); 
    } 

我看到这个在你的代码:

for(int i=1; i<ArrayList_X.size(); i++) 
{ 
     Paint myPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     myPaint.setStrokeWidth(8/*1 /getResources().getDisplayMetrics().density*/); 
     myPaint.setColor(0xffff0000); //color.RED 
     // myPaint.setStyle(myPaint); 

     canvas.drawLine(ArrayList_X.get(i), ArrayList_Y.get(i), ArrayList_X.get(i-1), ArrayList_Y.get(i-1),myPaint);   

    } 

不喜欢在一个循环中创建新的油漆对象这个,你只需要一个!而且你只需要设置一次诸如笔画宽度,颜色等属性。

+0

好的..谢谢:) – Ruby 2012-08-16 08:31:03

0

我建议您创建一个arrow bitmap并使用我的帖子here中的以下代码,您可以轻松地转动箭头。

我希望这会有所帮助。

+0

你能告诉我如何绘制位图吗? – Ruby 2012-08-16 08:31:22

+0

我画了一张位图:)现在它的工作。谢谢。!! – Ruby 2012-08-16 10:11:52

7

希望你仍然会觉得这很有用;这里就是我画一个箭头:

private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) { 

    paint.setStyle(Paint.Style.FILL); 

    float deltaX = x1 - x0; 
    float deltaY = y1 - y0; 
    float frac = (float) 0.1; 

    float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY); 
    float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX); 

    float point_x_2 = x1; 
    float point_y_2 = y1; 

    float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY); 
    float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX); 

    Path path = new Path(); 
    path.setFillType(Path.FillType.EVEN_ODD); 

    path.moveTo(point_x_1, point_y_1); 
    path.lineTo(point_x_2, point_y_2); 
    path.lineTo(point_x_3, point_y_3); 
    path.lineTo(point_x_1, point_y_1); 
    path.lineTo(point_x_1, point_y_1); 
    path.close(); 

    canvas.drawPath(path, paint); 
} 

鉴于目前P(X0,Y0)和P(X1,Y1)与终点的直线,该方法在P绘制了一个箭头,其顶点(X1, Y1)。

可变

frac : 0 < frac < 1 

确定箭头头部的大小。

干杯!

0

我尝试此代码已完全

Here is my code... 

switch (event.getAction()) 
{ 
    case MotionEvent.ACTION_DOWN: 
     mPath.reset(); 
    mPath.moveTo(x, y); 
     mX = x; 
     mY = y; 
     startPoint = new PointF(event.getX(), event.getY()); 
     endPoint = new PointF(); 
     invalidate(); 

    // isDrawing = true; 
     break; 
    case MotionEvent.ACTION_MOVE: 
      float dx = Math.abs(x - mX); 
     System.out.println("action move"); 
     float dy = Math.abs(y - mY); 
     if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) 
     { 
     // currentDrawingPath.path.quadTo(mX,mY,(x + mX)/2, (y + mY)/2); 
     } 
     mX = x; 
     mY = y; 
      endPoint.x = event.getX(); 
      endPoint.y = event.getY(); 
      isDrawing = true; 

      invalidate(); 
     break; 
    case MotionEvent.ACTION_UP: 
      mPath.lineTo(mX, mY); 
      float deltaX = endPoint.x-startPoint.x; 
      float deltaY = endPoint.y-startPoint.y; 
      float frac = (float) 0.1; 

     float point_x_1 = startPoint.x + (float) ((1 - frac) * deltaX + frac * deltaY); 
     float point_y_1 = startPoint.y + (float) ((1 - frac) * deltaY - frac * deltaX); 

      float point_x_2 = endPoint.x; 
      float point_y_2 = endPoint.y; 

     float point_x_3 = startPoint.x + (float) ((1 - frac) * deltaX - frac * deltaY); 
     float point_y_3 = startPoint.y + (float) ((1 - frac) * deltaY + frac * deltaX); 



      mPath.moveTo(point_x_1, point_y_1); 
      mPath.lineTo(point_x_2, point_y_2); 
      mPath.lineTo(point_x_3, point_y_3); 
      mPath.lineTo(point_x_1, point_y_1); 
      mPath.lineTo(point_x_1, point_y_1); 
      mCanvas.drawPath(mPath, ppaint); 
      endPoint.x = event.getX(); 
      endPoint.y = event.getY(); 
      isDrawing = false; 
      invalidate(); 
     break; 
    default: 
     break; 
}  
+0

可以通过要求分享工作代码吗? – 2014-08-20 07:30:12

0

工作时我用Igwe卡卢的溶液,箭头头根据点之间的距离而改变的大小。

这是我的解决方案,使箭头的大小恒定,与点之间的距离无关。

private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) { 
    paint.setStyle(Paint.Style.FILL); 

    float deltaX = x1 - x0; 
    float deltaY = y1 - y0; 
    double distance = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)); 
    float frac = (float) (1/(distance/30)); 

    float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY); 
    float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX); 

    float point_x_2 = x1; 
    float point_y_2 = y1; 

    float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY); 
    float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX); 

    Path path = new Path(); 
    path.setFillType(Path.FillType.EVEN_ODD); 

    path.moveTo(point_x_1, point_y_1); 
    path.lineTo(point_x_2, point_y_2); 
    path.lineTo(point_x_3, point_y_3); 
    path.lineTo(point_x_1, point_y_1); 
    path.lineTo(point_x_1, point_y_1); 
    path.close(); 

    canvas.drawPath(path, paint); 
} 
0

同样是工作,而是为了说明..调用下面的方法的onDraw ..所以,你可以看到它是如何工作的?

private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) { 
    Paint paint = new Paint(); 
    paint.setColor(Color.BLACK); 
    paint.setStyle(Paint.Style.FILL); 

    float deltaX = x1 - x0; 
    float deltaY = y1 - y0; 
    float distance = (float) Math.sqrt((deltaX * deltaX) 
      + (deltaY * deltaY)); 
    float frac = (float) (1/(distance/15)); 

    float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY); 
    float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX); 

    float point_x_2 = x1; 
    float point_y_2 = y1; 

    float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY); 
    float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX); 

    float midOfArrow_x = (point_x_1 + point_x_3)/2; 
    float midOfArrow_y = (point_y_1 + point_y_3)/2; 

    Path path = new Path(); 
    path.setFillType(Path.FillType.EVEN_ODD); 

    path.moveTo(point_x_1, point_y_1); 
    path.lineTo(point_x_2, point_y_2); 
    path.lineTo(point_x_3, point_y_3); 
    path.lineTo(point_x_1, point_y_1); 
    // path.lineTo(point_x_1, point_y_1); 
    path.close(); 

    path.transform(mMatrix); 
    canvas.drawPath(path, paint); 

    paint = new Paint(); 
    paint.setColor(Color.RED); 
    paint.setStyle(Paint.Style.STROKE); 
    paint.setStrokeWidth(9); 
    path = new Path(); 

    path.moveTo(x0, y0); 
    path.lineTo(midOfArrow_x, midOfArrow_y); 
    path.transform(mMatrix); 
    canvas.drawPath(path, paint); 

    paint = new Paint(); 
    paint.setColor(Color.WHITE); 
    paint.setStyle(Paint.Style.STROKE); 

    canvas.drawCircle(x0, y0, 10, paint); 

    canvas.drawCircle(midOfArrow_x, midOfArrow_y, 10, paint); 

    paint.setColor(Color.RED); 
    canvas.drawCircle(point_x_1, point_y_1, 10, paint); 

    paint.setColor(Color.GREEN); 
    canvas.drawCircle(point_x_2, point_y_2, 10, paint); 

    paint.setColor(Color.BLUE); 
    canvas.drawCircle(point_x_3, point_y_3, 10, paint); 

}