Value's not getting proper during co-ordinates calculation

Technical Support
1

Hi,
As mentioned in following answer link : Trigger 'mouseMove' and 'click' event while drawing an annotation

I have retrieved x,y co-ordinates from “mouseMove” event and also calculated distance between 2 points as per Pythagoras theorem i.e sqrt(a2+b2) .But i am not able to get desired value for annotation.

value doesn’t match from popup measurement overlay(right bottom corner) and got from code provided below.
code:

this.viewerInstance.docViewer.on('click', evt => {
        let tool = instance.docViewer.getToolMode();
        instance.docViewer.on('click', evt => {
          if (this.annotation === 'AnnotationCreatePerimeterMeasurement'
            || this.annotation === 'AnnotationCreateAreaMeasurement') {
            let annot = tool.annotation;
            if (annot) {
              if(annot.getPath().length >= 2) {
                let point_one = (( annot.getPath()[1].x - annot.getPath()[0].x) * ( annot.getPath()[1].x - annot.getPath()[0].x));
                let point_two = (( annot.getPath()[1].y - annot.getPath()[0].y) * ( annot.getPath()[1].y - annot.getPath()[0].y));
                let newstr:any = Math.sqrt(point_one + point_two);
                let final:number = parseFloat(newstr) ;
                console.log(final); //  <== this console prints value
              }
            }
          }
        });
      });

Also another question is, if we set scale for any page ,then by calling getPath(), do we get co-ordinates with respect to newly set scale or default scale? if its default scale co-ordinates then how can i get proper value for specific annotation of specific scale.

could anyone please provide comments on this.

2

Hi,

Annotations in PDFJS Express always use Point, which is not the unit that’s being used in the bottom right measurement overlay.

Are you just wanting to get the value that’s shown in the measurement overlay? If this is the case you can just call tool.annotation.getContents().

Best Regards,
Zhijie

3

Hi ,
We have already tried as you mentioned above. but it’s not working as per our requirements.
Actually we need to update value in text-box whenever we move mouse while drawing annotation(not like bottom right measurement overlay). We need to update measured value not only on clicks but also on mouse move event.i.e if we start drawing any annotation then after first click values should update continuously when we increase line length.
you can refer “AnnotationCreateDistanceMeasurement” (scale) , in which value continuously changes and reflected above of the same line, if i increase/decrease line length.

could you please provide comments on above.

thanks and regards,
Vivek Sonawane

4

Hi,

Sorry for the delay in the reply.

I think I understand what you are trying to achieve and the issue you are facing now.

As I mentioned in the other post, the values you see in the getPath are in pt, so you would need to do some transformation.

The information you need to do the transformation is contained in annot.Measure. For polyline, the transformation would be as the following:

adjustContents: function() {
  var perimeter = getPerimeter(annot.getPath());
  var axisNumberFormat = annot['Measure']['axis'][0];
  var distanceNumberFormatArray = annot['Measure']['distance'];
  var convertedPerimeter = perimeter * axisNumberFormat['factor'] * distanceNumberFormatArray[0]['factor'];
  console.log(convertedPerimeter);
},

Thanks,
Zhijie