1

Following list shows the x,y coordinates and particular method used to create a Path.

0 0 moveTO

180 0 lineTo

180 0 moveTO

246 227, 127 24, 115 150 cubicTo 127 276, 246 71, 180 300
cubicTo

180 300 moveTO

44 261, 166 332, 90 339 cubicTo

14 332, 136 261, 0 300 cubicTo

0 300 moveTO

0 0 lineTo

Raw data points

x = [0, 180, 180, 246, 127, 115, 127, 246, 180, 180, 44, 166, 90, 14, 136, 0, 0, 0]

y = [0, 0, 0, 227, 24, 150, 276, 71, 300, 300, 261, 332, 339, 332, 261, 300, 300, 0]

Idea of this algo is to draw four sides. Two sides are straight lines. Other two sides are composed of bezier curves having seven points in each curve. This is drawn using 1 moveTo and 2 cubicTo methods.

Currently it creates a closed irregular shape if I use Paint.Style.STROKE. When it is drawn on the canvas using Paint.Style.FILL, it fills up only a part of the shape leaving a large square part empty in the middle. Some parts that is been filled are out of the shape closed area.

paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);

My objective is to draw a bitmap covering this closed area. However, because the fill path does not fill the area correctly my objective cannot be achieved.

Is there a way to realize this.

Thanks

Madhawa Priyashantha
  • 9,633
  • 7
  • 33
  • 60
user2943193
  • 41
  • 1
  • 12

1 Answers1

3

Please post your actual code. It's unclear from your formatting if you're calling moveTo or lineTo after arriving at the set of points or before.

EDIT:

The moveTo calls are unnecessary, the lineTo and cubicTo calls already move you to the new point.

Your code:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.FILL);

    p.moveTo(0, 0);
    p.lineTo(180, 0);
    p.moveTo(180, 0);
    p.cubicTo(246, 227, 127, 24, 115, 150);
    p.cubicTo(127, 276, 246, 71, 180, 300);
    p.moveTo(180, 300);
    p.cubicTo(44, 261, 166, 332, 90, 339);
    p.cubicTo(14, 332, 136, 261, 0, 300);
    p.moveTo(0, 300);
    p.lineTo(0, 0);

    canvas.drawPath(p, paint);
}

produced this:

image with drawing error

Removing the moveTo calls (and using close() instead of lineTo(0,0)):

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.FILL);

    p.lineTo(180, 0);
    p.cubicTo(246, 227, 127, 24, 115, 150);
    p.cubicTo(127, 276, 246, 71, 180, 300);
    p.cubicTo(44, 261, 166, 332, 90, 339);
    p.cubicTo(14, 332, 136, 261, 0, 300);
    p.close();

    canvas.drawPath(p, paint);
}

produced this:

fixed image

griffinjm
  • 493
  • 2
  • 10
  • Apologize, not been able to post the code. Its lengthy and scattered in few files. The coordinates are the values used in each method. Eg, Path.moveTo(0, 0); Path.lineTo(180 0 ); Path.cubicTo(246, 227, 127, 24, 115, 150) The list shows the order of the method calls. Thanks – user2943193 Aug 06 '14 at 00:51
  • I've updated my answer with a fix and explanation along with images to show the results of both pieces of code. – griffinjm Aug 06 '14 at 09:13
  • "moveTo calls are unnecessary" ... thank you! I thought they were and was planning to remove them as soon as I get this fill working :D – oli.G Jul 14 '17 at 12:17