0

div内に円が必要です。私は RaphaelJs を使用しています。UI にベクター画像 (円) を表示するために RaphaelJS を使用しています。同時に、自分のページでもjQueryUIをソート可能にしています。

したがって、 var paper = new Raphael(x, y, width, height); を指定すると、キャンバスを作成するために、x 座標と y 座標の下にあるポートレットのセクションが機能していないようです。ポートレットを移動/ドラッグできません。例: - x と y を 300 と 300 に設定すると、1 列目のポートレットがドラッグされ、2 列目と 3 列目が適切に機能します。x と y の値 (たとえば 800,800) を増やすと、すべてのポートレットがまったくドラッグしなくなります。

RaphaelJS でキャンバスを作成すると、キャンバスの下にある部分が正常に機能しないと思います。どうすれば修正できますか？または、それに代わる他の方法はありますか？

これが私のコードです

<!DOCTYPE html>
<html>
    <head>
        <title>Shap Design with Raphael</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script>
            window.onload = function() {  
                var paper = new Raphael(20,20, 300, 300);  
                var p = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");  

                p.attr(  
                    {  
                        gradient: '90-#526c7a-#64a0c1',  
                        stroke: '#3b4449',  
                        'stroke-width': 10,  
                        'stroke-linejoin': 'round',  
                        rotation: -90  
                    }
                );
            }
        </script>
        <style>
            #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
            #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
            #sortable li span { position: absolute; margin-left: -1.3em; }
        </style>
        <script>
            $(function() {
              $( "#sortable" ).sortable();
              $( "#sortable" ).disableSelection();
            });
        </script>
    </head>
    <body>
        <div id="box"></div>
        <ul id="sortable">
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
    </body>
</html>

このリンクでこのコードを実行してみてください。コードをコピーして貼り付けます。

4

1 に答える 1

0

div の位置を取得し、それらを調整が必要な Raphael 関数のパラメーターとして使用できます。たとえば、div 内に円を描画するには:

<div style="background-color:yellow" id='div1'>
here is the div
<script>
var p = $('#div1');
var position = p.position();

var paper = Raphael(10, position.left, position.left + 320, position.top + 200);
var circle = paper.circle(position.left, position.top, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
</script>
</div>
于 2013-11-10T14:03:14.387 に答える