2013-03-13 145 views
2

繪製從點1(X1,Y1)到POINT2(X2,Y2)的箭頭這樣 enter image description here繪製帶箭頭的曲線線在機器人畫布

曲線我正在開發的Android在帆布的應用程序。 像應用程序自動機,我在最後繪製曲線與箭頭的麻煩。指向下一個圓的 。

你能給我一個關於這個的代碼或建議嗎?

+0

如果您使用的是畫布,你可以使用http://developer.android.com/reference/android/graphics/Canvas.html#drawArc(android.graphics.RectF,浮球,浮球,布爾,android.graphics.Paint),但你將不得不創建輔助方法手動在圓弧的開始和結束繪製兩個箭頭線。 – Shellum 2013-03-13 18:14:15

回答

5

我認爲你需要的是在路徑和線條畫上混合繪製。聲明這個方法您的onDraw裏面:

private void drawOvalAndArrow(Canvas canvas){ 


    Paint circlePaint = new Paint(); 
    circlePaint.setStyle(Paint.Style.FILL_AND_STROKE); 
    circlePaint.setAntiAlias(true); 
    circlePaint.setStrokeWidth(2); 
    circlePaint.setColor(Color.CYAN); 

    float centerWidth = canvas.getWidth()/2; //get center x of display 
    float centerHeight = canvas.getHeight()/2; //get center y of display 
    float circleRadius = 20; //set radius 
    float circleDistance = 200; //set distance between both circles 

    //draw circles 
    canvas.drawCircle(centerWidth, centerHeight, circleRadius, circlePaint); 
    canvas.drawCircle(centerWidth+circleDistance, centerHeight, circleRadius, circlePaint); 


    //to draw an arrow, just lines needed, so style is only STROKE 
    circlePaint.setStyle(Paint.Style.STROKE);  
    circlePaint.setColor(Color.RED); 

    //create a path to draw on 
    Path arrowPath = new Path(); 

    //create an invisible oval. the oval is for "behind the scenes" ,to set the path´ 
    //area. Imagine this is an egg behind your circles. the circles are in the middle of this egg 
    final RectF arrowOval = new RectF(); 
    arrowOval.set(centerWidth, 
      centerHeight-80, 
      centerWidth + circleDistance, 
      centerHeight+80); 

    //add the oval to path 
    arrowPath.addArc(arrowOval,-180,180); 

    //draw path on canvas 
    canvas.drawPath(arrowPath, circlePaint); 


    //draw arrowhead on path start 
    arrowPath.moveTo(centerWidth,centerHeight); //move to the center of first circle 
    arrowPath.lineTo(centerWidth-circleRadius, centerHeight-circleRadius);//draw the first arrowhead line to the left 
    arrowPath.moveTo(centerWidth,centerHeight);//move back to the center 
    arrowPath.lineTo(centerWidth+circleRadius, centerHeight-circleRadius);//draw the next arrowhead line to the right 

    //same as above on path end 
    arrowPath.moveTo(centerWidth+circleDistance,centerHeight); 
    arrowPath.lineTo((centerWidth+circleDistance)-circleRadius, centerHeight-circleRadius); 
    arrowPath.moveTo(centerWidth+circleDistance,centerHeight); 
    arrowPath.lineTo((centerWidth+circleDistance)+circleRadius, centerHeight-circleRadius); 

    //draw the path 
    canvas.drawPath(arrowPath,circlePaint); 

} 

這僅僅是一個壞榜樣,但itshould顯示從哪裏開始。

1

我知道我應該留下評論,但評論中的代碼很難閱讀,所以我提出了另一個答案。 答案Opiatefuchs它基本上是正確的。但有一件事你應該注意,如果你想測試他的代碼。

float centerWidth = canvas.getWidth()/2; //get center x of display 
float centerHeight = canvas.getHeight()/2; //get center y of display 

centerWidth和centerHeight應該像下面那樣獲得,否則什麼都不會塗在你的屏幕上。 和circleDistance = 200對於普通手機的屏幕有點大(對於我的設備三星i9300來說,200太大,第二個圓定位在屏幕範圍外,例如將其更改爲更小的值80)。

@Override 
protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
    super.onSizeChanged(w, h, oldw, oldh); 
    centerWidth = w/2; 
    centerHeight = h/2; 
} 

的截圖。

enter image description here