Need to draw multiple transparent Rectangles over an Image which can be selected, moved or resized
1 Reply
SIGN IN To post a reply.
Here is our requirement:
We have some feature wherein we need to Draw Multiple Transparent Rectangles over an Image.
We should be able to get the Rect (Left, Top, Width, Height) of the drawn rectangle.
We should be also able to Pan, Zoom In/Out the image along with the Rectangle Drawn.
We should also be able to Select, Move or Resize the Rectangles drawn over the image.
We need to use our own custom toolbar which would be displayed on to the left side of the image.
We have looked at syncfusion SFImageEditor, that seems to be supporting the Rectangle drawing, however we see that only on selecting rectangle from the toolbar, Rectangle appears on Image and it is not exactly drawn. In our case, user would be allowed to draw a rectangle directly using the mouse.
Can you help us understand if there are any specific Controls with which we can achieve this functionality.
Query: We have some feature wherein we need to Draw Multiple Transparent Rectangles over an Image.
SfImageEditor control doesn’t have the support to add or draw Transparent Rectangle shapes over an Image. You can add Rectangle as a shape instead of drawing or you can use freehand drawing for drawing an rectangle.
Query: We should be able to get the Rect (Left, Top, Width, Height) of the drawn rectangle.
When the rectangle is drawn using freehand drawing, we don’t have the support to get the Rect of the drawn path.
Note: When adding rectangle shape, we can get the Rect of the added rectangle shape using the ItemSelected event.
Query: We should be also able to Pan, Zoom In/Out the image along with the Rectangle Drawn.
Yes, we are able to Pan, Zoom In/Out the image along with the Rectangle shape or drawn objects.
Query: We should also be able to Select, Move or Resize the Rectangles drawn over the image.
When the rectangle is drawn using freehand drawing, we don’t have the support to Select, Move or Resize the Rectangles drawn over the image.
Note: When
adding rectangle shape, we can be able to Select, Move or Resize.
Query: We need to use our own custom toolbar which would be displayed on to the left side of the image.
Your requirement can be achieved by using commands support in ImageEditor. Initially hide the default toolbar items and add buttons with command support for each action. Inside the grid layout add the custom buttons on the left side and SfImageEditor control on the right to achieve your requirement. We have prepared a sample for your requirement and please get it from the below attachment. Please refer the below user guide documentation for more information.
https://help.syncfusion.com/wpf/image-editor/toolbar-customization#commands
