Dibujar el arco de borde redondeado en android con efecto grabado en relieve

Estoy tratando de desarrollar un componente personalizado, es decir, arco deslizante, estoy hecho con el arco y el pulgar, pero no es capaz de averiguar cómo puedo dibujar el arco de borde redondeado y también el efecto grabado en él. En el momento en el control deslizante se ve algo así

Introduzca aquí la descripción de la imagen

El código para dibujar el arco es

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

Estoy apuntando para el arco algo como esto

Introduzca aquí la descripción de la imagen

Para los bordes redondeados, puede utilizar el método Paint.setStrokeCap ​​(). Además, la tapa de pintura predeterminada es BUTT. Debería utilizar la tapa Paint.Cap.ROUND en su lugar.

Por ejemplo:

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

Me las arreglé para construir el arco algo como lo de abajo

Introduzca aquí la descripción de la imagen

Lo que hice fue calcular el punto inicial y final del arco y allí dibujo el círculo con un diámetro igual al grosor del arco.

El código para esto es

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

Está utilizando el camino para dibujar el arco. Utilice CornerPathEffect para redondear las esquinas. Ejemplo aquí CornerPathEffect example .

Y aquí está el ejemplo de efecto grabado. No estoy seguro de si es lo que quieres. Embossed effect example

Utilice el método Paint.setStrokeCap ​​(). Necesitas Paint.Cap.ROUND. La opción predeterminada es Paint.Cap.BUTT. Hay una propiedad Path similar que se llama path join. Determina cómo dibujar las partes de la ruta donde se unen los segmentos constituyentes. Para establecerlo use Path.setPathJoin (). Es posible que lo necesite en el futuro. Buena suerte.

  • ¿Por qué dibujar bitmaps es muy lento en algunos teléfonos Android 2.2?
  • Cómo colorear diferentes partes del texto dibujado en un lienzo en Android?
  • Adición de touchListener al objeto path
  • Inclinar una vista de texto en Android
  • El lienzo no dibuja en Vista personalizada
  • Dibujo de una cabeza de flecha en android
  • ¿Cómo obtener la entrada de texto en lienzo?
  • Coloque un rectángulo alrededor de una cadena en un lienzo de Android
  • ¿Por qué Google utiliza Canvas en la vista de la lista de conversaciones de aplicaciones de Gmail?
  • Android - Cómo superponer un camino encima de otro
  • ¿Cómo hacer que cualquier vista dibuje a la lona?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.