|
1 | 1 | --- |
2 | 2 | layout: post |
3 | 3 | title: Frame with Blazor Image Editor Component | Syncfusion |
4 | | -description: Checkout the Frame available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. |
| 4 | +description: Explore the Frame feature in the Blazor Image Editor component for Blazor Server and WebAssembly applications. |
5 | 5 | platform: Blazor |
6 | 6 | control: Image Editor |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # Frames in the Blazor Image Editor component |
11 | 11 |
|
12 | | -The frame feature in an Image Editor provides users with the capability to add decorative borders or frames around their images. Frames are a visual design element that can enhance the overall appearance and appeal of an image. |
| 12 | +The frame feature in the Image Editor enables adding decorative borders around images. Frames enhance visual appeal and can be styled to match the image context or design requirements. |
13 | 13 |
|
14 | 14 | ## Apply frame to the Image |
15 | 15 |
|
16 | | -The [`DrawFrameAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawFrameAsync_Syncfusion_Blazor_ImageEditor_FrameType_System_String_System_String_System_Int32_System_Int32_System_Int32_System_Int32_Syncfusion_Blazor_ImageEditor_FrameLineStyle_System_Int32_) method is a function designed to enable the application of various frame options to an image. This method simplifies the process of adding decorative frames, such as mat, bevel, line, hook, and inset, to an image by allowing users to specify their desired frame type. |
| 16 | +The [DrawFrameAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawFrameAsync_Syncfusion_Blazor_ImageEditor_FrameType_System_String_System_String_System_Int32_System_Int32_System_Int32_System_Int32_Syncfusion_Blazor_ImageEditor_FrameLineStyle_System_Int32_) method applies a frame to an image with options such as mat, bevel, line, hook, and inset. |
17 | 17 |
|
18 | | -Depending on the frame type selected, users may have additional customization options, such as adjusting the frame's thickness, color, texture, or other attributes. This allows for fine-tuning the appearance of the frame to match the image's theme or the user's preferences |
| 18 | +Depending on the selected frame type, additional customization options may be available, such as thickness, color, gradient, and other styling attributes. |
19 | 19 |
|
20 | | -The `DrawFrameAsync` method in the Image Editor control takes nine parameters to define the properties of the frame to the image: |
| 20 | +The `DrawFrameAsync` method accepts nine parameters that define the frame properties: |
21 | 21 |
|
22 | | -* frameType - Specified the image data or url of the image to be inserted. |
| 22 | +- `frameType` - Specifies the type of frame to apply. |
23 | 23 |
|
24 | | -* color - Specifies the color for the frame. |
| 24 | +- `color` - Specifies the frame color. |
25 | 25 |
|
26 | | -* gradientColor - Specifies the gradient color for the frame. |
| 26 | +- `gradientColor` - Specifies the gradient color for the frame. |
27 | 27 |
|
28 | | -* size - Specifies the size of the frame. |
| 28 | +- `size` - Specifies the frame size. |
29 | 29 |
|
30 | | -* inset - Specifies the inset value for line, hook, and inset type frames. |
| 30 | +- `inset` - Specifies the inset value for line, hook, and inset frame types. |
31 | 31 |
|
32 | | -* offset - Specifies the offset value for line and inset type frames. |
| 32 | +- `offset` - Specifies the offset value for line and inset frame types. |
33 | 33 |
|
34 | | -* borderRadius - Specifies the border radius for line type frame. |
| 34 | +- `borderRadius` - Specifies the border radius for the line frame type. |
35 | 35 |
|
36 | | -* frameLineStyle - Specifies the frame line style for line type frame. |
| 36 | +- `frameLineStyle` - Specifies the frame line style for the line frame type. |
37 | 37 |
|
38 | | -* lineCount - Specifies the line count for the line type frame. |
| 38 | +- `lineCount` - Specifies the line count for the line frame type. |
39 | 39 |
|
40 | | -Here is an example of Frame using the `DrawFrameAsync` method. |
| 40 | +Here is an example of applying frames using the `DrawFrameAsync` method. |
41 | 41 |
|
42 | 42 | ```cshtml |
43 | 43 | @using Syncfusion.Blazor.ImageEditor |
@@ -91,20 +91,20 @@ Here is an example of Frame using the `DrawFrameAsync` method. |
91 | 91 | } |
92 | 92 | ``` |
93 | 93 |
|
94 | | - |
| 94 | + |
95 | 95 |
|
96 | 96 | ## Frame changing event |
97 | 97 |
|
98 | | -The [`FrameChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FrameChanging) event is triggered when applying frame on the image. This event provides information encapsulated within an object, which includes details about the frame applied in an image. This information encompasses: |
| 98 | +The [FrameChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_FrameChanging) event is triggered while applying a frame. The event object provides details about the frame settings involved in the change. |
99 | 99 |
|
100 | | -Frame Type: This indicates the specific type of frame being applied, whether it's a mat, bevel, line, or hook. |
| 100 | +- Frame type: Specifies the type of frame applied, such as mat, bevel, line, hook, or inset. |
101 | 101 |
|
102 | | -Customization Values: These values contain information about any adjustments or modifications made to the frame. For instance, if the frame can be customized with attributes like color, size, or style, these details are conveyed within the event object. |
| 102 | +- Customization values: Includes attributes such as color, size, style, inset, offset, gradient color, and related settings. |
103 | 103 |
|
104 | | -The parameter available in the [`FrameChangeEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html) is |
| 104 | +Parameters available in [FrameChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html): |
105 | 105 |
|
106 | | -* [`FrameChangeEventArgs.PreviousFrameSetting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_PreviousFrameSetting) - The frame settings including size, color, inset, offset, gradient color which is applied before changing the frame. |
| 106 | +- [FrameChangeEventArgs.PreviousFrameSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_PreviousFrameSetting) - Frame settings (size, color, inset, offset, gradient color) applied before the change. |
107 | 107 |
|
108 | | -* [`FrameChangeEventArgs.CurrentFrameSetting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_CurrentFrameSetting) - The frame settings including size, color, inset, offset, gradient color which is going to apply after changing the frame. |
| 108 | +- [FrameChangeEventArgs.CurrentFrameSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_CurrentFrameSetting) - Frame settings (size, color, inset, offset, gradient color) to be applied after the change. |
109 | 109 |
|
110 | | -* [`FrameChangeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_Cancel) - Specifies a boolean value to cancel the frame changing action. |
| 110 | +- [FrameChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FrameChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_FrameChangeEventArgs_Cancel) - Indicates whether to cancel the frame-changing action. |
0 commit comments