web-dev-qa-db-fra.com

Comment dessiner un arc entre deux points de la toile?

J'ai deux points dans la toile, maintenant je suis en mesure de tracer une ligne entre ces points comme ceci ci-dessous image en utilisant 

Ce code canvas.drawLine(p1.x, p1.y, p2.x, p2.y, Paint);enter image description here

Je veux dessiner l'arc entre deux points comme l'image ci-dessous.

enter image description here

Comment puis-je dessiner comme ça.

androidandroid-canvasondraw
43
RajaReddy PolamReddy

Enfin, j'ai obtenu la solution de ce code:

float radius = 20;
final RectF oval = new RectF();
oval.set(point1.x - radius, point1.y - radius, point1.x + radius, point1.y+ radius);
Path myPath = new Path();
myPath.arcTo(oval, startAngle, -(float) sweepAngle, true);

Pour calculer startAngle, utilisez ce code:

int startAngle = (int) (180 / Math.PI * Math.atan2(point.y - point1.y, point.x - point1.x));

Ici, point1 signifie où vous voulez commencer à dessiner l’arc. sweepAngle signifie l'angle entre deux lignes. Nous devons calculer cela en utilisant deux points, comme les points bleus dans mon image Question.

46
RajaReddy PolamReddy

Faites quelque chose comme ça:

@Override
protected void onDraw(Canvas canvas) {      
    Paint p = new Paint();
    RectF rectF = new RectF(50, 20, 100, 80);
    p.setColor(Color.BLACK);
    canvas.drawArc (rectF, 90, 45, true, p);
}
18
Adil Soomro

J'essayais de faire quelque chose d'un peu différent et tout est basé sur le calcul du balayage et des angles de départ.

Je voulais montrer un arc qui représente les progrès sur un cercle qui va de haut en bas.

Donc, j'avais une valeur de progression de 0 ... 100 et je veux montrer un arc qui commence de haut en bas pour remplir le cercle lorsque la progression est de 100.

Pour calculer l'angle de balayage que j'utilise:

    int sweepAngle = (int) (360 * (getProgress() / 100.f));

Suivant est de calculer le startAngle

    int startAngle = 270 - sweepAngle / 2;

L'angle de départ est calculé de cette façon parce que:

  1. Cela commence toujours par le côté gauche, du haut vers le bas. Ainsi, l'angle de départ au sommet est égal à 270 (notez qu'il tourne dans le sens des aiguilles d'une montre et que 0 = 3 heures, donc 12 heures est égal à 270 degrés)
  2. Ensuite, je veux calculer la distance qui me sépare de mon point de départ (270) et je ne calcule que la moitié de l’angle de balayage, car seule la moitié de l’arc sera à gauche et Le côté droit.

Donc, considérant que j'ai des progrès de 25%

sweepAngle = 90 degrees (90 degrees is quarter of a circle)
start angle = 225 (45 degrees away from 270)

Si vous voulez que la progression aille des autres côtés (de gauche à droite, de droite à gauche, etc.), il vous suffira de remplacer 270 par l'angle de départ.

4
Ahmad Baraka

un échantillon pour dessiner un arc.

public static Bitmap clipRoundedCorner(Bitmap bitmap, float r, boolean tr, boolean tl, boolean bl, boolean br)
{
    int W = bitmap.getWidth();
    int H = bitmap.getHeight();

    if (r < 0)
        r = 0;

    int smallLeg = W;

    if(H < W )
        smallLeg = H;

    if (r > smallLeg)
        r = smallLeg / 2;

    float lineStop = r/2;

    Path path = new Path();
    path.moveTo(0,0);

    if(tr)
    {
        path.moveTo(0, lineStop);
        path.arcTo(new RectF(0,0, r,r), 180, 90, false);
    }

    path.lineTo(W-lineStop, 0);

    if(tl)
        path.arcTo(new RectF(W-r,0, W,r), 270, 90, false);
    else
        path.lineTo(W, 0);

    path.lineTo(W, H-lineStop);

    if(bl)
        path.arcTo(new RectF(W-r,H-r, W,H), 0, 90, false);
    else
        path.lineTo(W, H);

    path.lineTo(lineStop, H);

    if(br)
        path.arcTo(new RectF(0,H-r, r,H), 90, 90, false);
    else
        path.lineTo(0,H);

    if(tr)
        path.lineTo(0,lineStop);
    else
        path.lineTo(0,0);


    Bitmap output = Bitmap.createBitmap(W, H, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    Paint.setColor(Color.BLACK);
    canvas.drawPath(path, Paint);

    Paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, 0, 0, Paint);

    return output;
}
0
Ali Bagheri

Une solution simple a été suggérée ici par Langkiller. Ceci trace une ligne cubique du point de départ au point final via le point de contrôle. 

Path path = new Path();
float startX = 0;
float startY = 2;
float controlX = 2;
float controlY = 4;
float endX = 4
float endY = 2
conePath.cubicTo(startX, startY, controlX, controlY,endX, endY);

Paint paint = new Paint();
Paint.setARGB(200, 62, 90, 177);
Paint.setStyle(Paint.Style.FILL);

canvas.drawPath(path, Paint)
0
Petterson