how to draw shapes like rectangle and circle in xamarin.android

saishaiksaishaik INMember ✭✭
edited November 2018 in Xamarin.Android

I am trying to draw the shapes like circle and rectangle in xamarin.android, I came across the skia sharp, I strucked at getting user touched points on the view. I have added code as following
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);

        SetContentView(Resource.Layout.Custom);

        customCanvasView = FindViewById<CustomCanvasView>(Resource.Id.customCanvasView);

        touchPoints = new TouchPoint[2];

        for (int i = 0; i < 2; i++)
        {
            TouchPoint touchPoint = new TouchPoint
            {
                Center = new SKPoint(100 + 200 * (i % 2), 100 + 200 * i)
            };

            touchPoints[i] = touchPoint;
        }

        customCanvasView.PaintSurface += OnCanvasViewPaintSurface;

        customCanvasView.SetOnTouchListener(new CustomActivity());
    }

private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        using (SKPath path = new SKPath())
        {
            int colorIndex = 0;
            SKPoint ellipseSize = new SKPoint((float)100, (float)100);
            float rotation = 0;

            foreach (SKPathArcSize arcSize in Enum.GetValues(typeof(SKPathArcSize)))
                foreach (SKPathDirection direction in Enum.GetValues(typeof(SKPathDirection)))
                {
                    path.MoveTo(touchPoints[0].Center);
                    path.ArcTo(ellipseSize, rotation,
                               arcSize, direction,
                               touchPoints[1].Center);

                    strokePaint.Color = colors[colorIndex++];
                    canvas.DrawPath(path, strokePaint);
                    path.Reset();
                }
        }

        foreach (TouchPoint touchPoint in touchPoints)
        {
            touchPoint.Paint(canvas);
        }
    }
}

with this i am able to see a circle with 2 touch points, but how to make it dragable by user, also how to draw rectangle like shapes.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post a basic demo?

  • MNadeemMNadeem Member ✭✭
    edited June 1

    @saishaik said:
    I am trying to draw the shapes like circle and rectangle in xamarin.android, I came across the skia sharp, I strucked at getting user touched points on the view. I have added code as following
    protected override void OnCreate(Bundle savedInstanceState)
    {
    base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.Custom);
    
            customCanvasView = FindViewById<CustomCanvasView>(Resource.Id.customCanvasView);
    
            touchPoints = new TouchPoint[2];
    
            for (int i = 0; i < 2; i++)
            {
                TouchPoint touchPoint = new TouchPoint
                {
                    Center = new SKPoint(100 + 200 * (i % 2), 100 + 200 * i)
                };
            
                touchPoints[i] = touchPoint;
            }
    
            customCanvasView.PaintSurface += OnCanvasViewPaintSurface;
    
            customCanvasView.SetOnTouchListener(new CustomActivity());
        }
    
    private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;
    
            canvas.Clear();
    
            using (SKPath path = new SKPath())
            {
                int colorIndex = 0;
                SKPoint ellipseSize = new SKPoint((float)100, (float)100);
                float rotation = 0;
    
                foreach (SKPathArcSize arcSize in Enum.GetValues(typeof(SKPathArcSize)))
                    foreach (SKPathDirection direction in Enum.GetValues(typeof(SKPathDirection)))
                    {
                        path.MoveTo(touchPoints[0].Center);
                        path.ArcTo(ellipseSize, rotation,
                                   arcSize, direction,
                                   touchPoints[1].Center);
    
                        strokePaint.Color = colors[colorIndex++];
                        canvas.DrawPath(path, strokePaint);
                        path.Reset();
                    }
            }
    
            foreach (TouchPoint touchPoint in touchPoints)
            {
                touchPoint.Paint(canvas);
            }
        }
    }
    

    with this i am able to see a circle with 2 touch points, but how to make it dragable by user, also how to draw rectangle like shapes.

    may this is helpful for you
    https://devblogs.microsoft.com/xamarin/drawing-with-skiasharp/

Sign In or Register to comment.