Draw rectangle with corner radius and fit an image bytes to that rectangle with same corne radius

Saranya Karthik 40 Reputation points
2024-04-23T07:21:58.97+00:00

Below I attached my code I need an image with a border and corner radius, please correct my code, and give any other guidelines

CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, cardWidth, cardHeight, dpi);                        
using (CanvasDrawingSession ds = renderTarget.CreateDrawingSession())

                        {

                            ds.Clear(Windows.UI.Colors.White);

                            int photoX = 37;

                                int photoY = 48;

                                int photoWidth = 158;

                                int photoHeight = 158;

                                float cornerRadius = 40;

                                float borderWidth = 3;

                            Rect imageRect = new Rect();

                            byte[] imageBytes = Convert.FromBase64String(memberData.MemberPhotoB64); //image base64

                            using (MemoryStream stream = new MemoryStream(imageBytes))

                            {

							stream.Position = 0;

							imageRect = new Rect(photoX, photoY, photoWidth, photoHeight);

							Rect borderRect = new Rect(imageRect.X - borderWidth / 2,imageRect.Y - borderWidth / 2,imageRect.Width + borderWidth, imageRect.Height + borderWidth);

							ds.FillRoundedRectangle(borderRect, cornerRadius, cornerRadius, Colors.White);

							ds.DrawRoundedRectangle(borderRect, cornerRadius, cornerRadius, Colors.Black, borderWidth); 

							using (IRandomAccessStream randomAccessStream = stream.AsRandomAccessStream())

							{

								CanvasBitmap memberImage = await CanvasBitmap.LoadAsync(device, randomAccessStream);

								ds.DrawImage(memberImage, imageRect);

							}

						}
Universal Windows Platform (UWP)
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,382 questions
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 15,756 Reputation points Microsoft Vendor
    2024-04-24T07:02:08.59+00:00

    Hi @Saranya Karthick ,

    Welcome to Microsoft Q&A!

    It is recommended to use CanvasImageBrush and CanvasDrawingSession.FillRoundedRectangle to draw a RoundedRectangle Image.

    CanvasDevice device = CanvasDevice.GetSharedDevice();
    CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, 300, 300, 96);
    using (var ds = renderTarget.CreateDrawingSession())
    {
        ds.Clear(Colors.White);
        int photoX = 5;
        int photoY = 5;
        int photoWidth = 193;
        int photoHeight = 121;
        float cornerRadius = 40;
        float borderWidth = 3;
    
        Rect imageRect  = new Rect(photoX, photoY, photoWidth, photoHeight);
        Rect borderRect = new Rect(imageRect.X - borderWidth / 2, imageRect.Y - borderWidth / 2, imageRect.Width + borderWidth, imageRect.Height + borderWidth);
    
        CanvasImageBrush fillBrush;
        CanvasBitmap cb = await CanvasBitmap.LoadAsync(device, new Uri("ms-appx:///Assets/Test.png"));
        fillBrush = new CanvasImageBrush(device, cb);
                  
        ds.FillRoundedRectangle(imageRect, cornerRadius, cornerRadius, fillBrush);
        ds.DrawRoundedRectangle(borderRect, cornerRadius, cornerRadius, Colors.Black, borderWidth);
    }
    

    Thank you.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful