代码之家  ›  专栏  ›  技术社区  ›  San

Android-用颜色部分填充路径

  •  7
  • San  · 技术社区  · 9 年前

    我正在尝试在Android中使用Path绘制心形画布。代码如下:

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

    我能够毫无问题地画出心,我能够使用 Fill 选项。但我应该能够根据一些数据动态地填充心脏,而它不能一直被完全填充。到目前为止,我取得的成就如下:

    Heart Shape with Filled Color

    我进行了广泛的搜索,发现了很多类似的东西。其中包括:

    1. Android fill in part of a path?
    2. filling a circle gradually from bottom to top android

    我还遇到了将画布转换为位图并使用 Flood Fill Algorithm 这允许用户在位图内填充颜色。然而,我不希望位图在触摸心脏内部时填充颜色,而是在单击按钮时填充。

    我以为 从底部到顶部逐渐填充一个圆圈android 会给我帮助,但它使用了一个圆圈,我对画布不太熟悉,这使我很难将圆圈代码适应这样的形状。

    如果有人对如何实现这一目标有一些想法或见解,这将非常有用。干杯提前感谢。

    附笔: 我还尝试了一些技巧 setShader 但没有什么能给我我想要的。

    编辑:

    我刚刚偶然想到了一个想法,用与画布背景相同的另一种颜色在心脏上绘制一个矩形,这样它看起来就像是半填充的!!我仍在研究这个想法,不知道这对我来说有多准确。如果有人有更好的想法,欢迎你。

    enter image description here

    2 回复  |  直到 8 年前
        1
  •  2
  •   San    9 年前

    我用过 clipPath Canvas中可用的功能,以实现我所需的功能。我用上面的方法画出心脏,并在上面画一个矩形,然后使用 剪辑路径 功能来裁剪出心脏外部的区域。

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

    这将给我一个动态填充心脏的理想结果。更改的值 filled_amount 动态和调用 invalidate() 将使其看起来像是心脏在动态填充。

    @亨利的回答可能更好,但这对我来说很有用,我没有深入观察边缘,所以这里和那里都有点曲折。

        2
  •  1
  •   Community CDub    8 年前

    你可以使用 Bitmap Masking 获得部分填充的心脏。理想的做法是使用一个位图掩盖另一个位图。

    在你的例子中,你可以在画布上有一个填充的矩形 heart 在新位图中创建形状以用作遮罩。然后可以通过改变背景矩形的高度来动态地改变心脏的填充。

    请参阅: https://stackoverflow.com/a/33483600/4747587 。这包括 部分填充星形 。想法是一样的。