2

我有一个带有 HTML5 画布的页面，上面显示了几个图像。有四个“描述框”图像和一些其他图像，每个图像都属于一个描述框。

用户需要将每个图像拖到其对应的描述框中。

目前可以在画布周围拖动图像，尽管我还没有添加将它们拖放到框中的功能。

在此之前，我想为用户添加一些“提示和提示”。我想要执行此操作的方式是，每次用户单击“可拖动”图像之一或将光标悬停在描述框上时，都会在画布区域外向用户显示文本提示。文本提示将仅包含有关用户选择/悬停在哪个图标上的更多信息。

我在画布下方的页面上添加了一个 HTML5 文本区域，这是我想要显示提示和提示的地方。

我有几个 JS 数组，一个包含画布上显示的所有图像，另一个包含所有提示。提示只会在一个项目上显示一个，因为显然，光标在任何给定时间只能在一个位置。

所以，我想要发生的是使用'if'语句，这样如果用户单击图像，则与该图像对应的文本提示将显示在文本框中，或者如果光标悬停在一个描述框，则该描述框对应的文本提示将显示在文本框中。

我使用了 kinetic.js 库将拖放功能添加到画布上的图像中，尽管我使用的是我在本地保存的库的副本，因为我需要更改一些关于它的功能。（我需要改变的事情是，最初，库在拖放功能之外清除画布上已绘制的任何内容，只要拖放图像，只需重新绘制拖放功能的图像正在被添加回它，所以我丢失了一些我在画布上绘制的其他东西，我不想被拖动。）

我知道我需要编辑我正在使用的 kinetic.js 库，以便通过提示添加此功能，但我只是想知道是否有人知道如何在文本区域中显示我的数组中的提示'已添加到我的页面？

我查看了 w3schools 上的“HTML5 textarea tag”页面，但看不到任何允许您定义文本区域中显示的文本的属性。我还查看了从该页面链接的“事件属性”页面，但在那里看不到任何看起来可以执行我想要的功能的属性。

当用户选择图像或将鼠标悬停在我的一个描述框上时，文本区域是用来显示我想要显示的文本的最佳选择吗？还是有其他东西可以显示文本（最好在页面的画布区域之外），并允许我更改动态显示的文本？

编辑以显示 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(/\&lt;br\&gt;/gi,"\n").replace(/(&lt;([^&gt;]+)&gt;)/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 数组中的代码，只是为了减少显示的代码量。

编辑 07/01/2013 @ 15:00

我编辑了代码以显示函数“isClickOnImage(event)”。当我写这个函数时，我希望它会改变

标记为“tipsParagraph”的标签对应于“tips”数组的任何元素，对应于被点击的图像。但是由于某种原因，当我单击画布上的图像时，我希望更新的段落没有任何反应。知道为什么吗？

4

1 回答 1

0

你不需要使用 KineticJS 的一些原生实现，在这种情况下你只需要它来处理事件，只需将 JQuery 添加到你的项目中，并使用选择器来更改文本区域的文本。

  //this can easily be used in your KineticJS event function.
  $("textarea").val(message);

我建议你给你的文本区域一个 id 并使用 $('#textAreaId').val('hello world'); 设置您的信息

于 2013-01-02T19:36:17.220 回答