New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Use RadImageEditor's DrawLine tool as a highlighter


In some scenarios you want to give the user the ability to highlight a part of the edited image. This could be done by decreasing the opacity of the ImageEditor's Line tool.


You can achieve a highlighting effect by changing the global alpha value of the drawable context of RadImageEditor in in the createDrawTool() function of its Line dialog. To do this you should enable the the External Dialogs of the ImageEditor and modify its Line.ascx one with the below highlighted line:

    <telerik:RadImageEditor RenderMode="Lightweight" runat="server" ID="RadImageEditor1" ExternalDialogsPath="~/ImageEditorDialogs" Width="490" Height="315px" />


    createDrawTool: function () {
        this.drawTool = new $IE.DrawTools.LineTool(this.get_imageEditor().getCanvasContext(), { coreFactory: new $IE.GraphicsCore.CanvasGraphicsCoreFactory() });
        this.drawTool.onEnd = Function.createDelegate(this, this._onDrawEnd);
        this.drawTool.drawableContext.globalAlpha = 0.5

See Also

In this article