0

我想点击一个 DIV 元素并放置圆圈......什么是最好的方法。我想放置数百个小圆圈，直径约 5 像素，有时重叠。然后，当我拥有我想要的所有圆圈时，我需要保存这个模式。

任何人都可以建议一个好的起点吗？

仅供参考...我在 Linux 服务器 LAMP 堆栈上。

------------------ 好的，在最初的建议之后添加了我的代码。

除了隐藏动态创建的圆圈外，代码有效？？？任何想法（固定见下文）

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /*<![CDATA[*/
    div{
      width: 200px;
      height: 200px;
      background-color: #0033FF;
    }

    /*]]>*/
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var X = 0, Y = 0;
    $('.clickInHere').live('mousemove', function(e){
                $('h1').html(e.pageX + ' - ' +e.pageY);
                X = e.pageX;
                Y = e.pageY;
                });
    $('.clickInHere').live('click', function(e){
                $('#circlesHere').append('<circle cx="' + X + '" cy="' + Y + '" r="5" stroke="black" stroke-width="2" fill="none"/>'); // NOTE: THIS DIDN'T WORK PROPERLY... SEE BOTTOM
                });
    // ]]>
    </script>

    </head>

    <body>
    <div class="clickInHere"></div>
    <div class="circleContainer" style="background-color: #eee;">
       <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%; height: 100%;" id="circlesHere"></svg>
    </div>
    <h1></h1>
    </body>
    </html>

- - - 更新 - -

好的，所以动态创建的圆圈没有显示，因为我创建它们不正确......这是修复

            var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
            obj.setAttributeNS(null, "cx", X);
            obj.setAttributeNS(null, "cy", Y);
            obj.setAttributeNS(null, "r",  Radius);
            obj.setAttributeNS(null, "stroke", strokeColor);
            obj.setAttributeNS(null, "stroke-width", 1);
            obj.setAttributeNS(null, "fill", "white");
            $("svg")[0].appendChild(obj);

我把它放到一个函数中，它工作得很好。

4

1 回答 1

1

当然 SVG 或 HTML5 Canvas 是这里的选项。他们两个之间的决定可能来自你需要对圆圈做什么。

虽然在 SVG 中更容易引用您绘制的元素并将它们作为程序中的对象进行操作，但 Canvas 在绘制/重绘整个肖像时非常快。

如果您要保存图案，我想您只需保存圆心的位置及其半径，并在需要时重新绘制它们。对于这样的风景，我会选择画布（它会更快地渲染整个图像），但是如果您希望在圆圈上使用一些“拖放”效果，那么 SVG 可能是一个更好的选择。

如果您向我们提供有关元素使用的更多信息，我们可以更准确地向您建议要走的路。

于 2012-10-01T07:00:12.213 回答