6

我有一个 HTML5 画布，它在画布下方的页面上显示了许多图像和一段文本。我希望根据用户单击的图像来更新段落中的文本以显示来自 JS 数组的不同元素。

目前，我有一个看起来像这样的“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);
        isClickOnImage(evt);
        var id = shape.id;
        selectTip(id);
    }

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

我尝试使用该行var id = shape.id更新传递给函数的 ID，以便它从我的“提示”数组中获取正确的元素，但由于某种原因，当我在浏览器中查看页面并单击图像时，画布下方的文本不会更新。似乎此函数没有将“id”变量更新为已单击的任何图像的 ID。

在研究了这个之后，在我看来，我想在“mousedown”函数中使用一个循环，它将获取检测到点击的图像的“id”，并循环遍历我的“sources”数组（这是所有图像都从 HTML 加载到 JS 的位置），在每个位置检查存储在该位置的图像是否具有与已单击图像的 ID 相同的 ID。如果是，则循环应将文本设置为存储在数组该位置的文本，如果不是，则应继续查看数组直到找到它。这有意义吗？我尝试将以下代码添加到“mousedown”函数中，但它并没有像我预期的那样改变文本：

var imageCheckArray = 0;
        while(imageCheckArray < sources.length){
            if(shape.id == sources[imageCheckArray]){
                selectTip(imageCheckArray);
            } else {
                imageCheckArray++;
            }
        }

我在循环中缺少什么吗？

整个函数的代码目前如下所示：

_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);
        isClickOnImage(evt);
        /*This line needs to get the element of the sources array that has been selected, 
            and then select the element at the same position from the tips array.*/
        //var id = null;
        var imageCheckArray = 0;
        while(imageCheckArray < sources.length){
            if(shape.id == sources[imageCheckArray]){
                selectTip(imageCheckArray);
            } else {
                imageCheckArray++;
            }
        }

        //var id = 
        //selectTip(id);
    }

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

编辑 11/01/2013 @ 16:10

的代码selectTip是：

function selectTip(id){
    $("#tipsParagraph").text(tips[id]);
}

我在这里放了一个 jsFiddle：http: //jsfiddle.net/cd8G7/虽然“结果”面板没有显示我在浏览器中查看页面时实际看到的内容 - 我得到了所有的画布显示图像，画布下方的段落显示我的“提示”数组的第一个元素中的文本。

编辑 23/01/2013 @ 13:50

这是我的isClickOnImage功能：

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. */
            console.log("Click on image detected");
            document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip /*tips[imageCheckIteration]*/;
        } else {
            document.getElementById("tipsParagraph").innerHTML = "";
        }
    }
}

我打算让这个函数做的是，捕获画布上任何点击的 X 和 Y 坐标，并将它们存储在变量“clickX”和“clickY”中。然后，我有一个名为“imageCheckIteration”的变量已初始化为 0，虽然这个变量小于我的“源”数组（这是存储所有图像的数组）的长度，但该函数应该检查单击是否在由数组中的一个图像覆盖的画布区域上。

如果是，则控制台日志应显示消息“单击检测到的图像”，并且该行

document.getElementById("tipsParagraph").innerHTML = sources[imageCheckIteration].data-tip;

应将“tipsParagraph”的值设置为位于“sources”数组的“imageCheckIteration”位置的任何图像的“data-tip”属性的值。如果在未显示图像的画布区域上检测到单击，则应将“tipsParagraph”的值设置为不保留任何内容。

但是，由于某种原因，当我在浏览器中查看页面时，'tipsParagraph' 显示文本“这是显示文本的位置”，这是它的默认值，所以没关系。但是，当我单击图像或单击画布上的任何其他位置时，“tipsParagraph”中显示的文本不会更新。

我不知道为什么会这样-有人可以指出我正确的方向吗？这是否意味着我的isClickOnImage(event)函数永远不会被调用？

4

1 回答 1

0

我简化了您通过画布获取图像引用的方式。这里的技巧是交换画布和图像容器的 z-index 并在鼠标向上事件中获取对图像的引用。我不知道在画布后面获取元素的干净方法，因此是解决方法。

$('canvas').bind('mousedown', function(e) {
  $('section').css('z-index', 4);
});

$('img').bind('mouseup', function(e) {
  $('#tipsParagraph').text($(this).attr('id') + ":" + $(this).attr('alt'));
  $('section').css('z-index', 2);
});

这里的第二部分是从图像本身中获取一些属性并更新 div 中的文本。

您可以在此处查看更多解决方案。

于 2013-01-21T20:37:47.037 回答