1

我有一个带有 HTML5 画布的网页，其中显示了许多图像。通过使用 kineticJS 库，我可以在画布周围拖放图像。

但是，我使用的是我下载并保存在本地的库的副本，因为我想对其功能进行一两次更改。（例如，在我更改它之前，当在画布上的图像上检测到点击时，以前由 Kinetic 库以外的任何东西绘制到画布上的任何东西都将从画布中清除。我删除了这个调用clear()，因为我在画布上画了一些其他的东西，我想保留在那里。）

现在，我想在我的代码中添加一些功能，以便在检测到已绘制到画布上的图像之一上单击时，已单击图像的文本描述将出现在外部网页上画布。

我有以下功能，我用它来检测是否在其中一个图像上检测到点击：

function isClickOnImage(event){
    var clickX = event.clientX;
    var clickY = event.clientY;

    //var imageCheckIteration = 0;
    while(imageCheckIteration < sources.length){
        if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
        (clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
            /*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
            outside the canvas, in the <p></p> tags below. */
            console.log("Click on image detected");
            document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
        } else {
            document.getElementById("tipsParagraph").innerHTML = "";
        }
    }
}

画布上显示的图像都存储在一个名为“源”的数组中。因此，我的代码的这一部分中的 while 循环应该检查单击的 x 和 y 坐标是否位于已绘制图像的位置，从数组中的第一个图像开始，一直到最后。

如果循环确定单击位于已绘制图像的位置，则控制台应记录消息“检测到单击图像”，并且我的tipsParagraph变量的值应更新为存储在其中的任何值'tips' 数组，与图像数组中被点击的图像位置相同（图像数组被称为 'sources'）。（存储在'tips'数组的每个位置的文本对应于'sources'数组中相同位置的图像）。

正如我之前所说，我使用的是 KineticJS 库的本地副本，并且我已经编辑了它的“mousedown”功能，现在它看起来像这样：

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        isClickOnImage(evt);
    }

    //init stage drag and drop
    if(Kinetic.DD && this.attrs.draggable) {
        this._initDrag();
    }
}

即我添加了对我的isClickOnImage函数的调用。

但是，当我单击画布上的图像时，我页面的“tipsParagraph”部分中的文本不会更新。“tipsParagraph”只是我给<p>显示在画布下方的标签的 ID。

这是我为“tipsParagraph”编写的代码行：

<p id = "tipsParagraph">This is where the text will be displayed. <script>$('#tipsParagraph').text(tips[imageCheckIteration]);</script></p>

我假设我添加到这一行的 JS 将确保显示的文本是来自tips 数组的文本，无论变量值imageCheckIteration确定在什么位置。但是，出于某种原因，在我的页面上显示的提示始终是提示数组中的第一个元素。这是页面加载后立即显示的元素（即在单击图像之前），并且在检测到单击图像时不会更改。所以在我看来，我的isClickOnImage函数永远不会被mousedown库中的函数调用，而是tipsParagraph在页面加载时立即设置的值，并且在此之后不会更改，无论用户与页面的交互如何...

谁能指出我为什么会这样？我做错了什么，我需要做什么才能使显示的文本成为与用户单击的图像相对应的文本？

4

1 回答 1

0

看看

function isClickOnImage(event){
 var clickX = event.clientX;
 var clickY = event.clientY;

 //var imageCheckIteration = 0;  // <-- why is this 0 commented out?
 while(imageCheckIteration < sources.length){ // <-- imageCheckIteration is never incremented, so it never increases, hence the check never occurs
    if((clickX > sources[imageCheckIteration].x && clickX < sources[imageCheckIteration].x + imageWidth) &&
    (clickY > sources[imageCheckIteration].y && clickY < sources[imageCheckIteration].y + imageHeight)){
        /*This is where I need to print the variable that holds the text I want to display, but I need to display its contents
        outside the canvas, in the <p></p> tags below. */
        console.log("Click on image detected");
        document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
    } else {
        document.getElementById("tipsParagraph").innerHTML = "";
    }
 }
}

尝试类似：用于控制递增的 for 循环结构：

for( var i=0; i<sources.length; i++){ // this will go through all items in the sources array
    if((clickX > sources[i].x ... ) //and other checks
}
于 2013-01-24T17:37:15.070 回答