From 2c431bb5a80db32c34716b323a5a312fc4b979a1 Mon Sep 17 00:00:00 2001 From: Kam <331677620@qq.com> Date: Mon, 28 Aug 2023 15:09:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20pdf-view=20?= =?UTF-8?q?=E9=BB=98=E8=AA=8D=E7=B8=AE=E6=94=BE=E7=B4=9A=E5=88=A5=EF=BC=8C?= =?UTF-8?q?=E5=84=AA=E5=8C=96=E7=B8=AE=E6=94=BE=E4=BD=BF=E9=BB=98=E8=AA=8D?= =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E6=95=88=E6=9E=9C=E6=9B=B4=E4=BD=B3=E6=B8=85?= =?UTF-8?q?=E6=99=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/pdf-viewer/CHANGELOG.md | 6 ++++++ packages/pdf-viewer/package.json | 2 +- packages/pdf-viewer/src/PDFPage/PDFPage.tsx | 10 ++++------ packages/pdf-viewer/src/PDFViewer.tsx | 14 +++++++------- packages/pdf-viewer/src/utils.ts | 15 +++++++++------ 5 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/pdf-viewer/CHANGELOG.md b/packages/pdf-viewer/CHANGELOG.md index e804f551..f3d7cbe8 100644 --- a/packages/pdf-viewer/CHANGELOG.md +++ b/packages/pdf-viewer/CHANGELOG.md @@ -1,5 +1,11 @@ # @orca-fe/pdf-viewer +## 1.18.0 + +### Minor Changes + +- feat: 更新 pdf-view 默認縮放級別，優化縮放使默認顯示效果更佳清晰 + ## 1.17.1 ### Patch Changes diff --git a/packages/pdf-viewer/package.json b/packages/pdf-viewer/package.json index 9f794f58..db1a871d 100644 --- a/packages/pdf-viewer/package.json +++ b/packages/pdf-viewer/package.json @@ -1,6 +1,6 @@ { "name": "@orca-fe/pdf-viewer", - "version": "1.17.1", + "version": "1.18.0", "description": "PDF Viewer", "keywords": [ "react", diff --git a/packages/pdf-viewer/src/PDFPage/PDFPage.tsx b/packages/pdf-viewer/src/PDFPage/PDFPage.tsx index 977bed55..f9ff8da4 100644 --- a/packages/pdf-viewer/src/PDFPage/PDFPage.tsx +++ b/packages/pdf-viewer/src/PDFPage/PDFPage.tsx @@ -5,6 +5,7 @@ import { floorBy } from '@orca-fe/tools'; import type { PageViewport } from '../context'; import PDFViewerContext from '../context'; import useStyle from './PDFPage.style'; +import { PixelsPerInch } from '../utils'; const globalOutputScale = Math.max(window.devicePixelRatio, 1); @@ -26,7 +27,7 @@ const PDFPage = (props: PdfPageProps) => { const rootRef = useRef(null); - const scale = 2 ** zoom; + const scale = 2 ** zoom * PixelsPerInch.PDF_TO_CSS_UNITS; const [_this] = useState<{ task?: any; @@ -62,11 +63,8 @@ const PDFPage = (props: PdfPageProps) => { if (!render) return; if (canvas && page) { - // const viewport = page.getViewport({ - // scale: Math.min(4 * outputScale, scale), - // }) as PageViewport; - canvas.width = Math.round(viewport.width * outputScale); - canvas.height = Math.round(viewport.height * outputScale); + canvas.width = Math.ceil(viewport.width * outputScale); + canvas.height = Math.ceil(viewport.height * outputScale); canvas.hidden = true; const context = canvas.getContext('2d', { alpha: false }); if (context) { diff --git a/packages/pdf-viewer/src/PDFViewer.tsx b/packages/pdf-viewer/src/PDFViewer.tsx index a6d38130..3dddefc8 100644 --- a/packages/pdf-viewer/src/PDFViewer.tsx +++ b/packages/pdf-viewer/src/PDFViewer.tsx @@ -14,7 +14,7 @@ import { DownloadOutlined } from '@ant-design/icons'; import type { PageViewport, PDFViewerHandle, RenderPageCoverFnType, PDFViewerInternalStateType, SourceType } from './context'; import PDFViewerContext, { PDFToolbarContext } from './context'; import PDFPage from './PDFPage'; -import { findSortedArr } from './utils'; +import { findSortedArr, PixelsPerInch } from './utils'; import ZoomAndPageController from './ZoomAndPageController'; import PDFToolbar from './PDFToolbar'; import useStyle from './PDFViewer.style'; @@ -192,7 +192,7 @@ const PDFViewer = React.forwardRef((props, pRef setZoom(newZoom); const pageDom = pageContainerRef.current; if (pageDom) { - pageDom.style.setProperty('--scale-factor', `${2 ** newZoom}`); + pageDom.style.setProperty('--scale-factor', `${2 ** newZoom * PixelsPerInch.PDF_TO_CSS_UNITS}`); } dom.scrollTop = newScrollTop; dom.scrollLeft = newScrollLeft; @@ -240,9 +240,9 @@ const PDFViewer = React.forwardRef((props, pRef if (zoomMode && _this.size && maxWidth && pageMaxHeight) { if (zoomMode === 'autoWidth') { // 调整缩放级别，使其与容器宽度匹配 - newZoom = Math.log2((_this.size.width - 32) / pageMaxWidth); + newZoom = Math.log2((_this.size.width - 32) / PixelsPerInch.PDF_TO_CSS_UNITS / pageMaxWidth); } else if (zoomMode === 'autoHeight') { - newZoom = Math.log2((_this.size.height - 32) / pageMaxHeight); + newZoom = Math.log2((_this.size.height - 32) / PixelsPerInch.PDF_TO_CSS_UNITS / pageMaxHeight); } } @@ -501,7 +501,7 @@ const PDFViewer = React.forwardRef((props, pRef const pageDom = pageContainerRef.current; if (pageDom) { - pageDom.style.setProperty('--scale-factor', `${2 ** newZoom}`); + pageDom.style.setProperty('--scale-factor', `${2 ** newZoom * PixelsPerInch.PDF_TO_CSS_UNITS}`); } dom.scrollTop = newScrollTop; dom.scrollLeft = newScrollLeft; @@ -697,8 +697,8 @@ const PDFViewer = React.forwardRef((props, pRef } }} style={{ - '--scale-factor': scale, - '--pdf-viewer-page-scale': scale, + '--scale-factor': scale * PixelsPerInch.PDF_TO_CSS_UNITS, + '--pdf-viewer-page-scale': scale * PixelsPerInch.PDF_TO_CSS_UNITS, }} > {viewports.length === 0 && !loading && !pluginLoading && emptyTips} diff --git a/packages/pdf-viewer/src/utils.ts b/packages/pdf-viewer/src/utils.ts index 2df9400f..3a7456d1 100644 --- a/packages/pdf-viewer/src/utils.ts +++ b/packages/pdf-viewer/src/utils.ts @@ -1,9 +1,4 @@ -export function findSortedArr( - arr: number[], - value: number, - start = 0, - end = arr.length, -) { +export function findSortedArr(arr: number[], value: number, start = 0, end = arr.length) { const index = Math.floor((start + end) / 2); if (arr[end - 1] < value) return end; if (index === start) { @@ -20,3 +15,11 @@ export function findSortedArr( if (arr[index - 1] < value) return index; return findSortedArr(arr, value, start, index); } + +export class PixelsPerInch { + static CSS = 96.0; + + static PDF = 72.0; + + static PDF_TO_CSS_UNITS = this.CSS / this.PDF; +}