fix bug for drawHitFromCache + HDPI. close #48

CHANGELOG.md

@@ -7,7 +7,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 - `to` don't throw error if no `onFinish` callback
 - HDPI support for desktop
-- Fix bug when filters on not correct for HDPI
+- Fix bug when filters are not correct for HDPI
+- Fix bug when hit area is not correct for HDPI
 
 ### Changed
 - context wrapper is more capable with native context.

src/Shape.js

@@ -394,11 +394,27 @@
                 sceneImageData, sceneData, hitImageData, hitData, len, rgbColorKey, i, alpha;
 
             hitContext.clear();
+            var ratio = sceneCanvas.pixelRatio;
+            var hitWidth = Math.floor(width / ratio);
+            var hitHeight = Math.floor(height / ratio);
 
             try {
-                sceneImageData = sceneContext.getImageData(0, 0, width, height);
-                sceneData = sceneImageData.data;
-                hitImageData = hitContext.getImageData(0, 0, width, height);
+                // if pixelRatio > 1 we need to redraw scene canvas into temp canvas
+                // with pixelRatio = 1 to have the same dimension as hitCanvas
+                if (ratio !== 1) {
+                    var tempCanvas = new Konva.SceneCanvas({
+                        width : hitWidth,
+                        height : hitHeight,
+                        pixelRatio : 1
+                    });
+                    tempCanvas.getContext().drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);
+                    sceneImageData = tempCanvas.getContext().getImageData(0, 0, hitWidth, hitHeight);
+                    sceneData = sceneImageData.data;
+                } else {
+                    sceneImageData = sceneContext.getImageData(0, 0, width, height);
+                    sceneData = sceneImageData.data;
+                }
+                hitImageData = hitContext.getImageData(0, 0, hitWidth, hitHeight);
                 hitData = hitImageData.data;
                 len = sceneData.length;
                 rgbColorKey = Konva.Util._hexToRgb(this.colorKey);
@@ -413,11 +429,10 @@
                         hitData[i + 3] = 255;
                     }
                 }
-
                 hitContext.putImageData(hitImageData, 0, 0);
             }
             catch(e) {
-                Konva.Util.warn('Unable to draw hit graph from cached scene canvas. ' + e.message);
+                Konva.Util.error('Unable to draw hit graph from cached scene canvas. ' + e.message);
             }
 
             return this;

test/manual/manual-test.js

@@ -340,4 +340,48 @@ suite('Manual', function() {
             tween.play();
         });
     });
+
+
+    // ======================================================
+    test.only('create image hit region with pixelRatio, look at hit, test hit with mouseover', function(done) {
+        var imageObj = new Image();
+
+        Konva.pixelRatio = 2;
+        var stage = addStage();
+        var layer = new Konva.Layer();
+
+        imageObj.onload = function() {
+
+            var lion = new Konva.Image({
+                x: 200,
+                y: 40,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(lion);
+
+            stage.add(layer);
+
+            lion.cache();
+            lion.drawHitFromCache();
+            layer.draw();
+
+            lion.on('mouseenter', function() {
+                document.body.style.cursor = 'pointer';
+            });
+
+            lion.on('mouseleave', function() {
+                document.body.style.cursor = 'default';
+            });
+
+            Konva.pixelRatio = 1;
+            done();
+
+
+        };
+        imageObj.src = 'assets/lion.png';
+
+        showHit(layer);
+    });
 });