我有一个HTML5画布，显示了许多图像。我已经使用KineticJS库来绘制图像并使它们可拖动，但是，我正在使用该库的本地副本，因为我想对其功能进行一两次更改。
我现在想为库中的mousedown函数添加更多功能，但我不确定如何做我想做的事情，我只是想知道是否有人能指出我在正确的方向？
我目前在画布上显示大约30张图像 - 图像全部存储在HTML的隐藏部分中，并从那里添加到JS数组中。我还有另一个JS数组，在一个单独的JS文件中，其中包含有关图像数组中每个图像的文本描述数组。
文本数组中位置0处的文本是图像数组中位置0处图像的描述，位置1处图像位置1处的文本等等...
我在画布下方的页面上有HTML <p></p>标记。
我现在要做的是添加一个函数，该函数将根据画布上单击的图像更改<p></p>标记中显示的文本...即向{{添加一些代码1}}函数，即
“当在图像上检测到mousedown时，找出图像阵列中存储图像的位置，并更新mousedown标记中的文本以显示存储在图像中的文本。文本数组中的相应位置。
理论上，我会认为这应该是相当简单的，但我只是不知道该怎么做...据推测我需要编写一个新的JS函数，即
<p></p>然后从库中的function displayTip(){
document.getElementById('tipsParagraph').innerHTML= tips[0];
}
函数中调用该函数。
我不确定的是如何找出被点击的图像位于图像数组中的位置，以便我可以将其存储在变量中，然后将mousedown值设置为该变量的值，在tip数组中给我相同的位置。
我假设我需要稍微编辑库中的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函数的调用？
答案 0 :(得分：0)
我设法通过添加以下功能来解决这个问题：
function displayTip(index){
document.getElementById('tipsParagraph').innerHTML = tips[index];
console.log("displayTip being called");
}
到我的JavaScript，并使用以下行在mousedown函数中调用它：
displayTip(obj.shape.index);