How to work with graphics in Xamarin.Forms? I don't want to know about Platform Specific Details!

VaylandtVaylandt RUMember ✭✭

All libraries offer to write native code in Android and iOS. Is there a PCL library to work with graphics?

Has a specific task: merge 2 image from source and crop the image.

I honestly tried to deal with libraries, but I can't do anything.
https://developer.xamarin.com/guides/cross-platform/drawing/
https://developer.xamarin.com/guides/cross-platform/urho/
https://github.com/praeclarum/NGraphics

I understand it's impossible to write code only in the Portable project!?

Posts

  • EmanueleSabettaEmanueleSabetta ITBeta ✭✭✭

    I work with NGraphics and it is perfectly fine for cross platform XAML graphics. It also load and display SVG, so you can create your assets in Inkscape or Adobe Experience Design.

  • VaylandtVaylandt RUMember ✭✭

    @EmanueleSabetta said:
    I work with NGraphics and it is perfectly fine for cross platform XAML graphics. It also load and display SVG, so you can create your assets in Inkscape or Adobe Experience Design.

    If You don't mind could you show example how to do it?
    I'll be immensely grateful!
    For some time I did not get (

  • DanielKDanielK CAMember

    You can use NControl:

    NControl is a Xamarin.Forms wrapper control built around the NGraphics library enabling developers to create custom controls without the need for custom renderers.

    https://github.com/chrfalch/NControl

  • VaylandtVaylandt RUMember ✭✭
    edited August 2016

    OK, I see you don't understand me or I don't understand what you say ((

    Here is what I have:

    MyFirstApp (Portable)
    ...
    public class App : Application
    {
    public App()
    {
    MainPage = new NavigationPage(new MyPage());

    ...
    public partial class MyPage: ContentPage
    {
    public MyPage()
    {
    pickPhoto.Clicked += async (sender, args) =>{

        var file1 = await CrossMedia.Current.PickPhotoAsync();
        var file2 = await CrossMedia.Current.PickPhotoAsync();
    

    ....

    Then go to NControl... Example Usage

    In your Xamarin.Forms project, add a new NControlView element to your page in the constructor and provide a drawing function where your custom drawing is performed:

    Content = new NControlView {
    DrawingFunction = (canvas, rect) => {
    canvas.DrawLine(rect.Left, rect.Top, rect.Width, rect.Height, NGraphics.Colors.Red);
    canvas.DrawLine(rect.Width, rect.Top, rect.Left, rect.Height, NGraphics.Colors.Yellow);
    }
    };

    It doesn't work!

    Similarly does not work NGraphics

    Platforms.Current ...

  • any news? does anybody use NGRAPHICS?

  • VaylandtVaylandt RUMember ✭✭

    using System;
    using myXamApp.Droid;
    using SkiaSharp;
    using System.IO;

    [assembly: Xamarin.Forms.Dependency(typeof(ImageEditor))]
    namespace myXamApp.Droid
    {
    class ImageEditor : IImageEditor
    {
    public byte[] MergeImage(byte[] backImage, byte[] frontImage, double offsetX, double offsetY, double scale, double screenW)
    {
    int sizeImg = 600;
    using (var surface = SKSurface.Create(sizeImg, sizeImg, SKImageInfo.PlatformColorType, SKAlphaType.Premul))
    {
    SKCanvas canvas = surface.Canvas;
    canvas.DrawColor(SKColors.White);

                using (var bitmap = SKBitmap.Decode(backImage))
                using (var bitmap2 = SKBitmap.Decode(frontImage))
    
    
    
                using (var paint = new SKPaint())
                {
                    float bW = 0;
                    float bH = 0;
                    float w = bitmap.Width;
                    float h = bitmap.Height;
                    float s = (float)scale;
                    float hO = 0;
                    float wO = 0;
    
                    if (bitmap.Width > bitmap.Height)
                    {
                        bW = sizeImg * s;
                        bH = h / w * sizeImg * s;
                        hO = (bW - bH) / 2;
    
                    }
                    else
                    {
                        bH = sizeImg * s;
                        bW = w/h* sizeImg * s;
                        wO = (bH - bW) / 2;
                    }
    
                    float oX = (float)offsetX;
                    float oY = (float)offsetY;
                    float sW = (float)screenW;
                    float X =  sizeImg/ sW * oX;
                    float Y = sizeImg/sW * oY;
    
                    canvas.DrawBitmap(bitmap, SKRect.Create( X + wO, Y + hO, bW, bH), paint);
                    canvas.DrawBitmap(bitmap2, SKRect.Create(0, 0, sizeImg, sizeImg), paint);
                }
    
    
    
                SKImage finalImage = surface.Snapshot();
    
    
                SKData data = finalImage.Encode(SKImageEncodeFormat.Png, 50);
    
                Stream source = data.AsStream();
    
                source.Position = 0;
                byte[] buffer = new byte[source.Length];
                for (int totalBytesCopied = 0; totalBytesCopied < source.Length;)
                    totalBytesCopied += source.Read(buffer, totalBytesCopied, Convert.ToInt32(source.Length) - totalBytesCopied);
                return buffer;
            }
    
    
    
    
        }
    
        public string PlatformName()
        {
            return "__Android";
        }
    }
    

    }

  • mattleibowmattleibow ZAXamarin Team Xamurai
    edited October 2016

    @Vaylandt You may also want to try out the brand new SkiaSharp.Views and SkiaSharp.Views.Forms NuGets. These packages have a large set of ready-to-use views that can be added to your app and then draw on using n event or overriding the draw method.

    If you have a look at the updated samples, you can see how to use them (just add it to the view hierarchy)

  • VaylandtVaylandt RUMember ✭✭

    @mattleibow
    My solution is already working, but still I will study your offer! Thank you!

Sign In or Register to comment.