Draw dash line on a Canvas

30,681

You are drawing a line, as per documentation, drawLine function will:

Draw a line segment with the specified start and stop x,y coordinates, using the specified paint.

Note that since a line is always "framed", the Style is ignored in the paint.

Degenerate lines (length is 0) will not be drawn.

 canvas.drawLine(0, canvas.getHeight() / 2, canvas.getWidth(), canvas.getHeight() / 2, dashPaint) 

To draw a dashed line, a suggestion is to use the Path primitive

       private Path    mPath;
       mPath = new Path();
       mPath.moveTo(0, h / 2);
       mPath.quadTo(w/2, h/2, w, h/2); 
       // h and w are height and width of the screen  
       Paint mPaint = new Paint();
       mPaint.setARGB(255, 0, 0, 0);
       mPaint.setStyle(Paint.Style.STROKE);
       mPaint.setPathEffect(new DashPathEffect(new float[]{5, 10, 15, 20}, 0));

In onDraw()

       canvas.drawPath(mPath, mPaint); 

Snap shot

enter image description here

I have background and dashed line drew over it.

Example

public class FingerPaintActivity extends Activity {
    MyView mv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mv = new MyView(this);
        setContentView(mv);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(0xFFFF0000);
        mPaint.setARGB(255, 0, 0, 0);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setPathEffect(new DashPathEffect(new float[]{10, 40,}, 0));
        mPaint.setStrokeWidth(12);
    }

    private Paint mPaint;

    public class MyView extends View {
        private Bitmap mBitmap;
        private Canvas mCanvas;
        private Path mPath;
        private Paint mBitmapPaint;
        Context context;

        public MyView(Context c) {
            super(c);
            context = c;
            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mBitmap);
            mPath.moveTo(0, h / 2);
            mPath.quadTo(w / 2, h / 2, w, h / 2);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
            canvas.drawPath(mPath, mPaint);
        }
    }
}

Modify the above according to your needs.

Share:
30,681

Related videos on Youtube

Procurares
Author by

Procurares

Updated on October 14, 2021

Comments

  • Procurares
    Procurares over 2 years

    How can i draw dash line on a canvas. I already tried this:

    Paint dashPaint = new Paint();
    dashPaint.setARGB(255, 0, 0, 0);
    dashPaint.setStyle(Paint.Style.STROKE);
    dashPaint.setPathEffect(new DashPathEffect(new float[]{5, 10, 15, 20}, 0));
    canvas.drawLine(0, canvas.getHeight() / 2, canvas.getWidth(), canvas.getHeight() / 2, dashPaint);
    

    And it gave me not dash line but a simple one.

    • ruidge
      ruidge over 10 years
      I have written a view which draws dash line. You can see detail here