绘制并填充自定义形状

时间:2014-01-08 17:43:45

标签: android

我正在尝试使用Android中的Path对象创建自定义形状,但我遇到了一个奇怪的问题。
我想要实现的目标如下图所示

enter image description here

以下是我用来绘制和填充形状的代码:

 public class BallView extends RelativeLayout {
     ....
     protected void onDraw(Canvas canvas) {
      ...
      PaintArc(canvas);
     }

    private void PaintArc(Canvas canvas) {
     Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
     p.setAntiAlias(true);
     p.setStyle(Paint.Style.FILL_AND_STROKE);
     p.setStrokeWidth(2);
     p.setColor(Color.RED);


     RectF oval = new RectF(20, 20, getWidth() - 20, getHeight() - 20);
     RectF oval2 = new RectF(0, 0, getWidth(), getHeight());
     Path path = new Path();
     path.setFillType(Path.FillType.EVEN_ODD);

     path.addArc(oval, 0, 180);
     path.addArc(oval2, 0, 180);

     float y=20+oval.height()/2;
     float x=20;
     path.moveTo(x,y);
     path.lineTo(x - 20, y);

     x=oval.width()+20;
     path.moveTo(x,y);
     path.lineTo(x+20,y);


     path.close();

     canvas.drawPath(path, p);
    } 
 }

我得到的实际结果如下:

enter image description here

没有填充的结果形状如下所示:

enter image description here

你能告诉我我做错了吗?

2 个答案:

答案 0 :(得分:4)

试试这个:

class MyView extends View {

    private Path mPath;
    private Paint mPaint;
    private RectF mOval;

    public MyView(Context context) {
        super(context);
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setColor(0xffff0000);
        mOval = new RectF();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        int dx = w / 4;
        mOval.set(0, 0, w, w);
        mPath.reset();
        mPath.moveTo(0, w / 2f);
        mPath.arcTo(mOval, 180, 180);
        mPath.rLineTo(-dx, 0);
        mOval.inset(dx, dx);
        mPath.addArc(mOval, 0, -180);
        mPath.rLineTo(-dx, 0);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(0xffffffff);

        mPaint.setStyle(Style.FILL);
        canvas.drawPath(mPath, mPaint);

        canvas.translate(0, getWidth() / 2);
        mPaint.setStyle(Style.STROKE);
        canvas.drawPath(mPath, mPaint);
    }
}

答案 1 :(得分:0)

- I have just edited my answer    
  and i add below code 
  

RectF oval3 = new RectF(10,20,getWidth() - 10,getHeight() - 10);

/ **     *现在检查这个代码输出看起来像你的想法    * /

    private void PaintArc(Canvas canvas) {
          Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
      p.setAntiAlias(true);
      p.setStyle(Paint.Style.STROKE);
      p.setStrokeWidth(2);
      p.setColor(Color.RED);

      Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG);
      p1.setAntiAlias(true);
      p1.setStyle(Paint.Style.STROKE);
      p1.setStrokeWidth(10);
      p1.setColor(Color.RED);

    RectF oval = new RectF(20, 20, getWidth() - 20, getHeight() - 20);
    RectF oval2 = new RectF(0, 0, getWidth(), getHeight());
    RectF oval3 = new RectF(10, 20, getWidth() - 10, getHeight() - 10);

    Path path = new Path();
    path.setFillType(Path.FillType.EVEN_ODD);

    path.addArc(oval, 0, 180);
    path.addArc(oval2, 0, 180);
    path.addArc(oval3, 0, 180);


    float y = 20 + oval.height() / 2;
    float x = 20;
    path.moveTo(x, y);
    path.lineTo(x - 20, y);

    x = oval.width() + 20;
    path.moveTo(x, y);
    path.lineTo(x + 20, y);

    path.close();
    canvas.drawArc(oval3, 0, 180, false, p1);

    canvas.drawPath(path, p);
}

enter image description here