Question

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

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

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

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

我在这里就简单的方法提出建议。

由于

Answer 1

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

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

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

Answer 2

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

我会创建一个数组，并将事件侦听器绑定到您希望用户单击的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'
}

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

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中。您也可以使用除克隆之外的其他方法，它只是一个选项。

用于跟踪图像并在图像上放置多个图像的JavaScript

2 个答案: