Adding an image with opacity less then 1, or an aplha less then 255

[Roland]

Using Telerik UI for Blazor.

Just started experimenting with PDFs, so maybe I just overlooked it.

I can easy draw an image with full opacity, but nowhere in the RadFixedPage or FixedContentEditor settings seems to be anything to set opacity.

[Martin]

Hello Roland,

I am not sure what is the exact requirement so I will mention several scenarios of inserting PDF content with opacity:

 - If you need to insert an ARGB image, you may use the ImageSource constructor overload which takes a Stream.

 - In case you would like to control the opacity of the image you may use the ImageSource constructor which takes an EncodedImageData instance created with alpha-channel bytes. A sample project of how to insert a 32-bit ARGB image using the EncodedImageData class can be found attached in the following forum thread. The sample application reads the image pixel bytes using the BitmpaSource class, part of the PresentationCore assembly. After this, the alpha-channel data of the image is used to create the EncodedImageData instance. However, you may modify the alpha-channel data or provide a custom one, so you can achieve a customized opacity.

 - If you would like to draw a figure with applied opacity, you can change the alpha component of an element in the fixed content by setting the fixedContentEditor.GraphicProperties.FillColor (or block.GraphicProperties.FillColor) property using one of the constructor overloads of RgbColor class:

Rect rectangle = new Rect(x: 300,y: 10,width: 200,height: 100);
fixedContentEditor.GraphicProperties.FillColor = new Telerik.Windows.Documents.Fixed.Model.ColorSpaces.RgbColor(a: 100, r: 255, g: 0, b: 0);
fixedContentEditor.DrawRectangle(rectangle);

where the first parameter ('a') passed to the constructor sets the alpha component.

Here is another example demonstrating the same approach but setting transparency to Ellipse and Circle:

fixedContentEditor.GraphicProperties.IsStroked = false;
fixedContentEditor.GraphicProperties.FillColor = new RgbColor(100, 231, 238, 247);
fixedContentEditor.DrawEllipse(new Point(250, 70), 136, 48);

fixedContentEditor.GraphicProperties.IsStroked = true;
fixedContentEditor.GraphicProperties.StrokeColor = RgbColors.White;
fixedContentEditor.GraphicProperties.StrokeThickness = 1;
fixedContentEditor.GraphicProperties.FillColor = new RgbColor(200, 231, 238, 247);
fixedContentEditor.DrawCircle(new Point(289, 77), 48);

I hope you will find this helpful. However, If this is not the case, I will be thankful if you can share more details on the scenario you would like to achieve.

Regards,
Martin
Progress Telerik

[Roland]

As I said I am using Blazor.You are referring to a WPF sample and WPF library. How do I do this in server-side Blazor?

[Martin]

Hi Roland,

I'm sorry I tried to mislead you.

I am attaching you a Blazor WebAssembly sample project demonstrating the drawing of shapes with opacity set using the FixedContentEditor as well as how to create a RadFixedDocument, insert a PNG image in it and export this document to PDF file. In order to export an image different than Jpeg or Jpeg2000 or with image quality different than High a custom implementation of JpegImageConverterBase class should be passed to the FixedExtensibilityManager.JpegImageConverter extensibility point. For more information, you can check the Create Custom JpegImageConverter in .Net Standard KB article.

As for the example from the forum thread, it is not relevant because it depends on the PresentationCore assembly.

I hope this helps. Please, let me know if this is not your case or if there is anything else I can assist you with.

Regards,
Martin
Progress Telerik