HTML5キャンバスのページがあり、その上にいくつかの画像が表示されています.4つの「説明ボックス」画像と他のいくつかの画像があり、それぞれが説明ボックスの1つに属しています。
ユーザーは、各画像を対応する説明ボックスにドラッグする必要があります。
現在、画像をキャンバスの周りにドラッグすることは可能ですが、ボックスに画像をドロップする機能はまだ追加していません。
その前に、ユーザー向けの「ヒントとヒント」をいくつか追加したいと思います。これを行う方法は、ユーザーが「ドラッグ可能な」画像の1つをクリックするか、説明ボックスにカーソルを合わせるたびに、キャンバス領域の外側にテキストプロンプトを表示することです。テキストプロンプトには、ユーザーが選択/ホバーしたアイコンに関する詳細情報が含まれています。
キャンバスの下のページにHTML5テキストエリアを追加しました。ここに、ヒントとヒントを表示します。
いくつかのJS配列があり、1つはキャンバスに表示されるすべての画像を含み、もう1つはすべてのヒントを含みます。明らかに、カーソルは常に1つの場所にしか配置できないため、ヒントはアイテムに1つだけ表示されます。
したがって、私がしたいのは、「if」ステートメントを使用することです。これにより、ユーザーが画像をクリックすると、その画像に対応するテキストのヒントがテキストボックスに表示されます。または、カーソルを説明ボックスが表示されると、その説明ボックスに対応するテキストヒントがテキストボックスに表示されます。
私はkinetic.jsライブラリを使用して、キャンバス上の画像にドラッグアンドドロップ機能を追加しましたが、ローカルに保存したライブラリのコピーを使用しているため、いくつかの変更が必要でした。その機能。（私が変更する必要があったのは、元々、ライブラリは、画像がドロップされるたびにドラッグアンドドロップ機能の外で、それに描画されたものをすべてキャンバスからクリアし、ドラッグアンドドロップ機能が適用された画像を再描画することでしたそれに追加されていたので、キャンバスに描画していた他のいくつかのものを失いました。ドラッグ可能にしたくありませんでした。）
この機能をヒントとともに追加するには、使用しているkinetic.jsライブラリをさらに編集する必要があることはわかっていますが、配列のヒントをテキスト領域に表示する方法を誰かが知っているかどうか疑問に思っていました。私のページに追加しましたか？
w3schoolsの「HTML5textareatag」ページを見ましたが、テキスト領域に表示されるテキストを定義できる属性が見つかりません。また、そのページからリンクされている「イベント属性」ページも確認しましたが、目的の機能を実行するように見える属性は表示されませんでした。
textareaは、ユーザーが画像を選択したり、説明ボックスの1つにカーソルを合わせたりしたときに、表示したいテキストを表示するために使用するのに最適ですか？または、テキストを表示し（できればページのキャンバス領域の外側）、動的に表示されるテキストを変更できるようにするものは他にありますか？
HTMLを表示するように編集31/12/2012@14:40
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas{
border: 1px solid #9C9898;
background:#F5F5F5;
}
</style>
<div id="container"></div>
<script src="kinetic.js"></script>
<script src="drawdescriptionboxes.js"></script>
<script src="drawLevelOneElements.js"></script>
<script src="startgamedrawgameelementsdrawstartbutton.js"></script>
<script>
/*Add the game elements' global variables */
var currentLevel = 1;
var totalLevels = 3;
var currentScore = 0;
var currentScorePositionX = 950;
var currentScorePositionY = 10;
/*Add code to draw images to random locations here */
//var imageX = Math.floor(Math.random()*950);
//var imageY = Math.floor(Math.random()*450);
var stage = new Kinetic.Stage({
container: "container",
width: 1000,
height: 500
});
var imagesLayer = new Kinetic.Layer();
var canvas = imagesLayer.getCanvas();
var context = canvas.getContext("2d");
console.log("Foo ");
/*Load the images from the HTML into the JavaScript */
function loadImages(sources, callback){
var imagesDir = "";
var images = {};
var loadedImages = 0;
var numImages = 0;
//console.log("length " + sources.length);
for (var src in sources){
numImages++;
}
//console.log("Num Images " + numImages);
var index=0;
console.log("length " + sources.length);
for (index=0;index < numImages ;index++){
console.log(index);
images[index] = new Image();
images[index].src = sources[index];
console.log("Adding " + sources[index]);
callback(images[index]);
console.log("images array length = " + images.length);
}
stage.add(imagesLayer); // should only be added once!!
}
/*Function to check whether the item being dragged is near its description box */
function isNearDescriptionBox(itemImage, descriptionBox){
var ii = itemImage;
var db = descriptionBox;
if(ii.attrs.x > db.x - 20 && ii.attrs.x < db.x + 20 && ii.attrs.y > db.y - 20 && ii.attrs.y < db.y +20){
return true;
}else{
return false;
}
}
/* This function draws the game elements */
function drawGameElements(){
/* Draw a line for the 'score bar'. */
context.moveTo(0, 25);
context.lineTo(1000, 25);
context.stroke();
/* Draw current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri"; /* Text font & size */
context.strokeStyle = "black"; /* Font colour */
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 750, 15);
}
function initStage(images){
var stage = new Kinetic.Stage({
container: "container",
width: 1000,
height: 500
});
var descriptionLayer = new Kinetic.Layer();
//var imagesLayer = new Kinetic.Layer();
var allImages = [];
var currentScore = 0;
var descriptionBoxes = {
assetsDescriptionBox: {
x: 70,
y: 400
},
liabilitiesDescriptionBox: {
x: 300,
y: 400
},
incomeDescriptionBox: {
x: 530,
y: 400
},
expenditureDescriptionBox: {
x: 760,
y: 400
},
};
/*Code to detect whether image has been dragged to correct description box */
for (var key in sources){
/*Anonymous function to induce scope */
(function(){
var privateKey = key;
var imageSource = sources[key];
/*Check if image has been dragged to the correct box, and add it to that box's
array and remove from canvas if it has */
canvasImage.on("dragend", function(){
var descriptionBox = descriptionBoxes[privateKey];
if(!canvasImage.inRightPlace && isNearDescriptionBox(itemImage, descriptionBox)){
context.remove(canvasImage);
/*Will need to add a line in here to add the image to the box's array */
}
})
})();
}
}
function drawImage(imageObj) {
//var layer = new Kinetic.Layer();
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
// puts the image in teh middle of the canvas
x: stage.getWidth() / 2 - 50 / 2,
y: stage.getHeight() / 2 - 50 / 2,
draggable: true
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
}
/*This code loads the images to the canvas when the browser window loads */
window.onload = function(){
var sources = {};
/*I've removed the code from here which simply adds the images in the hidden section of the html to the 'sources' JS array */
loadImages(sources, drawImage);
drawGameElements();
drawDescriptionBoxes();
};
/*Try adding an if statement to display the text corresponding to whichever icon is selected */
if(document.body.innerText){
var message = div.innerText;
} else {
var message = div.innerHTML.replace(/\<br\>/gi,"\n").replace(/(<([^>]+)>)/gi, "");
}
/*What I want to do here is, detect where on the canvas the mouse has been clicked, then if the click is
on a part of the canvas that is displaying an image, get the ID belonging to that image, and display
the corresponding tip from the tips array in tips.js on the page below the canvas.*/
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. */
document.getElementById("tipsParagraph").innerHTML = tips[imageCheckIteration];
}
}
}
</script>
</head>
<body>
<p><textarea>This is where the text will be displayed.</textarea></p>
<section hidden>
/*The code in this hidden section simply loads a number of images into the html, giving them an 'id', a 'src' and an 'alt' tag. */
</section>
</body>
</html>
HTMLの非表示セクションに画像を追加し、そこからJS配列に画像を追加するために使用するコードを削除しました。これは、表示されるコードの量を減らすためです。
2013年7月1日15:00に編集
関数「isClickOnImage（event）」を表示するようにコードを編集しました。この関数を書いたとき、私はそれが
「tipsParagraph」というラベルの付いたタグは、クリックされた画像に対応する「tips」配列の要素に対応します。しかし、何らかの理由で、キャンバス上の画像をクリックしても、更新される予定の段落には何も起こりません。なぜですか？