我需要在 div 内有一个圆圈。我正在使用 RaphaelJs。 我正在使用 RaphaelJS 在我的 UI 上显示矢量图像（cirlce）。同时，我的页面上也有 jQueryUI sortable。
因此，当指定 var paper = new Raphael(x, y, width, height); 时为了制作画布，x 和 y 坐标下的 portlet 部分似乎不起作用，因为我无法移动/拖动 portlet。例如：- 如果 x 和 y 设置为 300 和 300，则第一列中的 portlet 会进行拖动，而第二列和第三列中的 portlet 将正常工作。增加 x 和 y 值（例如 800,800）后，所有 portlet 根本不会拖动。
我猜想在 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>
尝试在此链接上运行此代码。复制并粘贴代码。
你可以获取你的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>
const container = document.createElement('DIV');
function drawCircle(){
for(o=0;o<59;o++){
container.innerHTML+='<span id="o'+o+'" style="position:absolute;">•</span>';
}
document.body.appendChild(container);
for(o=0;o<59;o++){
eval('o'+o).style.left=Math.sin(o/9.2)*120+120+"px";
eval('o'+o).style.top=Math.cos(o/9.2)*120+120+"px";
}
}drawCircle();