在画布上绘制虚线答案

【问题标题】：Draw dash line on a Canvas在画布上绘制虚线
【发布时间】：2021-10-13 22:38:56
【问题描述】：

如何在画布上绘制虚线。我已经试过了：

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

它给我的不是虚线，而是一条简单的。

【问题讨论】：

我写了一个绘制虚线的视图。可以查看详情here

标签： android canvas drawing

【解决方案1】：

你正在画一条线，as per documentation，drawLine函数会：

使用指定的绘图绘制具有指定起点和终点 x,y 坐标的线段。

请注意，由于线条总是“框起来”，因此在绘画中会忽略样式。

不会绘制退化线（长度为 0）。

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

要绘制虚线，建议使用Path 原语

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

在 onDraw() 中

       canvas.drawPath(mPath, mPaint);

快照

我有背景和虚线画在它上面。

例子

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

根据需要修改以上内容。

【讨论】：

【解决方案2】：

此函数将在画布上的两点之间绘制一条虚线。这条线可以有任何斜率，即不仅仅是水平或垂直。

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

【讨论】：