2

我想要一张汽车的图像，当用户点击汽车上的某个位置时，我会在该位置放置一个 x 图像或圆形图像。我需要保存他们点击的位置，这样当他们回来时，我会在同一个位置显示它。

在 html 中执行此操作的最佳方法是什么？

我应该使用叠加在其上的其他图像的图像吗？

我应该使用html5吗？

有人知道任何类似性质的工作示例吗？

想要使用 js、html5 等在 iphone safari（不是本机应用程序）上进行这项工作。应用程序是 ruby​​ on rails，所以我可以利用一些服务器端功能，但如果可能的话，我更愿意在 html/css 中利用尽可能多的功能。

4

3 回答 3

3

您可以使用一个canvas元素来执行此操作。该canvas元素允许您为其绘制图像和形状。

要存储和检索点击，您可以使用Web Storage ( localStorage)。

例如 - 加载图像并将其绘制到画布上：

在线演示在这里

HTML：

<canvas id="demo" width="500" height="400"></canvas>

JavaScript：

/// get context for canvas, cache dimension
var ctx = demo.getContext('2d'),
    w = demo.width,
    h = demo.height,

    img = new Image(); /// the image we want to load

/// when done go draw existing marks and start listening for clicks
img.onload = function() {

    renderMarks();

    demo.onclick = function(e) {

        /// convert mouse coord relative to canvas
        var rect = demo.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;

        /// store mark
        addMark(x, y);

        /// redraw everything
        renderMarks();
    }
}

这些是主要功能，这首先将现有标记呈现到图像顶部的画布上：

function renderMarks() {

    /// re-draw image which also serves to clear canvas    
    ctx.drawImage(img, 0, 0, w, h);

    /// get existing marks from localStorage
    var marks = localStorage.getItem('marks'),
        i = 0;

    /// if any, render them all
    if (marks !== null) {

        /// localStorage can only store strings 
        marks = JSON.parse(marks);

        /// set color and line width of circle
        ctx.strokeStyle = '#f00';
        ctx.lineWidth = 3;

        /// iterate marks and draw each one
        for(;i < marks.length; i++) {
            ctx.beginPath();
            ctx.arc(marks[i][0], marks[i][1], 30, 0, 2 * Math.PI);
            ctx.stroke();
        }
    }
}

这为集合添加了一个标记：

function addMark(x, y) {

    /// get existing marks or initialize
    var marks = JSON.parse(localStorage.getItem('marks') || '[]');

    /// add mark
    marks.push([x, y]);

    /// update storage
    localStorage.setItem('marks', JSON.stringify(marks));
}

（代码可以通过各种方式进行优化，但我做了它来展示基本原理）。

如果您现在离开页面并返回，您将看到标记再次呈现（免责声明：jsfiddle 可能会或可能不会给出相同的页面，因此请在本地/“真实”页面中进行测试以确保）。

这里的圆圈可以是任何东西，一个图像，一个不同的形状等等。

要清除标记，只需调用：

localStorage.clear();

或者如果您还存储其他数据：

localStorage.removeItem('marks');
于 2013-09-11T00:10:54.677 回答
0

好吧，您可以为每个位置创建新图像，当用户单击时，您可以用新图像替换原始图像。您可以使用 CSS 或 jQuery 做到这一点）

于 2013-09-11T00:03:11.323 回答
0

如果您对显示区域或确切的 x/y 坐标感兴趣，则可能会使用图像<map> 。

另请查看此stackoverflow 问题。

我没有可以展示的工作示例，但我认为这在本质上是相似的。我不确定您将如何保存用于调用状态的信息（在同一会话或数天/数月后返回？）。

我希望这有一些用处。

于 2013-09-11T00:09:09.930 回答