Skip to content

Changes in Shapes.md file #996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ghost wants to merge 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Changes in Shapes.md file #996

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 75 additions & 54 deletions uwp/Image-Editor/Shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,58 @@ platform: uwp
control: SfImageEditor
documentation: ug
---
The following namespaces are required for adding shapes in the SfImageEditor control:

* `Syncfusion.UI.Xaml.ImageEditor`
* `Syncfusion.UI.Xaml.ImageEditor.Enums`

# Shapes in UWP Image Editor (SfImageEditor)

You can annotate any path on an image by using free hand drawing and adding texts and shapes.
You can annotate any path on an image by using free-hand drawing, and add texts and shapes over the image.

The shapes and text can be added in the following two ways:

Following shapes can be added.
* Rectangle
* Circle
* Arrow
* Line
* Dotted
* DoubleArrow
* DottedArrow
* DottedDoubleArrow
* From the toolbar
* Using code

over the image. The shapes and text can be added in the following two ways:
The following shapes can be added:

* From Toolbar
* Using Code
* `Rectangle`
* `Circle`
* `Arrow`
* `Line`
* `Dotted`
* `DoubleArrow`
* `DottedArrow`
* `DottedDoubleArrow`

## To add a shape over an image

### From Toolbar
### From the toolbar

To add shapes from the toolbar, click the `Shapes` icon in the toolbar. When the `Shapes` icon is tapped, a sub toolbar will appear on top of that toolbar. From that sub toolbar, choose the shape (`Rectangle`, `Circle` or `Arrow`). Click the desired shape; the shape will be added to the center of the image. The shape will has the handles on each edge; it helps to resize the shape to the desired size and it can be moved to the desired position by dragging.
To add shapes from the toolbar, click the `Shapes` icon in the toolbar. When the `Shapes` icon is tapped, a sub-toolbar will appear on top of the main toolbar. From that sub-toolbar, choose the shape (`Rectangle`, `Circle`, or `Arrow`). Click the desired shape; the shape will be added to the center of the image. The shape will have handles on each edge; it helps to resize the shape to the desired size, and it can be moved to the desired position by dragging.

#### Change Color and Fill Options of the Shape
#### Change color and fill options of the shape

