android - 在android画布中绘制一条带箭头的曲线

Question

像这样从 point1(x1,y1) 到 point2(x2,y2) 绘制一条带箭头的曲线

我正在 android canvas 中开发一个应用程序。自动机之类的应用程序，我在画一条末端带有箭头的曲线时遇到了麻烦。指向下一个圆圈。

你能给我一个代码或建议吗？

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

}

这只是一个糟糕的例子，但它应该显示从哪里开始。

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

截图。