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í
- Dibujo punteado (...) camino en lugar de una línea (________)
- ¿Cómo encajan las piezas de la tubería de dibujo de Canvas de Android (2D)?
- Cómo fijar la aplicación no responde?
- Animar dibujo de círculo / arco sobre lienzo
- Agregar un círculo de cuadro redondo en mapa de bits redondeado
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
- Cómo guardar el lienzo de dibujo en android?
- Android Canvas.drawCircle en el centro de la pantalla
- SurfaceHolder.lockCanvas () Devuelve null Aunque estaba disponible
- Cómo reposicionar puntos en una vista en la resolución de pantalla diferente?
- ¿Cómo mostrar tanto MarkerIcon como Title en google map como Google Apps?
- Android - Dibujo de un laberinto de lienzo con el movimiento de caracteres suave
- Cómo antialiasing en el lienzo y el camino
- Cargar un recurso a un mapa de bits mutable
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
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.
- Cómo llenar ListPreference dinámicamente cuando onPreferenceClick se dispara?
- Obtenga milisegundos hasta la medianoche