You can change the selected shape Color and [`Mode`](https://help.syncfusion.com/cr/uwp/sfimageeditor) of the shape as outline or fill. The color palette of the shapes can be customized by using ColorPalette property.
You can change the selected shape color and [`Mode`](https://help.syncfusion.com/cr/uwp/sfimageeditor) of the shape as outline or fill. The color palette of the shapes can be customized by using the `ColorPalette` property.

T> By default, the shape color is Red stroke with Transparent fill.
N> By default, the shape color is red stroke with a transparent fill.

### Using Code
### Using code

Shapes can be added based on the [`ShapeType`](https://help.syncfusion.com/cr/uwp/sfimageeditor) and [`PenSettings`](https://help.syncfusion.com/cr/uwp/sfimageeditor) by using a method `AddShape` in the SfImageEditor control.
Shapes can be added based on the [`ShapeType`](https://help.syncfusion.com/cr/uwp/sfimageeditor) and [`PenSettings`](https://help.syncfusion.com/cr/uwp/sfimageeditor) by using the `AddShape` method in the SfImageEditor control.

* To add a rectangle, circle or arrow over the image, specify the ShapeType as well as the desired PenSettings as shown in below code,
* To add a rectangle, circle, or arrow over the image, specify the `ShapeType` as well as the desired `PenSettings` as shown in the code below:

{% capture codesnippet1 %}


{% highlight C# %}

imageEditor.AddShape(ShapeType.Arrow,new PenSettings()
using Syncfusion.UI.Xaml.ImageEditor;
using Syncfusion.UI.Xaml.ImageEditor.Enums;

imageEditor.AddShape(ShapeType.Arrow, new PenSettings()
{
StrokeWidth = 2
});
Expand All @@ -59,17 +68,20 @@ Shapes can be added based on the [`ShapeType`](https://help.syncfusion.com/cr/uw

{{ codesnippet1 | UnOrderList_Indent_Level_1 }}

![Change StrokWidth of the shape in UWP ImageEditor](shapes_images/annotate.png)
![Change StrokeWidth of the shape in UWP ImageEditor](shapes_images/annotate.png)

* You can annotate any path on an image by using free hand drawing as shown in the below code,
* You can annotate any path on an image by using free-hand drawing as shown in the code below:

{% capture codesnippet2 %}

{% highlight C# %}

imageEditor.AddShape(ShapeType.Path,new PenSettings()
{
PathStrokeWidth=10
using Syncfusion.UI.Xaml.ImageEditor;
using Syncfusion.UI.Xaml.ImageEditor.Enums;

imageEditor.AddShape(ShapeType.Path, new PenSettings()
{
PathStrokeWidth = 10
});

{% endhighlight %}
Expand All @@ -80,48 +92,52 @@ Shapes can be added based on the [`ShapeType`](https://help.syncfusion.com/cr/uw

![Annotate path on an image in UWP ImageEditor](shapes_images/path.png)

By default, the toolbar contains the `Rectangle`, `Circle`, `Arrow`, and `Path` shapes. You can add other shapes to the toolbar items by using the `VisibleShapesItems` in [`ToolbarSettings`](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfImageEditor.XForms.ToolbarSettings.html).
By default, the toolbar contains the `Rectangle`, `Circle`, `Arrow`, and `Path` shapes. You can add other shapes to the toolbar items by using the `VisibleShapesItems` property in [`ToolbarSettings`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html).

`VisibleShapesItems` is an enum property with values of `Rectangle`, `Circle`, `Arrow`, `Path`, `Line`, `Dotted`, `DoubleArrow`, `DottedArrow`, and `DottedDoubleArrow`. You can specify one or more shapes in the property to add shapes into the toolbar.
`VisibleShapesItems` is an enum property with values of `Rectangle`, `Circle`, `Arrow`, `Path`, `Line`, `Dotted`, `DoubleArrow`, `DottedArrow`, and `DottedDoubleArrow`. You can specify one or more shapes in the property to add shapes to the toolbar.

{% highlight C# %}

editor.ToolbarSettings.VisibleShapesItems = ImageEditorShapes.Line | ImageEditorShapes.Dotted |
ImageEditorShapes.DottedArrow |
ImageEditorShapes.DottedDoubleArrow |
ImageEditorShapes.DoubleArrow;

using Syncfusion.UI.Xaml.ImageEditor.Enums;

editor.ToolbarSettings.VisibleShapesItems = ImageEditorShapes.Line | ImageEditorShapes.Dotted |
ImageEditorShapes.DottedArrow |
ImageEditorShapes.DottedDoubleArrow |
ImageEditorShapes.DoubleArrow;

{% endhighlight %}

![Shape types](shapes_images/ShapeTypes.png)


N> If you add the shape when the SfImageEditor loaded in a view without image, then you need to call the [`AddShape`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_AddShape_Syncfusion_UI_Xaml_ImageEditor_Enums_ShapeType_Syncfusion_UI_Xaml_ImageEditor_PenSettings_) method after some time delay. If you add the shape when the SfImageEditor loaded in a view with image, then you need to call the [`AddShape`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_AddShape_Syncfusion_UI_Xaml_ImageEditor_Enums_ShapeType_Syncfusion_UI_Xaml_ImageEditor_PenSettings_) method in the [`ImageLoaded`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ImageLoaded) event as shown in the following code sample.
N> If you add a shape when the SfImageEditor is loaded in a view without an image, then you need to call the [`AddShape`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_AddShape_Syncfusion_UI_Xaml_ImageEditor_Enums_ShapeType_Syncfusion_UI_Xaml_ImageEditor_PenSettings_) method after some time delay. If you add the shape when the SfImageEditor is loaded in a view with an image, then you need to call the [`AddShape`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_AddShape_Syncfusion_UI_Xaml_ImageEditor_Enums_ShapeType_Syncfusion_UI_Xaml_ImageEditor_PenSettings_) method in the [`ImageLoaded`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.SfImageEditor.html#Syncfusion_UI_Xaml_ImageEditor_SfImageEditor_ImageLoaded) event as shown in the following code sample.

{% highlight C# %}

imageEditor.ImageLoaded += (Object sender, ImageLoadedEventArgs args) =>
            {
                  imageEditor.AddShape(ShapeType.Circle,new PenSettings() { });
            };
using Syncfusion.UI.Xaml.ImageEditor;
using Syncfusion.UI.Xaml.ImageEditor.Enums;

imageEditor.ImageLoaded += (object sender, ImageLoadedEventArgs args) =>
{
imageEditor.AddShape(ShapeType.Circle, new PenSettings() { });
};

{% endhighlight %}

## To delete a shape or text from the view

You can delete a selected shape or text from the view in the following two ways:

* Using Code
* From Toolbar
* Using code
* From the toolbar

### From Toolbar
### From the toolbar

When a shape is selected, a circular floating button with Delete icon will appear on top of the toolbar. To delete the selected shape from the view, use `Delete` icon.
When a shape is selected, a circular floating button with a delete icon will appear on top of the toolbar. To delete the selected shape from the view, use the `Delete` icon.

### Using Code
### Using code

programmatically, the selected shape can be deleted by using the Delete method as shown below,
Programmatically, the selected shape can be deleted by using the `Delete` method as shown below:

{% highlight C# %}

Expand All @@ -131,30 +147,35 @@ programmatically, the selected shape can be deleted by using the Delete method a

N> You cannot delete the path.

## Resize a shape or text or customView
## Resize a shape, text, or custom view

You can resize a selected shape, text, or customView using the `ResizableElements` property.
You can resize a selected shape, text, or custom view using the `ResizableElements` property.

Example: imageEditor.ResizableElements = Syncfusion.UI.Xaml.ImageEditor.Enums.ImageEditorResizableElements.Shapes represents that shapes(`Rectangle`, `Circle` or `Arrow`) can be resizable. Other elements such as Text and CustomView cannot be resizable.
For example, `imageEditor.ResizableElements = ImageEditorResizableElements.Shapes` represents that shapes (`Rectangle`, `Circle`, or `Arrow`) can be resized. Other elements such as Text and CustomView cannot be resized.

>Note: By default, all the elements are resizable.
N> By default, all the elements are resizable.

{% highlight C# %}

imageEditor.ResizableElements = Syncfusion.UI.Xaml.ImageEditor.Enums.ImageEditorResizableElements.Shapes;
using Syncfusion.UI.Xaml.ImageEditor.Enums;

imageEditor.ResizableElements = ImageEditorResizableElements.Shapes;

{% endhighlight %}

## Restricting the shape resize

You can restrict the shape resizing using the [`IsResizable`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.PenSettings.html#Syncfusion_UI_Xaml_ImageEditor_PenSettings_IsResizable) property. By default, the value of the IsResizable property is true, so you can resize the shape added on an image. When the [`IsResizable`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.PenSettings.html#Syncfusion_UI_Xaml_ImageEditor_PenSettings_IsResizable) property is disabled, shape added on an image cannot be resized and you can only drag the shape over an image as shown in the following code sample.
You can restrict the shape resizing using the [`IsResizable`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.PenSettings.html#Syncfusion_UI_Xaml_ImageEditor_PenSettings_IsResizable) property. By default, the value of the `IsResizable` property is `true`, so you can resize the shape added on an image. When the [`IsResizable`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.ImageEditor.PenSettings.html#Syncfusion_UI_Xaml_ImageEditor_PenSettings_IsResizable) property is set to `false`, the shape added on an image cannot be resized and you can only drag the shape over an image as shown in the following code sample.

{% highlight C# %}

{% highlight c# %}
using Syncfusion.UI.Xaml.ImageEditor;
using Syncfusion.UI.Xaml.ImageEditor.Enums;

imageEditor.AddShape(ShapeType.Circle, new PenSettings() { IsResizable=false });
imageEditor.AddShape(ShapeType.Circle, new PenSettings() { IsResizable = false });

{% endhighlight %}

## See also

[How to disable resizing the shapes text and custom](https://www.syncfusion.com/kb/9476/how-to-disable-resizing-the-shapes-text-and-customview)
[How to disable resizing the shapes, text, and custom view](https://www.syncfusion.com/kb/9476/how-to-disable-resizing-the-shapes-text-and-customview)