Question

我想点击图片上标有pencircle的一些KineticJS图像：

picture of webpage

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

带黄色圆圈的图片每50次点击一次。

带红圈的图片永远不会有效。

这是我添加eventlisteners的方式：

蓝：

    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

Answer 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），用控制台oppenend测试它，点击任何地方，然后，发现工人正在发出警告（比如x + 40和y-60）所以我搜索了代码，如果出现了错误，没有找到任何内容，在没有控制台的情况下重试相同的内容只是为了看看它是否相同，然后猜测什么？对我来说一切正常。（你必须使用偏移值而不是绝对的;））

Answer 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();
    }

KineticJS，Veeery在图像上慢点击事件

2 个答案: