Question

我想点击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);

我把它放到一个函数中，它运行得很好。

Answer 1

当然可以选择SVG或HTML5 Canvas。两者之间的分歧可能来自你需要做的圈子。

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

如果您要保存模式，我会说您只需保存圆的中心位置及其半径，然后在需要时重新绘制它们。对于这样的风景我会选择画布（它会使整个图像更快），但是如果你期望在圆圈上使用一些“拖放”效果，SVG将是更好的选择。

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

jQuery，Canvas，SVG或HTML5动态点击圆圈进入DIV - 入门的最佳方法

1 个答案: