绘制带箭头的曲线线在机器人画布

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

的截图。