屏幕调整大小后 Konva 事件位置错误

Question

在我的代码中，我正在调整 Konva 画布和 konvajs-content 元素的大小以保持全屏外观。

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 中看到的那样，当您尝试单击“测试”文本时，您不会触发事件。

但是，如果您单击左侧 ~40px 和文本上方 20px 的位置，您将触发这些事件。

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

有没有办法保持调整大小行为并确保根据元素的实际位置触发事件？

Answer 1

您应该使用stage.width() 和stage.height() 来适应页面。如果需要，您可以在舞台上添加比例。