0

我有一个 HTML5 画布，它显示了许多图像。我使用 KineticJS 库来绘制图像并使它们可拖动，但是，我使用的是该库的本地副本，因为我想对其功能进行一两个更改。

我现在想为库中的函数添加更多功能mousedown，但我不确定如何做我想做的事，我只是想知道是否有人能指出我正确的方向？

我目前在画布上显示了大约 30 张图像 - 这些图像都存储在 HTML 的隐藏部分中，并已从那里添加到 JS 数组中。我还有另一个 JS 数组，在一个单独的 JS 文件中，其中包含有关图像数组中每个图像的文本描述数组。

文本数组中位置 0 的文本是对图像数组中位置 0 的图像的描述，位置 1 的文本是对位置 1 的图像的描述，等等...

我在画布下方的页面上有 HTML<p></p>标签。

我现在要做的是添加一个函数，该函数将<p></p>根据在画布上单击的图像更改该标记中显示的文本......即向mousedown函数添加一些代码，即

“当mousedown在图像上检测到a时，找出该图像存储在图像数组中的哪个位置，并更新<p></p>标签中的文本以显示存储在文本数组中相应位置的文本。

从理论上讲，我会认为这应该是相当简单的，但我只是不知道该怎么做......大概我需要写一个新的JS函数，即

function displayTip(){
    document.getElementById('tipsParagraph').innerHTML= tips[0];
}

然后从mousedown库中的函数中调用该函数。

我不确定的是如何找出被点击的图像在图像数组中的位置，以便我可以将它存储在一个变量中，然后将tips[]值设置为该变量的值，给出我在tips数组中的位置相同。

我假设我需要mousedown稍微编辑库中的函数，告诉它找出被点击的图像所在的数组位置，但我不知道该怎么做......有任何想法吗？

该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);

    }

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

另外，我假设一旦我找到了图像在数组中的存储位置，然后我会想要在函数中添加对我displayTip的函数的mousedown调用？

4

1 回答 1

0

我设法通过添加以下函数来解决这个问题：

function displayTip(index){

    document.getElementById('tipsParagraph').innerHTML = tips[index];
    console.log("displayTip being called");
}

到我的 JavaScript，并使用以下行从mousedown函数中调用它：

displayTip(obj.shape.index);
于 2013-02-20T15:06:42.933 回答