0

我在这里进行了搜索，找不到任何适合此问题的答案。

我正在写一个曲棍球得分机会跟踪器，基本上我想显示曲棍球冰的图像，每次单击图像时，它都会记住您单击的位置，并在您单击的位置放置一个红色小圆圈，并在顶部显示一个数字。该数字将是一个自动递增的数字。最终，我想跟踪所有鼠标点击在哪里存储到数据库中。

图像的一侧将是一个表格，每次单击鼠标都会在表格中添加一个新行。这部分不太难，我可以用 jquery 轻松完成。

我遇到的问题是试图找到一种快速简便的方法来多次将相同的图像放置在用户单击的另一个图像之上。我一直在研究 HTML5/Canvas，以及简单的 javascript/jquery 来做到这一点。

我在这里寻求有关简单方法的建议。

谢谢

4

2 回答 2

1

这是我的做法 - 简单，简短的方式，我不知道你想如何扩展它：

我会创建一个数组，并将事件侦听器绑定到您希望用户单击的 div。

每次用户点击此图片时，都会传递一个事件对象，您可以根据您的布局读出鼠标的 X 和 Y 坐标 - .position() 或 .offset()。创建一个 JSON 对象，该对象存储这些值：

var hit = {
    id: 1,
    x: 250,
    y: 365,
    //add more attributes if you like/need
    //for this particular 'hit'
}

您可以将此对象（-notation）存储在数组中：

hitz.push(hit);

现在你应该基于这个数组“更新”你的 UI。只需使用 for...in 循环循环并创建图像：

var hockeyIceClone= $("div.hockey-ice").clone(true);

for (var i in hitz) {
    var hit = hitz[i];
    hockeyIceClone.append(
        //assuming that your .hockey-ice div has position:relative at least
        var image = $(new Image('image/path.png'));
        //add more stuff for image if you like
        $(image).css({
            position: absolute,
            left: hit.x,
            top: hit.y
        })
    );
}

$("div.hockey-ice").replaceWith(hockeyIceClone);

克隆的原因是，当您遍历数组并将元素附加到放置在 UI 上且可见的“容器”时，它可能会在呈现时闪烁。所以你最好先“收集”它，然后把它们放在 UI 上。您也可以使用除克隆以外的其他方法，这只是一种选择。

于 2012-05-11T23:23:25.680 回答
1

这是一个超级简单的 jsfiddle，其中包含了我可能会如何着手做的开始 - 如果您有任何问题/疑虑/需要帮助进行进一步改进，请告诉我，我会很高兴更新！

http://jsfiddle.net/jking/4dMJG/

（只是防止我的 div 是图像，而侧边栏是真实的形式......）

于 2012-05-11T22:57:16.200 回答