Android 将线标记添加到圆弧的边缘

Question

我们如何在 arc.

的边缘添加 line 标记

我们知道可以使用以下方法绘制 arc：

canvas.drawArc(arcBounds, 0, 90, false, paint);

上面的语句会在下午 3 点到 6 点抽取 arc。我想在 arc 的两个边缘添加 line 标记，如下图所示。

我可以使用以下方法在两个边缘画圆：

canvas.drawCircle(endX, endY, 5, timeArcPaints);

我有 startX 和 startY、endX 和 endY 位置 arc，但是我不确定如何绘制line 标记，使其与 arc 端点处于同一角度。

public void drawLine (float startX, 
                float startY, 
                float stopX, 
                float stopY, 
                Paint paint)

谢谢！

Answer 1

在 android 中，paint 包含如何绘制的样式和颜色信息 view.You 需要使用 paint Style 来实现所需的绘图。

为标记创建油漆

 private Paint createMarkerPaint(){
    Paint p = new Paint();
    p.setAntiAlias(true);
    p.setDither(true);
    p.setColor(Color.RED);
    p.setStyle(Paint.Style.FILL_AND_STROKE);
    p.setStrokeWidth(20);
    p.setStrokeCap(Paint.Cap.ROUND); // makes the stroke projects out as semicircle
    p.setStrokeJoin(Paint.Join.ROUND); // makes outer edges of a join meet in circular arc
    return p;
}

使用此功能创建线标记

 private void drawLineMarkers(Canvas c, float startX, float startY, float endX, float endY){

    int lineHeight = 20; // play with it
    int lineWidth = 20; // play with it
    c.drawLine(startX, startY, startX - lineWidth, startY - lineHeight, markerPaint);
    c.drawLine(startX, startY, startX + lineWidth, startY + lineHeight, markerPaint);

    c.drawLine(endX, endY, endX - lineWidth, endY - lineHeight, markerPaint);
    c.drawLine(endX, endY, endX + lineWidth, endY + lineHeight, markerPaint);

}

Answer 2

自定义视图的代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.view.View;

public class MarkerView extends View {

    private final Paint markerPaint;
    private RectF oval;
    private final int boundingRectDimens = 200;
    private int centerX;
    private int centerY;

    private final float startAngle = 190;
    private final float sweepAngle = 90;
    private final float markerAngle = 180; // angle of markers w.r.t start point and end/sweep point


    public MarkerView(Context context) {
        super(context);
        markerPaint = createMarkerPaint();

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        centerX = w / 2;
        centerY = h / 2;
        oval = new RectF(centerX - boundingRectDimens,
                centerY - boundingRectDimens,
                centerX + boundingRectDimens,
                centerY + boundingRectDimens);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.DKGRAY);
        canvas.drawArc(oval, startAngle, sweepAngle, false, markerPaint);


        float startX, startY, endX, endY;
        // calculate start points.

        //get a line from startAngle till markerAngle.
        startX = (float) (Math.cos(Math.toRadians(startAngle)) * boundingRectDimens + centerX);
        startY = (float) (Math.sin(Math.toRadians(startAngle)) * boundingRectDimens + centerY);
        endX = (float) (Math.cos(Math.toRadians(startAngle + markerAngle)) * boundingRectDimens + centerX);
        endY = (float) (Math.sin(Math.toRadians(startAngle + markerAngle)) * boundingRectDimens + centerY);

        // we need to draw only a part of the entire line, using vector for this.
        // vector dimens.
        float desiredLen = 0.05f;  // maker height can be adjusted by changing this value.
        float upLen = 1 - desiredLen;
        float downLen = 1 + desiredLen;
        // calculate down vector.
        float desiredX = downLen * (startX - endX) + endX;
        float desiredY = downLen * (startY - endY) + endY;

        markerPaint.setColor(Color.YELLOW);
        canvas.drawLine(startX, startY, desiredX, desiredY, markerPaint);
        // get up vector
        desiredX = upLen * (startX - endX) + endX;
        desiredY = upLen * (startY - endY) + endY;
        canvas.drawLine(startX, startY, desiredX, desiredY, markerPaint);


        // repeat same for end/sweep point.
        startX = (float) (Math.cos(Math.toRadians(startAngle + sweepAngle)) * boundingRectDimens + centerX);
        startY = (float) (Math.sin(Math.toRadians(startAngle + sweepAngle)) * boundingRectDimens + centerY);
        endX = (float) (Math.cos(Math.toRadians(startAngle + sweepAngle + markerAngle)) * boundingRectDimens + centerX);
        endY = (float) (Math.sin(Math.toRadians(startAngle + sweepAngle + markerAngle)) * boundingRectDimens + centerY);

        // calculate down vector.
        desiredX = downLen * (startX - endX) + endX;
        desiredY = downLen * (startY - endY) + endY;

        markerPaint.setColor(Color.BLUE);
        canvas.drawLine(startX, startY, desiredX, desiredY, markerPaint);
        // get up vector
        desiredX = upLen * (startX - endX) + endX;
        desiredY = upLen * (startY - endY) + endY;
        canvas.drawLine(startX, startY, desiredX, desiredY, markerPaint);


    }


    private Paint createMarkerPaint() {
        Paint p = new Paint();
        p.setAntiAlias(true);
        p.setDither(true);
        p.setColor(Color.RED);
        p.setStyle(Paint.Style.STROKE);
        p.setStrokeWidth(20);
        p.setStrokeCap(Paint.Cap.ROUND); // makes the stroke projects out as semicircle
        p.setStrokeJoin(Paint.Join.ROUND); // makes outer edges of a join meet in circular arc
        return p;
    }
}

Android 将线标记添加到圆弧的边缘

Android add line markers to edges of arc

java

math

android

android-canvas

wear-os