次の JS 関数があります。これを使用して、カーソルが HTML5 キャンバス上の特定の画像の上に置かれていることを検出します。
function cursorOverAssetsBox(mouseX, mouseY){
if((mouseX >= assetsDescriptionBox.img_x && mouseX <= assetsDescriptionBox.img_x + assetsDescriptionBox.img_width) &&
(mouseY <= assetsDescriptionBox.img_y && mouseY >= assetsDescriptionBox.img_y - assetsDescriptionBox.img_height))
document.getElementById('tipsParagraph').innerHTML = tips[34];
console.log(tips[34]);
}
関数は正しく動作しますが、何らかの理由で、行
document.getElementById('tipsParagraph').innerHTML = tips[34];
発砲していないようです...
「tipsParagraph」は、HTML の HTML<p></p>タグに付けた ID<body></body>です。「ヒント」は配列で、その各要素にはテキストが含まれています。
カーソルが if ステートメントで指定された場所にあるときはいつでも、その配列の 34 番目の位置に格納されているテキストを表示したいと考えています。console.log(tips[34]);カーソルがその場所にあるときはいつでも行がコンソールに配列のその要素の内容を表示しているので、関数が機能することはわかっています。しかし、何らかの理由で、段落内のテキストが更新されず、その配列要素の内容が表示されません。
これがなぜなのか誰にもわかりますか？
mousemoveKineticJS ライブラリのローカル コピーの関数内から関数を呼び出しています。ライブラリのローカル コピーを使用しています。これは、このような機能に若干の調整を加えたかったためです。「mousemove」関数は現在、次のようになっています。
_mousemove: function(evt) {
this._setUserPosition(evt);
var dd = Kinetic.DD;
var obj = this.getIntersection(this.getUserPosition());
getMousePosition(evt);
document.getElementById('mouseLocation').innerHTML = "mouseX = " + evt.clientX + ". mouseY = " + evt.clientY;
/*Add an if statement, so that cursorOverAssetsBox function is only called when the cursor's y value is greater than
400. This will improve performance, as the code will only check if it needs to call the function when the cursor is
below that line. */
if(mouseY >= 400){
cursorOverAssetsBox(mouseX, mouseY);
}
/*Write an if statement that says, "if 'draggingImage' variable is set to true, check the x & y of that image to see if
it's over its description box- if it is, do something, if not, don't", if 'draggingImage' variable is not set
to true, don't check.*/
//cursorOverAssetsBox(mouseX, mouseY);
if(obj) {
var shape = obj.shape;
if(shape) {
if((!dd || !dd.moving) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape._handleEvent('mouseout', evt, shape);
this.targetShape._handleEvent('mouseleave', evt, shape);
}
shape._handleEvent('mouseover', evt, this.targetShape);
shape._handleEvent('mouseenter', evt, this.targetShape);
this.targetShape = shape;
}
else {
shape._handleEvent('mousemove', evt);
}
}
}
/*
* if no shape was detected, clear target shape and try
* to run mouseout from previous target shape
*/
else if(this.targetShape && (!dd || !dd.moving)) {
this.targetShape._handleEvent('mouseout', evt);
this.targetShape._handleEvent('mouseleave', evt);
this.targetShape = null;
}
// start drag and drop
if(dd) {
dd._startDrag(evt);
}
}