如何解决如果布局为水平,PDFTron绘制垂直框
我有以下代码,当用户按下“ Shift +鼠标左键”时将绘制矩形
// Draw text box with alt + mouse left click
docViewer.on('click',(evt: any) => {
if (evt.shiftKey) {
// Get get window coordinates
const windowCoords = getMouseLocation(evt);
// Get current page number
const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
const page = displayMode.getSelectedPages(windowCoords,windowCoords);
const clickedPage = (page.first !== null) ? page.first : docViewer.getCurrentPage();
// Get page coordinates
const pageCoordinates = displayMode.windowToPage(windowCoords,clickedPage);
// create rectangle
const rectangleAnnot = new instanceAnnotations.RectangleAnnotation();
rectangleAnnot.PageNumber = clickedPage + 1;
rectangleAnnot.X = pageCoordinates.x;
rectangleAnnot.Y = pageCoordinates.y - 14;
rectangleAnnot.Width = 200;
rectangleAnnot.Height = 14;
rectangleAnnot.StrokeColor = new instanceAnnotations.Color(255,1);
rectangleAnnot.StrokeThickness = 2;
rectangleAnnot.Author = annotManager.getCurrentUser();
annotManager.addAnnotation(rectangleAnnot,false);
annotManager.redrawAnnotation(rectangleAnnot);
}
});
现在的问题是,如果PDF是垂直的,则上面的代码可以很好地绘制矩形,但是如果PDF是水平的,则可以垂直绘制Rectangle。请检查以下屏幕截图以供参考。
如您在第1页上看到的,它绘制了垂直框,但在第二页上它绘制得很好。 那么如何解决呢?
解决方法
您需要考虑页面旋转,以确保您的矩形与页面对齐。 这是一个简单的示例,说明如何使用getCompleteRotation API通过根据文档旋转方式设置宽度和高度来实现此目的。
docViewer.on("click",(evt) => {
if (evt.shiftKey) {
// Get get window coordinates
const windowCoords = getMouseLocation(evt);
// Get current page number
const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
const page = displayMode.getSelectedPages(windowCoords,windowCoords);
const clickedPage =
page.first !== null ? page.first : docViewer.getCurrentPage();
// Get page coordinates
const pageCoordinates = displayMode.windowToPage(
windowCoords,clickedPage
);
// create rectangle
const rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = clickedPage + 1;
// Depending on doc orientation set Width and Height
const rotation = docViewer.getCompleteRotation(clickedPage);
const widthAndHeight = getWidthAndHeightBasedOnRotation(rotation);
// You will have to adjust the X,Y as well depending on rotation
rectangleAnnot.X = pageCoordinates.x;
rectangleAnnot.Y = pageCoordinates.y;
rectangleAnnot.Width = widthAndHeight.width;
rectangleAnnot.Height = widthAndHeight.height;
rectangleAnnot.StrokeColor = new Annotations.Color(255,1);
rectangleAnnot.StrokeThickness = 2;
rectangleAnnot.Author = annotManager.getCurrentUser();
annotManager.addAnnotation(rectangleAnnot,false);
annotManager.redrawAnnotation(rectangleAnnot);
}});
const getWidthAndHeightBasedOnRotation = (rotation) => {
switch (rotation) {
case CoreControls.PageRotation["E_0"]:
return {
width: 200,height: 14,};
case CoreControls.PageRotation["E_90"]:
return {
width: 14,height: 200,};
case CoreControls.PageRotation["E_180"]:
return {
width: 200,};
case CoreControls.PageRotation["E_270"]:
return {
width: 14,};
}
};
您可以从实例访问CoreControls对象。请注意,您还需要根据旋转来调整X,Y坐标。 This is a good resource on PDF coordinates and viewer coordinates可以帮助您将头部包裹住。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。