CODEWITHSUNDEEP
javascriptcustomizationpdftron
Steven
Steven

Reputation: 25

Customizing the FreeText Tool

I am trying to customize how free text annotations look.

I need the text to have additional padding, i.e. there should be extra space around the text.

I am using the WebViewer and have tried to the setPadding and setRect functions when making the FreeTextAnnotation. These did not do what I want, the setPadding function set the padding of the selection rect.

I then tried to make a custom annotation based on the following guides and samples:

I was not able to get this working correctly since I don't have a lot of documentation to go on and none of these examples have user editable components to them (like editing text after the free text annotation has been made)

Here is an example of what I want: What I want

and here is an example what what I don't want: What I don't want

Upvotes: 0

Views: 469

Answers (1)

Zhijie Zhang
Zhijie Zhang

Reputation: 71

On top of my head I don't think freetext annotations can have a padding property according to the PDF Spec. So unfortunately even if we managed to add a padding through a customized draw function, it won't be consistent, meaning that the padding will lose when the download PDF is viewed in other PDF readers such as Acrobat.

However, there is one way we can achieve this and make the appearance consistent, though it's kind of hacky. We can manually set the border and the fill color to be the same and increase the value of the border to make the freetext annotation have padding visually. For example:

const color = new instance.Annotations.Color(3, 244, 252);
instance.annotManager.setAnnotationStyles(annot, () => ({
  StrokeThickness: 30, // padding
  StrokeColor: color,
  FillColor: color,
}))

enter image description here

Upvotes: 1

Related Questions