how to draw a line with arrow with varying stroke width values

Question

I have drawn arrow when i try to increase arrow stroke width , it looks wierd.Two lines are overlapping and thickness applies from center. Is there any other way to apply strokewidth outwards.

I have referred below link to draw an arrow, How do I draw an arrowhead (in Android)?

public class Arrow: View
{
    float x0 = 300, y0 = 1000, x1 = 600, y1 = 200;
    internal static int DENSITY = -1;

    public Arrow(Context con):base(con)
    {
        DENSITY = (int)con.Resources.DisplayMetrics.Density;
    }

    protected override void OnDraw(Canvas canvas)
    {
        Paint paint = new Paint();
        paint.StrokeWidth = 10 * Arrow.DENSITY;
        float angle, anglerad, radius, lineangle;
        radius = 45;
        angle = 45;

        //calculate line angles
        anglerad = (float)(Math.Pi * angle / 180.0f);
        lineangle = (float)(Math.Atan2(y1 - y0, x1 - x0));
        Path mArrow = new Android.Graphics.Path();


        mArrow.MoveTo(x1, y1);
        var a1 = (float)(x1 - radius * Math.Cos(lineangle - (anglerad / 2.0)));
        var a2 = (float)(y1 - radius * Math.Sin(lineangle - (anglerad / 2.0)));
        mArrow.LineTo(a1, a2);
        mArrow.MoveTo(a1, a2);
        mArrow.MoveTo(x1, y1);
        var a3 = (float)(x1 - radius * Math.Cos(lineangle + (anglerad / 2.0)));
        var a4 = (float)(y1 - radius * Math.Sin(lineangle + (anglerad / 2.0)));
        mArrow.LineTo(a3, a4);

        paint.AntiAlias = true;
        paint.SetStyle(Android.Graphics.Paint.Style.Stroke);
        canvas.DrawPath(mArrow, paint);
        canvas.DrawLine(x0, y0, x1, y1, paint);

        base.OnDraw(canvas);
    }
}

score 1 · Answer 1 · answered Aug 24 '17 at 08:31

You can use QuadTo to replace the LineTo here, and since this api add a quadratic bezier from the last point, approaching control point (x1,y1), and ending at (x2,y2). Be careful with the start point and the last point of the lines.

So you can replace your code:

mArrow.MoveTo(x1, y1);
var a1 = (float)(x1 - radius * Math.Cos(lineangle - (anglerad / 2.0)));
var a2 = (float)(y1 - radius * Math.Sin(lineangle - (anglerad / 2.0)));
mArrow.LineTo(a1, a2);
mArrow.MoveTo(a1, a2);
mArrow.MoveTo(x1, y1);
var a3 = (float)(x1 - radius * Math.Cos(lineangle + (anglerad / 2.0)));
var a4 = (float)(y1 - radius * Math.Sin(lineangle + (anglerad / 2.0)));
mArrow.LineTo(a3, a4);

To:

var a1 = (float)(x1 - radius * Java.Lang.Math.Cos(lineangle - (anglerad / 2.0)));
var a2 = (float)(y1 - radius * Java.Lang.Math.Sin(lineangle - (anglerad / 2.0)));
mArrow.MoveTo(a1, a2);
mArrow.QuadTo(a1, a2, x1, y1);
var a3 = (float)(x1 - radius * Java.Lang.Math.Cos(lineangle + (anglerad / 2.0)));
var a4 = (float)(y1 - radius * Java.Lang.Math.Sin(lineangle + (anglerad / 2.0)));
mArrow.QuadTo(x1, y1, a3, a4);

I changed the paint.Color to make it clear by my side:

Height of the arrow should be same.i.e Start and end point of the arrow should be given value it doesnt need to vary (x0,x1.y1,y2 points shoud be same value).here start point of the arroe varies — bhuvana, Aug 24 '17 at 09:41
@bhuvana, are you asking to recalculate your `a1`, `a2`, `a3`, `a4` when the `StrokeWidth` changes? Sorry, my math is bad. — Grace Feng, Aug 24 '17 at 09:50

how to draw a line with arrow with varying stroke width values

1 Answers1