Draw dash line on a Canvas Draw dash line on a Canvas android android

Draw dash line on a Canvas


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.


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;  }}