Draw dash line on a Canvas

Question

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.

Felicitasfelicitate

I have written a view which draws dash line. You can see detail here – Si

Answer 1

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

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.

Diencephalon

Answer 2

This function will draw a dashed line between two points on the canvas. The line can have any slope, i.e. not just horizontal or vertical.

void drawDashedLine(Canvas canvas, Offset p1, Offset p2, double dashLength) {
  double xDiff = p2.dx - p1.dx;
  double yDiff = p2.dy - p1.dy;
  double lengthSquared = xDiff * xDiff + yDiff * yDiff;
  double length = sqrt(lengthSquared);
  double dx = dashLength * xDiff / length;
  double dy = dashLength * yDiff / length;
  double x = p1.dx;
  double y = p1.dy;
  double len = 0;
  Paint paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 5;
  while (len * len < lengthSquared) {
    canvas.drawLine(Offset(x, y), Offset(x + dx, y + dy), paint);
    x += dx * 2;
    y += dy * 2;
    len += dashLength * 2;
  }
}

Verb