Add text to StampAnnotation

Laza · September 20, 2021, 5:52am

Hi there, I have a number of annotations that I have created that all extend from the StampAnnotation.

Example
class Client3Annotation extends Annotations.StampAnnotation

Is there a simple way to add some text inside the annotation, or do I have to setCustomDrawHandler to do this, seems like such a simple task?

This also applies to adding a tool button, can we add text to button or is it just an image:

instance.UI.registerTool

tgordon · September 20, 2021, 10:08pm

Hello Laza,

You can add text in the pop-up comment when you hover over the annotation using setContents
https://www.pdftron.com/api/web/Core.Annotations.StampAnnotation.html#setContents__anchor

However, if you want to add text inside the stamp annotation on the page, you would have to modify the draw handler.

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Laza · September 21, 2021, 4:14am

Thanks, Tyler, are you able to point me to an example, having some trouble getting text onto stamp.

tgordon · September 21, 2021, 5:23pm

Hi Laza,

We have an annotation called Rubber Stamp, it includes a way to create a custom stamp that you can set text inside, with a subtext as well. You can read more here:
https://www.pdftron.com/api/web/Core.Tools.RubberStampCreateTool.html#drawCustomStamp__anchor

You could modify the customDrawHandler like this:

    const tool = documentViewer.getTool('AnnotationCreateRubberStamp');
    tool.setCustomDrawFunction((ctx, annotation) => {
      const { Icon } = annotation;
      // `Icon` contains the text content of the stamp
      // This example conditionally renders custom content on the stamp only
      // if the contents of the stamp are in the approved list of stamps to
      // draw on
      const stampsToDrawOn = [
        'Approved',
        'Completed',
        'Final',
      ];
      if (stampsToDrawOn.includes(Icon)) {
        // Arbitrary example where an image is available in the DOM
        const img = document.getElementById('my-company-logo');
        ctx.font = '100px serif';
        ctx.fillText('Hello world', 0, 0);
        ctx.drawImage(
          img, // The image to render
          0, // The X coordinate of where to place the image
          0, // The Y coordinate of where the place the image
          25, // The width of the image in pixels
          25, // The height of the image in pixels
        );
      }
    });

Which I found here: PDFTron WebViewer Class: RubberStampCreateTool

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Laza · September 22, 2021, 1:45am

Is it possible to create a RubberStamp annotation from a button, so click button, or drag from toolbar, I can see we can drag from the dropdown menu, I would like to do this from buttons I have created.

tgordon · September 22, 2021, 10:28pm

Hello Laza,

We have a guide here on programmatically creating annotations:

You would call this code on your button’s onClick event.

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Laza · September 22, 2021, 11:03pm

Thanks, Tyler, this is exactly what I have used, is there a way to achieve drag and drop as made available in the Rubber Stamp dropdown.

tgordon · September 22, 2021, 11:39pm

Hey Laza,

Our “drag and drop” is actually just a preview of the Rubber Stamp before it is placed, you can use showPreview() to view the annotation before it is placed.
Found here: PDFTron WebViewer Class: RubberStampCreateTool

Will this work for you?

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Laza · September 22, 2021, 11:56pm

Tyler, you’re a legend, thanks for your help.

Laza · September 22, 2021, 11:59pm

LOL, one last thing, is it possible to add a Button to represent a Rubber Stamp so it can be dragged onto the PDF?

tgordon · September 23, 2021, 12:18am

Hey Laza,

For our Rubber Stamp selector we use the Stamp’s image inside a button component, as seen here:

github.com

PDFTron/webviewer-ui/blob/1865bb60f4041fa9f00844ce1580422971f496df/src/components/RubberStampOverlay/RubberStampOverlay.js#L72

    
      
            const stamps = this.stampTool.getCustomStamps();
            stamps.splice(index, 1);
            this.stampTool.setCustomStamps(stamps);
          }
          
          
render() {
            const { isMobile, standardStamps, customStamps } = this.props;
          
          
  const rubberStamps = standardStamps.map(({ imgSrc, annotation }, index) =>
              <button key={index} className="rubber-stamp" aria-label={`${this.props.t('annotation.stamp')} ${index + 1}`} onClick={() => this.setRubberStamp(annotation, index)}>
                <img src={imgSrc} alt="" />
              </button>,
            );
          
          
  const customImgs = customStamps.map(({ imgSrc, annotation }, index) =>
              <div key={index} className="stamp-row">
                <button className="stamp-row-content custom-stamp" aria-label={`${this.props.t('annotation.rubberStamp')} ${index + 1}`} onClick={() => this.setRubberStamp(annotation, standardStamps.length + index)}>
                  <img src={imgSrc} alt=""/>
                </button>
                <button className="icon" onClick={() => this.deleteCustomStamp(index)}>
                  <Icon glyph="icon-delete-line"/>

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Laza · September 23, 2021, 1:00am

I see, so no need to implement any drag and drop with a combination of showPreview and image, amazing, thank you.

tgordon · September 23, 2021, 3:57pm

Hey Laza,

No problem! Feel free to reach out if you have any other questions.

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com