GetQuads in JavaScript

[Alexey Pasmanik]

HI All !

In version for IOS you have  function GetQuads, which from coordinates: x1, y1, x2, y2, can prepare Quads.

Code example: 

[self.pdfViewCtrl SelectX1:startPoint.x Y1:startPoint.y PageNumber1:page X2:endPoint.x Y2:endPoint.y  PageNumber2:page]

select the text selection

PTSelection* sel = [self.pdfViewCtrl GetSelection:page];

PTVectorQuadPoint* quads = [sel GetQuads];

unsigned long num_quads = [quads size];

Do you have similar functionality in JavaScript, in WebViewer ? 

Regards

[Matt Parizeau]

Hi Alexey,

There isn't an equivalent function getQuads but you can get the quads pretty easily by listening to the textSelected event. For example:

var selectedQuads;

$(document).on('viewerLoaded', function() {
  readerControl.docViewer.on('textSelected', function(e, quads) {
    if (quads) {
      quads = quads.map(function(quad) {
        return quad.getPoints();
      });
    }
    selectedQuads = quads;
    console.log(selectedQuads);
  });
});

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Alexey Pasmanik]

HI, 

Thank you very much for the answer. I have one additional question. 

We currently saving just two points. Top left  and down right of highlight selection. 

Is right way to save HighLight is save Quads to DB or save two points ? 

Alexey P.

Web-developer , Classoos,  

[Matt Parizeau]

Hi Alexey,

I don't think there are any cases where the quads don't define a rectangle so saving just two points should be fine.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Alexey Pasmanik]

But how i can build highlight object ? 

inputAnnot.setRect(rect)

When i try to use  function : setRect, it's not display annotation.  So, when i use Qads with 2 point's it's not the same of selected quads.  Selected Quads Array include multiple points of rectangles.... 

Current code: 

.....

var annotManager    = window.docViewer.getAnnotationManager();
var inputAnnot      = new Annotations.TextHighlightAnnotation()
var color           = "#"+parseInt(hightlight.color).toString(16);
color               = $scope._hexToRgbA(color);

var StrokColor = new Annotations.Color();
StrokColor.R = color[0];
StrokColor.G = color[1];
StrokColor.B = color[2];
StrokColor.A = color[3];

inputAnnot.StrokeColor  = StrokColor;
inputAnnot.Id           = hightlight.highlight_id;
inputAnnot.Fill         = StrokColor;
inputAnnot.Author       = readerControl.getAnnotationUser();
var start_location      = JSON.parse( hightlight.start_location.replace("{",'[').replace("}",']'));
var end_location        = JSON.parse( hightlight.end_location.replace("{",'[').replace("}",']'));
var rect                = new Annotations.Rect(start_location[0], start_location[1], end_location[0], end_location[1]);

inputAnnot.setRect(rect);
inputAnnot.Quads = [
    {   x1: start_location[0],
        x2: end_location[0],
        x3: end_location[0],
        x4: start_location[0],
        y1: start_location[1],
        y2: start_location[1],
        y3: end_location[1],
        y4: end_location[1]
    }
]

inputAnnot.setPageNumber(hightlight.page_number);
inputAnnot.setContents(hightlight.highlight_text);

var res =  annotManager.addAnnotation(inputAnnot);
annotManager.drawAnnotations(hightlight.page_number);

Can you send some example for drawing highlight's with 2 coordinates  ? 

Waiting for  response,

Thanks, 

Alexey P.

Classoos,

[Matt Parizeau]

Hi Alexey,

I'm not sure what the numbers that you're using as start_location and end_location are, but here are some hardcoded values as an example that work for me:

var start_location = [215, 240];
var end_location = [360, 210];

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Alexey Pasmanik]

HI, 

And how i draw this highlight selection  ? 

Thanks, 

Alexey P.

-----------

Classoos

[Matt Parizeau]

Hi Alexey,

From the code that you posted just replace the lines that are assigning start_location and end_location with the hardcoded arrays from my post.

Matt Parizeau

Software Developer

PDFTron Systems Inc.