[SOS] Unable to find some workings in Pdfjs-express


Thanks for your continuous support for the features and implementation resolutions. Now we are in final stage for deployment. So we will be buying the full licence for productivity usage. But there are some features which we are unable to find in documentations. It will be helpful if you help us with the respective.
Let me know if these are possible.

  1. If user hovers over any selection such as area, line, count then corresponding details like it’s name of annotation,scale factor and measured quantity should be displayed as a tooltip.

  2. When user hovers over a corner in a pdf (object detection feature), that part should get a magnified as a zoom in a small part.

  3. Able to convert an area to perimeter.

  4. Can we add a texture for area annotation’s (AnnotationCreateAreaMeasurement) border like solid, wooden, cement.

  5. Can we add different types of line like ( —, … , ____ ) for AnnotationCreatePerimeterMeasurement.

  6. If user clicks on any window or door (an object in pdf) then all other respective objects should get highlighted.

  7. Cloud annotations should always be in a rectangle shape but resizable. (if any method).

  8. When tool.setAllowCreationOverAnnotation(true) is enabled, If I draw annotations over another another annotations then I don’t get and measurements in getContents(). But I want to get the measured areas/perimetersover another annotations. How to do that?


  1. You can create custom hover overlays with the setAnnotationContentOverlayHandler function

  2. This is a very complex problem that would probably require us to do a custom project for.

  3. This is definitely doable. Here’s an example of converting all area annotations to perimeter annotations. You will probably have to tweak this for your needs, but here is the core of it. You might want to copy some style properties over to the new annotation as well.

  const { annotManager, Annotations } = instance;
  const annots = annotManager.getAnnotationsList();
  annots.forEach((annot) => {
    if (annot instanceof Annotations.PolygonAnnotation && annot.IT === "PolygonDimension") {
      const newAnnot = new Annotations.PolylineAnnotation();
      const paths = annot.getPath();
      paths.forEach(path => {
        newAnnot.addPathPoint(path.x, path.y);
      newAnnot.Measure = annot.Measure;
      newAnnot.IT = 'PolyLineDimension';

  1. This is possible by overriding the corresponding annotations draw function

  2. Same answer as 4

  3. Assuming windows and doors are annotations, this should be pretty easy. You can listen to the annotationSelected event, detect if the annotation selected is a window or door, and then loop over all the annotations in the document (you can get them with getAnnotationsList), and apply your custom highlight code. You might have to override the draw function here too. Maybe adding a highlighted state to the annotations and draw them with a yellow background if its true or something.

  4. In the UI you can select the rectangle annotation and then change the style to cloudy before you make the annotation. If you want to enforce this on the user you can remove the cloudy annotation and just have them use the rectangle version.

  5. Can you share your code for this?

We just created a repo with some examples of creating custom annotations and overriding draw functions etc, this might be useful for you to take a look at. You can find it here.

I hope this helps! If you have any more specific questions about any of these please create a new ticket and follow the template. This makes it easier for other users to find solutions to their problems.


1 Like