Events when drawing (before / after)?

[Chris]

Hi Telerik,

Are any events fired at the beginning/end of the drawing actions, ideally that can report back to the server in some way? I would like to be able to capture the starting and ending coordinates when a user draws a circle or rectangle using the image editor controls so that I can flag the image as altered when the Apply button is clicked, as well as write it to the database along with an explanation/annotation for explain why it was done (using this for redaction) when the image is saved.

[Vessy]

Hello Chris,

You can access the desired coordinates in the specific drawing command's _onDrawEnd() function. In order to customize this function you will need to enable the external dialogs of the ImageEditor in the way described here: http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customdialoginsertimage/defaultcs.aspx.

For example, if you want to capture the coordinates of a drawn rectangle you can extend the _onDrawEnd() function in the DrawRectangle.ascx dialog in a similar way:

_onDrawEnd: function (drawTool, e) {
    this.transformButton.set_enabled(true);
    this.drawTool.showOpacityBackground();

    for (var i = 0; i < this.drawTool.draggables.length; i++) {
        var position = this.drawTool.draggables[i].get_position();
    }
}

Another possible option to access these valus is to do it into the client click handler of and external button:

<asp:Button ID="Button1" Text="Show Coordinates" OnClientClick="ShowCoordinates(); return false;"
    runat="server" />
<div>Left handler coordinates</div>
<span>x: </span>
<asp:TextBox ID="leftX" runat="server" /><br />
<span>y: </span>
<asp:TextBox ID="leftY" runat="server" />
<div>Right handler coordinates</div>
<span>x: </span>
<asp:TextBox ID="rightX" runat="server" /><br />
<span>y: </span>
<asp:TextBox ID="rightY" runat="server" />
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Jellyfish.jpg">
</telerik:RadImageEditor>
<script type="text/javascript">
    function ShowCoordinates() {
        var imageEditor = $find("RadImageEditor1");
        var leftHandler = 0;
        var rightHandler = 0;
        if (imageEditor.get_currentToolWidget() && imageEditor.get_currentToolWidget().get_name() == "Line") {
            leftHandler = imageEditor.get_currentToolWidget().drawTool.draggables[0].get_position();
            rightHandler = imageEditor.get_currentToolWidget().drawTool.draggables[2].get_position();
        }

        $get("leftX").value = leftHandler.x;
        $get("leftY").value = leftHandler.y;
        $get("rightX").value = rightHandler.x;
        $get("rightY").value = rightHandler.y;
    }
</script>

I hope this will be helpful for you in achieving the desired scenario.

Kind regards,
Vessy
Telerik