Update: use pixelDeviceRatio to choose canvas pixel size (#286)

* Update: use pixelDeviceRatio to choose canvas pixel size * Update: only perform scaling when ratio is not 1 * Update: drawing enter svg from design
box · Aug 11, 2017 · 9e5489d · 9e5489d
1 parent 00dff52
commit 9e5489d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/src/lib/annotations/doc/__tests__/docAnnotatorUtil-test.js b/src/lib/annotations/doc/__tests__/docAnnotatorUtil-test.js
@@ -211,10 +211,13 @@ describe('lib/annotations/doc/docAnnotatorUtil', () => {
             const annotationLayer = {
                 width: 0,
                 height: 0,
-                getContext: sandbox.stub().returns('2d context'),
+                getContext: sandbox.stub().returns({
+                    scale: sandbox.stub()
+                }),
                 classList: {
                     add: sandbox.stub()
-                }
+                },
+                style: {}
             };
             const pageEl = {
                 querySelector: sandbox.stub().returns(undefined),

diff --git a/src/lib/annotations/doc/docAnnotatorUtil.js b/src/lib/annotations/doc/docAnnotatorUtil.js
@@ -346,10 +346,10 @@ export function getLowerRightCornerOfLastQuadPoint(quadPoints) {
 /**
  * Gets the context an annotation should be drawn on.
  *
- * @param {HTMLElement} pageEl The DOM element for the current page
- * @param {string} annotationLayerClass The class name for the annotation layer
- * @param {number} [paddingTop] The top padding of each page element
- * @param {number} [paddingBottom] The bottom padding of each page element
+ * @param {HTMLElement} pageEl - The DOM element for the current page
+ * @param {string} annotationLayerClass - The class name for the annotation layer
+ * @param {number} [paddingTop] - The top padding of each page element
+ * @param {number} [paddingBottom] - The bottom padding of each page element
  * @return {RenderingContext|null} Context or null if no page element was given
  */
 export function getContext(pageEl, annotationLayerClass, paddingTop, paddingBottom) {
@@ -358,21 +358,35 @@ export function getContext(pageEl, annotationLayerClass, paddingTop, paddingBott
     }
 
     let annotationLayerEl = pageEl.querySelector(`.${annotationLayerClass}`);
+    let context;
     // Create annotation layer if one does not exist (e.g. first load or page resize)
     if (!annotationLayerEl) {
         annotationLayerEl = document.createElement('canvas');
         annotationLayerEl.classList.add(annotationLayerClass);
         const pageDimensions = pageEl.getBoundingClientRect();
         const pagePaddingTop = paddingTop || 0;
         const pagePaddingBottom = paddingBottom || 0;
-        annotationLayerEl.width = pageDimensions.width;
-        annotationLayerEl.height = pageDimensions.height - pagePaddingTop - pagePaddingBottom;
+        const pxRatio = window.devicePixelRatio || 1;
+        const width = pageDimensions.width;
+        const height = pageDimensions.height - pagePaddingTop - pagePaddingBottom;
+
+        annotationLayerEl.width = pxRatio * width;
+        annotationLayerEl.height = pxRatio * height;
+        context = annotationLayerEl.getContext('2d');
+
+        if (pxRatio !== 1) {
+            annotationLayerEl.style.width = `${width}px`;
+            annotationLayerEl.style.height = `${height}px`;
+            context.scale(pxRatio, pxRatio);
+        }
 
         const textLayerEl = pageEl.querySelector('.textLayer');
         pageEl.insertBefore(annotationLayerEl, textLayerEl);
+    } else {
+        context = annotationLayerEl.getContext('2d');
     }
 
-    return annotationLayerEl.getContext('2d');
+    return context;
 }
 
 /**

diff --git a/src/lib/shell.html b/src/lib/shell.html
@@ -13,8 +13,8 @@
                 </svg>
             </button>
             <button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden">
-                <svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 24 24" focusable="false">
-                  <path d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"/>
+                <svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
+                  <path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
                 </svg>
                 <svg class="bp-btn-annotate-draw-cancel bp-is-hidden" width="22" height="21" viewBox="0 0 24 24" focusable="false">
                   <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"/>