What's New in Documents for Imaging v6

GcImaging v6 - December 15, 2022

GrapeCity Documents for Imaging (GcImaging)

Support SVG text elements in GcSvgGraphics paths

GcImaging has been supporting drawing of text on GcSvgGraphics with path elements. In the v6 release, GcSvgGraphics includes the DrawTextAsPath property, which gets or sets whether the text is drawn with path elements or not. After setting DrawTextAsPath to false, the GcSvgGraphics tries to save text using the standard SVG text elements, enabling users to select, copy text, or search for some text fragments, which is not possible when text is drawn using paths.

Additionally, when text is drawn to GcSvgGraphics, the following properties can be used - DrawTextAsPath and EmbedFonts.When a PDF page is saved to SVG using GcPdf, the following properties can now be used from SaveAsImageOptions class: DrawSvgTextAsPath, EmbedSvgFonts. These properties allow embedding a font subset to the output SVG file. Not all viewers support fonts embedded in SVG, but the most widely used browsers do. No fonts are embedded if the EmbedFonts property is set to false (the default value). Setting those properties to true might help users using rare fonts which will hardly be found on the client machine.

The following is an SVG image in which the text on the left is drawn by setting GcGraphics.DrawTextAsPath to false, thereby making the text searchable.

View Help | Demo

New Transparency Layers in GcGraphics

GcImaging supports the new concept of Transparency layers that enable an application to manipulate a group of drawing operations and render images with multiple groups and an opacity attribute. To modify a layer, you can push a layer onto the GcGraphics object using the new PushTransparencyLayer() method. Subsequent drawing operations by the GcGraphics are then directed to the layer. After the layer properties are modified, use the PopTransparencyLayer() method to apply the layer's contents into the GcGraphics drawing surface. The Push/Pop operations can be nested multiple times. When "pushing" the layer, you can specify the content bounds. If those bounds are not specified, the content bounds are effectively taken to be the bounds of the drawing surface. The opacity is another parameter of the layer being "pushed". The opacity of layer content is multiplied by this value when compositing the layer to the target GcGraphics.

Layers are supported in the following classes derived from GcGraphics: GcPdfGraphics, GcBitmapGraphics, GcSkiaGraphics, GcSvgGraphics, GcD2DBitmapGraphics, GcWicBitmapGraphics.

The following code draws rectangles and text with various opacity parameters using g.PushTransparencyLayer() method and finally using g.PopTransparencyLayer() to merge the content on the graphics.

static void DrawFigure(GcGraphics g)
{
    var rect = new RectangleF(50, 50, 150, 100);

    g.FillRectangle(rect, new HatchBrush(HatchStyle.ZigZag)
    {
        BackColor = Color.Yellow,
        ForeColor = Color.Purple
    });
    g.DrawRectangle(rect, new Pen(Color.LightGreen, 6f));

    var clipRect = new RectangleF(70, 50, 110, 100);
    g.PushTransparencyLayer(clipRect, 0.5f);

    g.FillRectangle(rect, Color.Green);
    rect.Height -= 60;
    rect.Y += 30;
    g.DrawRectangle(rect, new Pen(Color.Red, 6f));

    var tl = g.CreateTextLayout();
    tl.DefaultFormat.ForeColor = Color.White;
    tl.DefaultFormat.FontSize = 38;
    tl.DefaultFormat.FontSizeInGraphicUnits = true;
    tl.DefaultFormat.FontName = "Tahoma";
    tl.MaxWidth = 150;
    tl.TextAlignment = TextAlignment.Center;
    tl.Append("Hello World!");
    g.DrawTextLayout(tl, new PointF(50, 50));

    g.PopTransparencyLayer();
}

View Help

GrapeCity Documents Image Viewer (GcImageViewer) New

 

GrapeCity Documents for Imaging introduces JavaScript-based client-side GrapeCity Documents Image Viewer (GcImageViewer). The control supports viewing and editing images in popular formats. It provides plugin support for adding image editing options and the ability to download the edited image on the client-side. GcImageViewer can be conveniently embedded in major web frameworks such as Pure JavaScript, Angular, Vue, ASP.NET Core, ASP.NET MVC, HTML5, React, and Preact. It is a cross-platform solution for viewing and editing Image files in web apps running on Windows, MAC, Linux, iOS, and Android devices. It works in all modern browsers, including Edge, Chrome, Firefox, Opera, and Safari.

There are different UI options available in GcImageViewer to load, process, and save images. The following are key features of the control:

  1. Load Image: This option lets you load images of type JPEG, PNG, TIFF, GIF, BMP, ICO, SVG and WebP.

  2. Zoom control: This control offers zoom-in and zoom-out buttons to zoom the image and a zoom textbox to define a specific zoom value.

  3. FullScreen: To display the viewer in fullscreen and hide the menu bar at the top. As soon as the GcImageViewer goes into fullscreen mode, an alternate toolbar appears over the image to provide you with all the functionalities offered by the main menu bar, along with an option to exit the fullscreen mode.

  4. Navigation Control: This proves useful when working with TIFF/GIF images, as it lets you navigate between the image frames.

  5. Download: Provides you with an option to download the modified image on the client side.

  6. Page Tools Plugin

    1. Rotate image: Rotates images in clockwise direction

    2. Flip image horizontally or vertically: Flip the image as mirror image, horizontally or vertically.

    3. Crop/resize images: This option helps to crop or resize images as per user preference using image handles.

  7. Undo/Redo image edits: Undo/Redo any image edits in the control.

  8. Apply image filters to images: Apply filters from various options and modify the image look.

GcImageViewer is available with GrapeCity Documents for Imaging or the option to install from npm.
npm install @grapecity/gcimageviewer

View the following blogs for the full feature list supported in the viewer and how to configure it in ASP.NET Core application.

For more info, view Help | Demo | License Info

Select Product Version...