Android – Chemin de remplissage avec la couleur partiellement

J'essaie de dessiner une toile en forme de coeur utilisant Path in Android. Le code est le suivant:

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Fill the canvas with background color canvas.drawColor(Color.WHITE); // paint.setShader(null); // Defining of the heart path starts path.moveTo(left + WIDTH / 2, top + HEIGHT / 4); // Starting point // Create a cubic Bezier cubic left path path.cubicTo(left+WIDTH/5,top, left+WIDTH/4,top+4*HEIGHT/5, left+WIDTH/2, top+HEIGHT); // This is right Bezier cubic path path.cubicTo(left + 3 * WIDTH / 4, top + 4 * HEIGHT / 5, left + 4 * WIDTH / 5, top, left + WIDTH / 2, top + HEIGHT / 4); paint.setShader(new LinearGradient(0, canvas.getHeight()/4, canvas.getWidth(), canvas.getHeight()/4, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[]{0, 0.6f, 1}, Shader.TileMode.CLAMP)); canvas.drawPath(path, paint); heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color heart_outline_paint.setStrokeWidth(4); heart_outline_paint.setStyle(Paint.Style.STROKE); canvas.drawPath(path, heart_outline_paint); } 

Je peux dessiner le cœur sans problème et je peux remplir la couleur dans le cœur en utilisant l'option Fill dans Paint. Mais je devrais être capable de remplir le cœur de façon dynamique selon certaines données et il ne peut pas être complété entièrement à tout moment. Ce que j'ai réalisé jusqu'ici est le suivant:

Forme cardiaque avec couleur remplie

J'ai fait une recherche approfondie et j'ai rencontré beaucoup de choses semblables à celles-ci. Certains comprennent:

  1. Android remplit une partie d'un chemin d'accès?
  2. Remplissant un cercle progressivement de bas en haut de l'Android

J'ai également rencontré le concept de convertir la toile en bitmap et de remplir la couleur dans le bitmap à l'aide de l' algorithme de remplissage des inondations qui permet aux utilisateurs de remplir des couleurs dans le bitmap. Cependant, je ne veux pas que le bitmap remplisse la couleur tout en touchant l'intérieur du cœur, mais pour le remplir pendant qu'un bouton clique action.

Je pensais que le remplissage d'un cercle progressivement de bas en haut de l'Android me donnerait de l'aide, mais il utilise un cercle et je ne suis pas bien versé dans Canvas qui me rend très faible pour adapter le code du cercle à une telle forme.

Si quelqu'un a des idées ou des idées sur la façon d'y parvenir, il sera vraiment utile. À votre santé. Merci d'avance.

PS: J'ai également essayé quelques astuces en utilisant setShader dans Paint, mais rien ne me donnerait ce que je veux.

MODIFIER :

Je me suis contenté de penser à dessiner un rectangle sur le cœur avec une autre couleur que l'arrière-plan de la toile afin qu'elle ressemble à sa moitié remplie! Je travaille toujours sur l'idée et je ne sais pas à quel point cela va être précis pour moi. Si quelqu'un a une meilleure idée, vous êtes les bienvenus.

Entrez la description de l'image ici

2 Solutions collect form web for “Android – Chemin de remplissage avec la couleur partiellement”

Vous pouvez utiliser Bitmap Masking pour obtenir un coeur partiellement rempli. Ce que vous faites idéalement ici, utilisez un bitmap pour masquer l'autre.

Dans votre cas, vous pourriez avoir un rectangle rempli dans le canevas et vous avez alors la forme du heart dans un nouveau bitmap pour agir comme masque. Vous pouvez ensuite modifier dynamiquement le remplissage du cœur en changeant la hauteur du rectangle d'arrière-plan.

Référer ceci: https://stackoverflow.com/a/33483600/4747587 . Cela contient la mise en œuvre du remplissage partiel d'une étoile . L'idée est la même.

J'ai utilisé la fonction clipPath disponible dans Canvas pour obtenir ce dont j'avais besoin. Je dessine le cœur par la méthode ci-dessus et je dessine un rectangle dessus, et j'utilise la fonction clipPath pour extraire la région qui se trouve en dehors du cœur.

  public static double filled_amount = .90; path.moveTo(left_x_moveto, left_y_moveto); path.cubicTo(left_x1, left_y1, left_x2, left_y2, left_x3, left_y3); path.cubicTo(right_x2, right_y2, right_x1, right_y1, left_x_moveto, left_y_moveto); path.close(); Rect rect = new Rect((int)(canvas.getWidth()*.10),(int)(canvas.getHeight()*filled_amount),(int) canvas.getWidth(), (int) canvas.getHeight()); canvas.clipPath(path); paint.setColor(Color.WHITE); paint.setStyle(Paint.Style.FILL); canvas.drawPath(path, paint); canvas.drawRect(rect, rect_paint); heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color heart_outline_paint.setStrokeWidth(15); heart_outline_paint.setStyle(Paint.Style.STROKE); canvas.drawPath(path, heart_outline_paint); 

Cela me donnera le résultat souhaité de remplir dynamiquement le cœur. Modifiant dynamiquement la valeur de filled_amount et l'appel invalidate() fera ressembler que le cœur est rempli dynamiquement.

@ La réponse de Henry pourrait être une meilleure, mais cela a fait l'affaire pour moi et je ne regarde pas profondément sur les bords, donc un peu de zigzags ici et là va bien.

  • Téléphone Android HTML5 Hardware Acceleration - Canvas
  • Android Canvas.drawText ne rend pas
  • Opérations composites dans Android Canvas
  • Inclinaison d'un bitmap uniquement dans la direction verticale
  • Dessin d'une ligne transparente sur la toile de view image sur Android
  • Sélectionnez la caméra arrière sur un appareil Android - jsartoolkit5
  • Comment utiliser Canvas pour fusionner deux images dans Android?
  • Comment utiliser matrix.preScale (x, y)
  • coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.