Merge pull request #1107 from raphael-papazikas/feature-1106

hit canvas pixel ratio configurable

src/Node.ts

@@ -333,6 +333,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *  region for debugging purposes
    * @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
    * @param {Boolean} [config.imageSmoothingEnabled] control imageSmoothingEnabled property of created canvas for cache
+   * @param {Number} [config.hitCanvasPixelRatio] change quality (or pixel ratio) of cached hit canvas.
    * @returns {Konva.Node}
    * @example
    * // cache a shape with the x,y position of the bounding box at the center and
@@ -368,6 +369,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     offset?: number;
     pixelRatio?: number;
     imageSmoothingEnabled?: boolean;
+    hitCanvasPixelRatio?: number;
   }) {
     var conf = config || {};
     var rect = {} as IRect;
@@ -391,7 +393,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       x = conf.x === undefined ? rect.x : conf.x,
       y = conf.y === undefined ? rect.y : conf.y,
       offset = conf.offset || 0,
-      drawBorder = conf.drawBorder || false;
+      drawBorder = conf.drawBorder || false,
+      hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
 
     if (!width || !height) {
       Util.error(
@@ -417,7 +420,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
         height: 0,
       }),
       cachedHitCanvas = new HitCanvas({
-        pixelRatio: 1,
+        pixelRatio: hitCanvasPixelRatio,
         width: width,
         height: height,
       }),
@@ -427,7 +430,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     cachedHitCanvas.isCache = true;
     cachedSceneCanvas.isCache = true;
 
-    this._cache.delete('canvas');
+    this._cache.delete(CANVAS);
     this._filterUpToDate = false;
 
     if (conf.imageSmoothingEnabled === false) {
@@ -484,7 +487,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @returns {Boolean}
    */
   isCached() {
-    return this._cache.has('canvas');
+    return this._cache.has(CANVAS);
   }
 
   abstract drawScene(canvas?: Canvas, top?: Node): void;
@@ -587,7 +590,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       hitCanvas = canvasCache.hit;
     context.save();
     context.translate(canvasCache.x, canvasCache.y);
-    context.drawImage(hitCanvas._canvas, 0, 0);
+    context.drawImage(
+      hitCanvas._canvas,
+      0,
+      0,
+      hitCanvas.width / hitCanvas.pixelRatio,
+      hitCanvas.height / hitCanvas.pixelRatio,
+    );
     context.restore();
   }
   _getCachedSceneCanvas() {

test/unit/Node-cache-test.js

@@ -1470,4 +1470,42 @@ suite('Caching', function () {
       });
     });
   });
+
+  test('hit from cache with custom pixelRatio', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 50,
+      width: 100,
+      height: 100,
+      fill: 'green',
+    });
+
+    layer.add(rect);
+    stage.add(layer);
+
+    rect.cache({
+      hitCanvasPixelRatio: 0.2,
+    });
+    layer.draw();
+
+    var hitCanvas = rect._cache.get("canvas").hit;
+    assert.equal(hitCanvas._canvas.width, rect.width() * 0.2);
+    assert.equal(hitCanvas._canvas.height, rect.height() * 0.2);
+    assert.equal(hitCanvas.pixelRatio, 0.2);
+
+    var canvas = createCanvas();
+    var context = canvas.getContext('2d');
+    context.beginPath();
+    context.rect(100, 50, 100, 100);
+    context.closePath();
+    context.fillStyle = 'green';
+    context.fill();
+    showHit(layer);
+    compareLayerAndCanvas(layer, canvas, 5);
+    assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect);
+  });
 });