bitmap - Android - Fill Path with color partially -
i trying draw heart shaped canvas using path in android. code follows :
@override protected void ondraw(canvas canvas) { super.ondraw(canvas); // fill canvas background color canvas.drawcolor(color.white); // paint.setshader(null); // defining of heart path starts path.moveto(left + width / 2, top + height / 4); // starting point // create cubic bezier cubic left path path.cubicto(left+width/5,top, left+width/4,top+4*height/5, left+width/2, top+height); // 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 boundary color heart_outline_paint.setstrokewidth(4); heart_outline_paint.setstyle(paint.style.stroke); canvas.drawpath(path, heart_outline_paint); }
i able draw heart without issue , able fill color inside heart using fill
option in paint. should able fill heart dynamically according data , cannot filled time. have achieved far follows :
i have made extensive search , came across lot of things similar this. of includes :
i came across concept of converting canvas bitmap , filling color inside bitmap using flood fill algorithm lets users fill colors inside bitmap. however, not want bitmap fill color while touching inside heart fill while button click action.
i thought filling circle gradually bottom top android give me makes use of circle , not well-versed in canvas makes me weak in adapting circle code such shape.
if has ideas or insights on how achieve this, helpful. cheers. in advance.
p.s : tried tricks using setshader
in paint nothing give me want.
edit :
i stumbled upon idea of drawing rectangle on heart color same background of canvas half filled !! still working on idea , not sure how accurate gonna me. if has better idea, you're welcome.
you use bitmap masking
partially filled heart. ideally here use 1 bitmap mask other.
in case have filled rectangle in canvas , have have heart
shape in new bitmap act mask. dynamically change filling of heart changing height of background rectangle.
refer this: https://stackoverflow.com/a/33483600/4747587. contains implementation of partially filling star. idea same.
Comments
Post a Comment