Question

我有一个带有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 = "";
        }
    }
}

画布上显示的图像都存储在名为“sources”的数组中。所以，我的代码的这一部分中的while循环应该检查x＆amp;点击的y坐标位于一个有一个图像绘制的位置，从数组中的第一个图像开始，一直到最后一个。

如果循环确定点击位于已向其绘制图像的位置，则控制台应记录消息“点击检测到的图像”，并且应更新我的tipsParagraph变量的值存储在'tips'数组中的任何值的值，与在images阵列中单击的图像的位置相同（图像数组被称为'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将确保显示的文本是来自数组的文本，无论变量imageCheckIteration的值确定在何处。但是，出于某种原因，我页面上显示的提示始终是提示数组中的第一个元素。这是页面加载后（即在点击图像之前）显示的元素，并且当检测到图像上的点击时它不会改变。所以在我看来我的isClickOnImage函数永远不会被库中的mousedown函数调用，而是在页面加载时直接设置tipsParagraph的值无论用户与页面的交互如何，在此之后都不会被更改...

任何人都能指出我为什么会这样吗？我做错了什么，我需要做些什么来使文本显示为与用户点击的图像对应的文本？

Answer 1

看看

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
}

JavaScript函数显然没有被调用

1 个答案: