Annotation "AnnotationCreateSticky" custom icon

WebViewer Version: 8.1.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? Yes
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
Hello,
I’m using PDFTRon in a React/Redux application.
Is this possible to use a custom icon with AnnotationCreateSticky tool ?

Please describe your issue and provide steps to reproduce it:
WebViewer(
{

},
viewer.current
).then((instance) => {
const {
documentViewer,
annotManager,
} = instance.Core;

  const LocationPinTool = documentViewer.getTool("AnnotationCreateSticky");

  LocationPinTool.addEventListener("annotationAdded", (annotation) => {
// This works with default icons, but can i use a custom one ?
    annotation.Icon =
      instance.Annotations.StickyAnnotation.IconNames.CHECKMARK;

    annotManager.addAnnotation(annotation, false);
    annotManager.redrawAnnotation(annotation);
  });

Please provide a link to a minimal sample where the issue is reproducible:
https://4uvnt.csb.app/

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello Antoine,

Thank you for contacting WebViewer Support.

You could do so by following this guide.

Please let me know how this works for you, and if you have any other questions

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Hello Jason,

Thank you for your reply. Maybe I misspoke. I don’t want to customize the button icon, I want to customize the one for an annotation.
I tried with the AnnotationCreateSticky tool and edited the myannotation.Icon parameter but only with the list of default icons. Is it possible to use my own with this tool?
I know I can do it with the Stamp tool but the setup takes a lot longer.

Thanks

Hello Antoine,

I see, you could do that by adding custom appearance, please check out this guide.

Please let me know how this works for you.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Hello Jason,

And thanks again for your reply.
I can create programmatically annotation with StampAnnotation and change image using setImageData function. I set NoZoom to true, to keep the image size even if the zoom level changes.

Here is the thing :
01
As you can see the origin point of the annotation is at the top left corner. So when user zoom on it the position is changing…

How can I change the position of the annotation image to get the origin like this? :
2

Thanks,
Best regards,

Antoine

Hello Antoine,

Thank you for your reply.
For annotations with no zoom, they will stick to the top left point; that is the fixed point.
That will always be the same on the document for “NoZoom”.
So this means, as you zoom in and out, that left point is the same.
So there is not really much we can do.

Here is what it says formally in the PDF spec:

If set, do not scale the annotation’s appearance to match the
magnification of the page. The location of the annotation on the page
(defined by the upper-left corner of its annotation rectangle) shall
remain fixed regardless of the page magnification

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com