Как получить круг внутри div?

Мне нужно иметь круг внутри div. Я использую RaphaelJs. Я использую RaphaelJS для создания векторных изображений (cirlce) в моем пользовательском интерфейсе. Одновременно у меня есть jQueryUI sortable на моей странице.Как получить круг внутри div?

Итак, при указании 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>

Попробуйте запустить этот код на this link. Скопируйте и вставьте код.

источник

2013-11-10 python-coder

Любая другая альтернатива, отличная от RaphaelJS, очень ценится. благодаря –

Вы можете получить позицию своего div, а затем использовать их в качестве параметров функций Рафаэля, которые нуждаются в координации. Например, чтобы нарисовать круг внутри 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-10 14:03:14 Saber

Как получить круг внутри div?

ответ

Смежные вопросы