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

Use RadImageEditor's DrawLine tool as a highlighter

Description

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.

Solution

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" />

Line.ascx

    createDrawTool: function () {
        this.drawTool = new $IE.DrawTools.LineTool(this.get_imageEditor().getCanvasContext(), { coreFactory: new $IE.GraphicsCore.CanvasGraphicsCoreFactory() });
        this.drawTool.setupDrawCanvas();
        this.drawTool.onEnd = Function.createDelegate(this, this._onDrawEnd);
        this.drawTool.setColor(this.colorPicker.get_selectedColor());
        this.drawTool.setLineSize(this.sizeCombo.get_selectedItem().get_value());
        this.drawTool.drawableContext.globalAlpha = 0.5
    }

See Also

In this article