Change pen color

[Phunction]

How do I change the annotation pen color a second time?

I currently do this:

Drawing.AddShape(AnnotationShape.Pen, new ImageEditorShapeSettings() { Color = Colors.Black, StrokeThickness = 2 });

However I would like to be able to change the color of the pen, do I have to do an AddShape again and add a new pen?

What happens if this is done dozens of times? I want toe be able to let the user pick the pen color they will draw with (Not using the toolbar) so I want to make sure I am doing it the correct way.

[Vidyalakshmi Mani]

Hi Phunction,

Based on the shared information we have checked your query. You can add the shape settings once in a button click and store that shape settings in a list for future use. Then, you can change the pen color by accessing the already stored shape settings and update its color value each time through button click. This way, the user can choose the pen color of their choice. Here’s a code snippet for your reference:

private List<ImageEditorAnnotationSettings> annotationsSettings = new List<ImageEditorAnnotationSettings>();

 

private void OnFreeHandDrawClicked(object sender, EventArgs e)

{

    var random = new Random();

 

    ImageEditorShapeSettings imageEditorShapeSettings;

 

    if (annotationsSettings.Count == 0)

    {

        //Add shape settings

        imageEditorShapeSettings = new ImageEditorShapeSettings()

        {

            Color = GetRandomColor(random),

            StrokeThickness = 2

        };

       

        annotationsSettings.Add(imageEditorShapeSettings);

       

    }

    else

    {

        imageEditorShapeSettings = annotationsSettings[0] as ImageEditorShapeSettings;

    }

       

 

    imageEditor.AddShape(AnnotationShape.Pen, imageEditorShapeSettings);

}

 

private Color GetRandomColor(Random random)

{

    return Color.FromRgb(random.Next(256), random.Next(256), random.Next(256));

}

 

private void Button_Clicked(object sender, EventArgs e)

{

    var random = new Random();

 

    //Update pen color

    (annotationsSettings[0] as ImageEditorShapeSettings).Color = GetRandomColor(random);

}

 

We have also prepared a simple sample demonstrating this. Please find the attached sample for your reference.

If you have any further questions or need assistance with anything else, please feel free to ask.

Regards,

Vidyalakshmi M.

Attachment: MAUIImageEditorSample_a9da25cc.zip

[Phunction]

This won't quite work. If I add a blue pen, and draw a line, then switch to red, the existing line will switch to red.

I thought about adding a pen shape for each color, but I do not know how to switch between pens shapes.

Example, addshape penblue, addshape penred but how do I switch between the two?

[Vidyalakshmi Mani]

Hi Phunction,

You can add the desired number of shape settings to a collection upon initial loading. Subsequently, by clicking a button, you can retrieve the required color in the selection . We have created a simple sample illustrating this process. Here is a code snippet for your reference:

    

    private List<ImageEditorAnnotationSettings> annotationsSettings = new List<ImageEditorAnnotationSettings>();

 

    private void ImageEditor_ImageLoaded(object sender, EventArgs e)

    {

        ImageEditorShapeSettings imageEditorShapeSettings = new ImageEditorShapeSettings()

        {

            Color = Colors.Blue,

            StrokeThickness = 2

        };

 

        annotationsSettings.Add(imageEditorShapeSettings);

 

        ImageEditorShapeSettings imageEditorShapeSettings2 = new ImageEditorShapeSettings()

        {

            Color = Colors.Red,

            StrokeThickness = 2

        };

 

        annotationsSettings.Add(imageEditorShapeSettings2);

    }

 

    private void Button_Clicked(object sender, EventArgs e)

    {

        var BluePen = annotationsSettings.Where<ImageEditorAnnotationSettings>(x => (x as ImageEditorShapeSettings).Color == Colors.Blue).ToList();

        imageEditor.AddShape(AnnotationShape.Pen, (ImageEditorShapeSettings)BluePen[0]);

    }

 

    private void Button_Clicked_1(object sender, EventArgs e)

    {

        var RedPen = annotationsSettings.Where<ImageEditorAnnotationSettings>(x => (x as ImageEditorShapeSettings).Color == Colors.Red).ToList();

        imageEditor.AddShape(AnnotationShape.Pen, (ImageEditorShapeSettings)RedPen[0]);

    }

 

}

 

Please review the attached sample and let us know if it fulfills your needs.

Regards,
Vidyalakshmi M.

Attachment: MAUIImageEditorSample_de3c2b42.zip