繪製帶箭頭的曲線線在機器人畫布

Question

繪製從點1（X1，Y1）到POINT2（X2，Y2）的箭頭這樣

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

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

Answer 1

我認爲你需要的是在路徑和線條畫上混合繪製。聲明這個方法您的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顯示從哪裏開始。

Answer 2

我知道我應該留下評論，但評論中的代碼很難閱讀，所以我提出了另一個答案。 答案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; 
} 

的截圖。