Dessiner l'arc de bord arrondi dans l'Android avec effet gaufré

J'essaie de développer un composant personnalisé, c'est-à-dire un curseur d'arc, j'ai fini avec l'arc et le pouce, mais je ne peux pas comprendre comment puis-je dessiner l'arc de bord arrondi et aussi l'effet gaufré. Au moment où le curseur ressemble à quelque chose comme ça

Entrez la description de l'image ici

Le code pour dessiner l'arc est

private void drawSlider(Canvas canvas) { float sweepDegrees = (value * arcWidthInAngle) / (maximumValue - minimumValue); // the grey empty part of the circle drawArc(canvas, startAngle, arcWidthInAngle, mTrackColor); // the colored "filled" part of the circle drawArc(canvas, startAngle, sweepDegrees, mFillColor); // the thumb to drag. int radius = ((diameter/2) - (mArcThickness/2)); Point thumbPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees); thumbPoint.x = thumbPoint.x - (mThumbDiameter/2); thumbPoint.y = thumbPoint.y - (mThumbDiameter/2); Bitmap thumbBitmap = BitmapFactory.decodeResource( mContext.getResources(), R.drawable.circle25); thumbBitmap = getResizedBitmap(thumbBitmap, mThumbDiameter, mThumbDiameter); canvas.drawBitmap(thumbBitmap, thumbPoint.x, thumbPoint.y, null); } private void drawArc(Canvas canvas, float startAngle, float sweepDegrees, Paint paint) { if (sweepDegrees <= 0 || sweepDegrees > arcWidthInAngle) { return; } path.reset(); path.arcTo(outerCircle, startAngle, sweepDegrees); path.arcTo(innerCircle, startAngle + sweepDegrees, -sweepDegrees); // innerCircle. path.close(); canvas.drawPath(path, paint); } 

Je vis l'arc comme ça

Entrez la description de l'image ici

4 Solutions collect form web for “Dessiner l'arc de bord arrondi dans l'Android avec effet gaufré”

Pour les bords arrondis, vous pouvez utiliser la méthode Paint.setStrokeCap ​​(). En outre, le capuchon de peinture par défaut est BUTT. Vous devriez utiliser le capuchon Paint.Cap.ROUND à la place.

Par exemple:

 Paint mFillColor = new Paint(); mFillColor.setStrokeCap(Paint.Cap.ROUND) 

J'ai réussi à construire l'arc quelque chose comme ci-dessous

Entrez la description de l'image ici

Ce que j'ai fait, c'est que j'ai calculé le point de départ et de départ de l'arc, puis je dessine le cercle avec un diamètre égal à l'épaisseur de l'arc.

Le code pour cela est

 private void drawSlider(Canvas canvas) { float sweepDegrees = (value * arcWidthInAngle) / (maximumValue - minimumValue); // the grey empty part of the arc drawArc(canvas, startAngle, arcWidthInAngle, mTrackColor); // the colored "filled" part of the arc drawArc(canvas, startAngle, sweepDegrees, mFillColor); // the thumb to drag. int radius = ((diameter/2) - (mArcThickness/2)); Point thumbPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees); thumbPoint.x = thumbPoint.x - (mThumbDiameter/2); thumbPoint.y = thumbPoint.y - (mThumbDiameter/2); Bitmap thumbBitmap = BitmapFactory.decodeResource( mContext.getResources(), R.drawable.circle25); thumbBitmap = getResizedBitmap(thumbBitmap, mThumbDiameter, mThumbDiameter); canvas.drawBitmap(thumbBitmap, thumbPoint.x, thumbPoint.y, null); //drawArc(canvas, startAngle, startAngle + sweepDegrees, white); } private void drawArc(Canvas canvas, float startAngle, float sweepDegrees, Paint paint) { if (sweepDegrees <= 0 || sweepDegrees > arcWidthInAngle) { return; } path.reset(); int radius = ((diameter/2) - (mArcThickness/2)); Point startPoint = calculatePointOnArc(centerX, centerY, radius, startAngle); Point endPoint = calculatePointOnArc(centerX, centerY, radius, startAngle + sweepDegrees); path.arcTo(outerCircle, startAngle, sweepDegrees); path.arcTo(innerCircle, startAngle + sweepDegrees, -sweepDegrees); // drawing the circle at both the end point of the arc to git it rounded look. path.addCircle(startPoint.x, startPoint.y, mArcThickness/2, Path.Direction.CW); path.addCircle(endPoint.x, endPoint.y, mArcThickness/2, Path.Direction.CW); path.close(); canvas.drawPath(path, paint); } // this is to calculate the end points of the arc private Point calculatePointOnArc(int circleCeX, int circleCeY, int circleRadius, float endAngle) { Point point = new Point(); double endAngleRadian = endAngle * (Math.PI / 180); int pointX = (int) Math.round((circleCeX + circleRadius * Math.cos(endAngleRadian))); int pointY = (int) Math.round((circleCeY + circleRadius * Math.sin(endAngleRadian))); point.x = pointX; point.y = pointY; return point; } // for the emboss effect set maskfilter of the paint to EmbossMaskFilter private Paint mTrackColor = new Paint(); MaskFilter mEmboss = new EmbossMaskFilter(new float[] { 0.0f, -1.0f, 0.5f}, 0.8f, 15, 1.0f); mTrackColor.setMaskFilter(mEmboss); 

Vous utilisez le chemin pour dessiner l'arc. Utilisez CornerPathEffect pour arrondir les coins. Exemple ici Exemple CornerPathEffect example .

Et voici l'exemple pour l'effet gaufré. Je ne sais pas si c'est ce que vous voulez. Embossed effect example

Utilisez la méthode Paint.setStrokeCap ​​(). Vous avez besoin de Paint.Cap.ROUND. La valeur par défaut est Paint.Cap.BUTT. Il existe une propriété de chemin similaire appelée jointure de chemin. Il détermine comment dessiner les parties du chemin où se rejoignent les segments constitutifs. Pour le configurer, utilisez Path.setPathJoin (). Vous pourriez en avoir besoin à l'avenir. Bonne chance.

  • Les coordonnées ne correspondent pas
  • Format de fenêtre Android par défaut
  • Canvas .toDataURL () renvoie l'image partiellement corrompue
  • Tissu.js redimensionner la toile pour s'adapter à l'écran
  • Pouvez-vous expliquer le comportement de TextView + Gravity + SingleLine et Canvas?
  • Android - Chemin de remplissage avec la couleur partiellement
  • Problèmes de toile HTML5 sur Android 4.1.1
  • Téléphone Android HTML5 Hardware Acceleration - Canvas
  • coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.