KineticJS，图像上的 Veeery 慢速点击事件答案

【问题标题】：KineticJS, Veeery slow click event on imageKineticJS，图像上的 Veeery 慢速点击事件
【发布时间】：2014-08-17 03:13:44
【问题描述】：

我想点击一些图片上标有笔圈的KineticJS图片：

带有蓝色圆圈的图片工作正常。

带有黄色圆圈的图片每点击 50 次就会起作用。

带有红色圆圈的图片永远无法正常工作。

这就是我添加事件监听器的方式：

蓝色：

    var imgLogo = new Image();
    imgLogo.src = 'http://folk.ntnu.no/rubenra/web/Resources/bobsByggLogo.png';
    imgLogo.onload = function(){
        imageLogo = new Kinetic.Image({
            image: imgLogo,
            x: 10,
            y: 580
        });
        layer.add(imageLogo);
        imageLogo.on('mousedown', function() {
            console.log('logo trykt');
        });
    }

黄色：

    var imgNextDayButton = new Image();
    imgNextDayButton.src = 'http://folk.ntnu.no/rubenra/web/Resources/nextDayButton.png';
    imgNextDayButton.onload = function(){
        imageNextDayButton = new Kinetic.Image({
            image: imgNextDayButton,
            x: buttonsBound.getAttr('x')+60,
            y: buttonsBound.getAttr('y')+20
        });

        imageNextDayButton.on('mousedown', function() {
            alert('Neste Dag');
            console.log('knapp trykt');
        });

        layer.add(imageNextDayButton);


    }

红色：

    var imgWarn = new Image();
    imgWarn.src = 'http://folk.ntnu.no/rubenra/web/Resources/shapeWarn.png';
    imgWarn.onload = function(){
        imageWarn = new Kinetic.Image({
            image: imgWarn,
            x: xstart+100,
            y: ystart+45,
            width: imgWarn.width,
            heigth: imgWarn.height
        });
        imageWarn.on('mousedown',function(){
            alert('Show Warning to ' + name);
        })
        group.add(imageWarn);
    }

这里是sourcecode 的链接。它不适用于 jsbin，但它应该适用于每个代码编辑器。

链接到服务器上的页面： Page on server

【问题讨论】：

标签： javascript mouseevent kineticjs

【解决方案1】：

在服务器上尝试了您的页面，我发现代码工作正常。当我点击一些元素时，这里会显示一些日志：

start: 147 index.html:361
stopp index.html:377
start: 391 index.html:361
stopp index.html:377
start: 77 index.html:361
stopp index.html:377
start: 840 index.html:361
stopp index.html:377
start: 573 index.html:361
stopp index.html:377
start: 439 index.html:361
stopp index.html:377
start: 503 index.html:361
stopp index.html:377
start: 354 index.html:361
stopp index.html:377
start: 362 index.html:361
stopp index.html:377
start: 585 index.html:361
stopp index.html:377
start: 525 index.html:361
stopp

我已经用铬试过了，你的问题已经解决了吗？

老兄，你的代码工作正常：

- for the yellow: ok
- for the red: click on the warn logo (I can drag your worker where I whant, think to fix it)
- for the blue click on him where you whant

它只会正常工作如果您没有显示控制台或调整页面大小（让它全屏显示），这里是我的测试：在我的本地服务器上下载了整个脚本（和您的 xml），用控制台打开测试它，点击到处然后，找到一个警告被一个工人抓住了（如 x+40 和 y-60）所以我在代码上搜索是否有问题，什么也没找到，在没有控制台的情况下重试相同，只是为了看看它是否相同，然后猜测什么？对我来说一切正常。（您必须使用偏移值而不是绝对的 ;) )

【讨论】：

嗯，这只是您单击状态部分上方时的事件日志。如果单击然后移动鼠标，框将移动。我还有一个用于单击我描述的图像的 console.log 行，但它们从未出现过。
太棒了。是的，现在我看到如果我将浏览器缩放到我用来绘制舞台的值，一切都会按我应该的方式工作。但是如何使用偏移值？我知道在使用绝对值时，左上角等于 (0,0)，然后我只需添加值以将左上角放置在屏幕上。
你可以在这里看到：stackoverflow.com/questions/18131667/…这个问题已经有了答案；）
我看不出这个答案如何适合我的情况，因为它们具有相似的 html ID，但我想我需要循环遍历我的层子层并设置这个偏移量。也许你可以多解释一下这个偏移量是什么，然后给我一些代码？或者也许在代码中看到我的 resizecanvas 函数？
您的问题来自这里：stackoverflow.com/questions/19964591/… 您已经获取了此代码而没有搜索它是否适合您，[链接]stackoverflow.com/questions/17468180/… 更适合您；），别忘了阅读并测试 jsfiddle ;)

【解决方案2】：

@Yechoua Guedj 是对的，因为我调整画布大小的方式。解决我所有事件问题的简单方法是这样的。

window.onresize = function () {
        var width = $("#fullscreenDiv").innerWidth();
        var height = width * 9 / 16;
        xScale = (width/initialWidth)*initialScale.x;
        var newScale = {x: xScale, y: xScale};
        stage.setAttr('width', width);
        stage.setAttr('height', height);
        stage.setAttr('scale', newScale);
        stage.draw();
    }

【讨论】：