none
[UWP] Draw line, shape, image directly on WriteableBitmap ? RRS feed

  • Question

  • First, I am new to UWP (also no experience on WPF), sorry if this question is silly.

    I'm making an application to custom image like draw sometime on it, change RGB, opacity... I've done with change opacity with WriteableBitmap by change every pixel of it.

    Now I'm wonder if I have to do the same things (manipulate every pixel) to draw something on WriteableBitmap ? I will have to implement DrawLine, DrawRect, DrawImage... by myseflt ? No support from UWP ?

    Monday, February 8, 2016 9:53 AM

Answers

  • Win2D is also a good option, see this: https://github.com/Microsoft/Win2D, where you could treat your bitmap as a background layer and draw something over it, like line, rect or image, and then output all the layers into a new WriteableBitmap.

    Try something here: Quick start, should be able to know how to draw text over the shapes.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    • Edited by Jamles Hez Tuesday, February 9, 2016 1:30 AM
    • Marked as answer by minh91a1 Wednesday, February 10, 2016 11:10 AM
    Tuesday, February 9, 2016 1:29 AM

All replies

  • use Direct2D
    Monday, February 8, 2016 2:14 PM
  • Win2D is also a good option, see this: https://github.com/Microsoft/Win2D, where you could treat your bitmap as a background layer and draw something over it, like line, rect or image, and then output all the layers into a new WriteableBitmap.

    Try something here: Quick start, should be able to know how to draw text over the shapes.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    • Edited by Jamles Hez Tuesday, February 9, 2016 1:30 AM
    • Marked as answer by minh91a1 Wednesday, February 10, 2016 11:10 AM
    Tuesday, February 9, 2016 1:29 AM
  • Seem Driect2D for C++, but I'm doing C# now. I'll try Win2d , thank you :D
    Wednesday, February 10, 2016 11:11 AM
  • Thank you so much, this is what I'm looking for :D
    Wednesday, February 10, 2016 11:13 AM
  • Hi minh91a1: have you managed to do this with Win2d?
    Could you give me more details if it's the case?

    Friday, October 21, 2016 8:19 AM
  • Sorry for the inconvenience, but I don't see how I can add and edit shapes through Win2D. There is a sample that is close to my needs: ArcOptions. But is only possible to move 2 points of the shape, whereas I need to move the shape or allow user to resize it...
    Are there other samples?
    Tuesday, October 25, 2016 8:15 AM
  • Hi pcdus,

    Sorry for really late reply. Have you successful making your app ?

    For me, win2d allows me to draw something (line, ellipse, rectangle, etc.) on a bitmap only.

    In your case, I suggest trying to play with Basic Input demo in here, which show how can move a shape.

    For resizing, a demo about image cropper in here could help ( kinda complicate, though ).

    Wednesday, November 16, 2016 8:27 AM
  • Hey @minh91a1

    could you possible share your code? I am looking for something like you do, I just need to draw some shapes on a bitmap (or any other type, I just need pixels of draw image). I can't find any good tutorials, they often use canvas for drawing on, but I don't need to display draw image.

    Wednesday, November 30, 2016 4:15 PM
  • "I don't need to display draw image" - I guess you want to draw on bitmap without display it on UI ?
    If so, win2d has CanvasRenderTarget which is suitable for this one: CanvasRenderTarget Tutorial

    CanvasDevice device = CanvasDevice.GetSharedDevice();
                CanvasBitmap bitmap = null;
                CanvasRenderTarget offScreen = null;
    
                // pick a file
                FileOpenPicker picker = new FileOpenPicker();
                picker.FileTypeFilter.Add(".png");
                var file = await picker.PickSingleFileAsync();
    
                // load data for canvasbitmap
                if (file != null)
                {
                    using (var stream = await file.OpenReadAsync())
                    {
                        bitmap = await CanvasBitmap.LoadAsync(device, stream);
                    }
                }
                
                
                if (bitmap != null)
                {
                    offScreen = new CanvasRenderTarget(device,
                        bitmap.SizeInPixels.Width, bitmap.SizeInPixels.Height, 96);
                    using (var ds = offScreen.CreateDrawingSession())
                    {
                        // do not forget clear buffer
                        ds.Clear(Colors.Transparent);
                        
                        // draw original bitmap
                        ds.DrawImage(bitmap); 
    
                        // draw something on it
                        ds.FillCircle(bitmap.SizeInPixels.Width / 2,
                            bitmap.SizeInPixels.Height / 2, 50, Colors.GreenYellow);
                        
                    }
    
                    var tempFolder = ApplicationData.Current.TemporaryFolder;
                    var newFile = await tempFolder.CreateFileAsync("file.png", CreationCollisionOption.ReplaceExisting);
                    if (newFile != null)
                    {
                        await offScreen.SaveAsync(newFile.Path);
                    }
                    await Launcher.LaunchFolderAsync(tempFolder);
                }

    Hope this help :)



    • Edited by minh91a1 Thursday, December 1, 2016 8:13 AM
    Thursday, December 1, 2016 8:12 AM