События Konva неправильно расположены после изменения размера экрана

Question

В моем коде я изменяю размеры холста Konva и элементов контента konvajs для поддержания полноэкранного отображения.

resizeCanvas() 
window.onresize = function() { resizeCanvas(); } 

function resizeCanvas() { 
var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0], 
    x = w.innerWidth || e.clientWidth || g.clientWidth, 
    y = w.innerHeight || e.clientHeight || g.clientHeight; 

    var ratio = x/y; 
    var should = 1920/1080; 

    var cv = document.getElementsByTagName("canvas")[0]; 
    var cc = document.getElementsByClassName("konvajs-content")[0]; 

    var cx, cy; 
    var cleft=0; 
    if(ratio > should) { 
     cx = (y * 1920/1080); 
     cy = y; 
     cleft = (x - cx)/2; 
    } else { 
     cx = x; 
     cy = (x * 1080/1920); 
     cv.setAttribute("style", "width:" + x + "px;height:"+ (x*1080/1920) + "px;"); 
    } 
    cc.setAttribute("style", "width:" + x + "px;height: " + y + "px;"); 
    cv.setAttribute("style", "width:" + cx + "px;heigth: " + cy + "px; position: relative; left: " + cleft + "px"); 
} 

Все это отлично работает, пока я не попытаюсь захватить вход любого события. Как вы можете видеть в JSFiddle, при попытке щелкнуть по тексту «Test» вы не будете вызывать событие.

Но если вы нажмете ~ 40px влево и 20px над текстом, вы будете запускать события.

https://jsfiddle.net/3qc3wtr3/2/

Есть ли способ, чтобы сохранить поведение изменения размера и для того, чтобы события увольняют на основе фактического расположения элементов?

Answer 1

Вы должны использовать stage.width() и stage.height(), чтобы соответствовать странице. Если вам нужно, вы можете добавить масштаб в сцену.