0

DIV要素をクリックして円を配置したい...これに最適なアプローチは何ですか。直径約5ピクセルの、場合によっては重なる数百の小さな円を配置したいと思います。次に、必要なすべての円ができたら、このパターンを保存する必要があります。

誰かがこれを始めるのに良い場所を提案できますか？

参考までに...私はLinuxサーバーのLAMPスタックを使用しています。

------------------ OK、最初の提案の後に私のコードを追加しました。

動的に作成された円が非表示になることを除いて、コードは機能しますか？任意のアイデア（修正済みは以下を参照）

    <!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またはHTML5Canvasがここでのオプションです。それらの両方の間の決定は、あなたがサークルで何をする必要があるかから来るかもしれません。

SVGでは、描画した要素を参照してプログラム内のオブジェクトとして操作する方が簡単ですが、Canvasはポートレート全体の描画/再描画が非常に高速です。

パターンを保存する場合は、円の中心の位置と半径を保存し、必要に応じて再描画するだけだと思います。このような風景の場合、私はキャンバスを選択します（画像全体をより速くレンダリングします）が、円に「ドラッグアンドドロップ」効果を使用することを期待している場合は、SVGの方が適している可能性があります。

要素の使用に関する詳細情報を提供していただければ、より正確な方法を提案できる可能性があります。

于 2012-10-01T07:00:12.213 に答える