将扇区添加到 HTML5 中的圈子

Question

我的 HTML 中有一个按钮。单击该按钮，我希望添加 sectors/Partitionsto 我的圈子。每次按下按钮时都应添加这些扇区。

我想要这样的东西（假设按钮被按下了 5 次）。

如何在 HTML5 或使用 Raphael JS 库中实现这些扇区？

编辑

alignemnt的问题如图所示。基本上，我希望带有删除按钮的行立即位于添加按钮行的下方。然而新添加的圈子占据了整个space。

我可以覆盖这个 space 吗？如果是，如何？

代码

<br><br>
<div id="createCluster" class="cluster-name" name="createCluster" style="display: none;">Name your cluster: <input type="text" name="clustername" id="clustername">
    <input type="submit" class="create-cluster" id="button1" value="Create Cluster">
</div>

<div id="showclusterdata" class="showclusterdata" style="">
<input type="text" style="text-align: center;" name="clusterdefault" width="100px" value="Cluster Name :" height="100px" readonly="">
&nbsp; <input type="text" name="clusterlabelname" id="clusterlabelname" width="100px" height="100px" value="xxxxxxx" readonly=""> &nbsp;</div>

<br><br><br><br><div id="id1" name="id1" style="">Add a node: <br>
<input type="text" name="ipaddress" id="ipaddress" placeholder="Enter Node IP"> <input type="text" name="port" id="port" placeholder="Enter Node Port">
<input type="button" value="Add" name="addnodebutton" id="addnodebutton">
</div>


<div id="id2" name="id2" style="display: none;"><input type="text" name="ipaddress1" id="ipaddress1"> <input type="text" name="port1" id="port1"></div>

<div id="adddata" name="adddata" style="float: right; position: absolute; top: 30px; right: 100px; left: 446px;">
    <br><br><br><br><br>
Data: <br>
<input type="text" name="key" id="key" placeholder="Enter the key"> <input type="text" name="value" id="value" placeholder="Enter the value">
<input type="button" value="Add" name="adddatabutton" style="position: relative;" id="adddatabutton">
</div>
<div id="datacontainer" style="float: right; position:absolute ; margin: 0px auto 0px auto;padding: 0px 0px 0px 0px; clear:both;right: 566px;"></div>


<div id="container1">
<div id="svgcontainer"><svg height="400" version="1.1" width="1550" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with RaphaÃ«l 2.1.2</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><circle cx="1225" cy="170" r="100" fill="#cccccc" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle><path fill="#ff0000" stroke="none" d="M1225,170L1325,170A100,100,0,0,1,1125,170Z" id="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><path fill="#00ff00" stroke="none" d="M1225,170L1125,170A100,100,0,0,1,1325,170Z" id="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><path fill="#ff0000" stroke="none" d="M1225,170L1325,170A100,100,0,0,1,1175,256.6Z" id="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><path fill="#00ff00" stroke="none" d="M1225,170L1175,256.6A100,100,0,0,1,1175,83.4Z" id="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><path fill="#0000ff" stroke="none" d="M1225,170L1175,83.4A100,100,0,0,1,1325,170Z" id="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg></div>
</div>

<div id="container"><div id="0"> <input type="text" name="ipaddressreadonly0" id="ipaddressreadonly0" value="" readonly="readonly"> <input type="text" name="portaddressreadonly0" id="portaddressreadonly0" value="" readonly="readonly"><input type="button" value="Delete" name="removebuttonreadonly" style="padding-left:10px;" id="removebuttonreadonly" onclick="myFunction(0)"><br></div>   <div id="1"> <input type="text" name="ipaddressreadonly1" id="ipaddressreadonly1" value="" readonly="readonly"> <input type="text" name="portaddressreadonly1" id="portaddressreadonly1" value="" readonly="readonly"><input type="button" value="Delete" name="removebuttonreadonly" style="padding-left:10px;" id="removebuttonreadonly" onclick="myFunction(1)"><br></div>   <div id="2"> <input type="text" name="ipaddressreadonly2" id="ipaddressreadonly2" value="" readonly="readonly"> <input type="text" name="portaddressreadonly2" id="portaddressreadonly2" value="" readonly="readonly"><input type="button" value="Delete" name="removebuttonreadonly" style="padding-left:10px;" id="removebuttonreadonly" onclick="myFunction(2)"><br></div>   </div>

<script>






var i=0;
var ipaddressreadonly ="ipaddressreadonly";
var portaddressreadonly ="portaddressreadonly";
var removebuttonreadonly ="removebuttonreadonly";
var circle = null;
$("#addnodebutton").click(function(){
        $('#container').append("<div id ='"+i+"'> <input type='text' name='"+ipaddressreadonly+i+"' id='"+ipaddressreadonly+i+"' value ='"+$('#ipaddress').val()+"' readonly='readonly'> <input type='text' name='"+portaddressreadonly+i+"' id='"+portaddressreadonly+i+"' value ='"+$('#port').val()+"' readonly='readonly'><input type='button' value='Delete' name='removebuttonreadonly' style= 'padding-left:10px;'id='removebuttonreadonly' style='position: absolute;' onclick='myFunction("+i+")'/><br></div>");
        $("#container").append(" ");
        $("#container").append(" ");
        $("#container").append(" ");
        i++;


        if(circle == null){
            alert("here");
            var paper = Raphael(document.getElementById("svgcontainer"), 1550, 400);
             circle = paper.circle(1225, 170, 100);
             //var paper = Raphael(document.getElementById("svgcontainer"), 150, 150);
             //circle = paper.circle(75, 75, 50);
            circle.attr({"fill": "#CCCCCC", "stroke": null});
            var group = paper.set();

            /**
             * Adding a Sector 
             */


             var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF"];
             var sector = 1;

             //---Elements
             var x = 1225;
             var y = 170;
             var radius = 100;

             //---Crear el paper de Raphael
             /*
             var paper = Raphael(document.getElementById("svgcontainer"), 150, 150);
             var circle = paper.circle(75, 75, 50);
             circle.attr({"fill": "#CCCCCC", "stroke": null});
             var group = paper.set();
             */

             //---On click
             document.getElementById("addnodebutton").addEventListener("click", addSector);

             function addSector() {

               sector++;

               group.clear();

               var start = 0;
               var angle = 360 / sector;
               var col = 0;

               var x1;
               var y1;
               var x2;
               var y2;

               var i;
               var path;
            var j ;
                for (i = 0; i < sector; i++) {

                     x1 = Math.round((x + Math.cos(start * Math.PI / 180) * radius) * 100) / 100;
                     y1 = Math.round((y + Math.sin(start * Math.PI / 180) * radius) * 100) / 100;

                     x2 = Math.round((x + Math.cos((start + angle) * Math.PI / 180) * radius) * 100) / 100;
                     y2 = Math.round((y + Math.sin((start + angle) * Math.PI / 180) * radius) * 100) / 100;

                     path = paper.path("M" + x + "," + y + " L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0 1 " + x2 + "," + y2 + "z");

                     path.attr({"fill": colors[col], "stroke" : null});
                     var j;


                         var e = $(svgcontainer);
                             j=0;
                             e.find("path").attr("id", j);
                             alert("Value of j " +j);
                             j++;




                     group.push(path);

                     col++;

                     if (col == colors.length) col = 0;

                     start += angle;

                   }



             }



        }




    });
var j =100;
var keyreadonly ="ipaddressreadonly";
var valuereadonly ="valuereadonly";
var removebuttonreadonly ="removebuttonreadonly";
$("#adddatabutton").click(function(){
        $('#datacontainer').append("<div id ='"+j+"' style='float: right; position:relative ; margin: 0px auto 0px auto;padding: 0px 0px 0px 0px; clear:both;'> <input type='text' name='"+keyreadonly+j+"' id='"+keyreadonly+j+"' value ='"+$('#key').val()+"' readonly='readonly'> <input type='text' name='"+valuereadonly+j+"' id='"+valuereadonly+j+"' value ='"+$('#value').val()+"' readonly='readonly'><input type='button' value='Delete' name='removedatabuttonreadonly' id='removedatabuttonreadonly' style='position: relative;' onclick='mydataremovefunction("+j+")'/><br></div>");
        $("#datacontainer").append(" ");
        $("#datacontainer").append(" ");
        $("#datacontainer").append(" ");
        j--;


    });

function myFunction(buttonid) {
    document.getElementById(buttonid).style.display = 'none';
}


function mydataremovefunction(buttonid) {
    document.getElementById(buttonid).style.display = 'none';
}

$("#finalContainer").click(function(){
    alert("Here");
$('#container').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});
});



$(button1).click(function(){
    //alert("The button was clicked.");
    //alert($('#clustername').val());
    var a = $('#clustername').val();
    $('#clusterlabelname').val($('#clustername').val());
    $('#clusterlabelname').attr('readonly','readonly');

    $('#createCluster').hide();
    $('#id1').show();
    $('#showclusterdata').show();
    $('#adddata').show();



});


$('#container').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});
</body>

Answer 1

基本上，您需要使用 Raphael 路径创建圆形扇区：

HTML代码：

<button id="button">Add sector</button>
<div id="container">
  <div id="svgcontainer"></div>
</div>

JavaScript代码：

var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF"];
var sector = 1;

//---Elements
var x = 75;
var y = 75;
var radius = 50;

//---Crear el paper de Raphael
var paper = Raphael(document.getElementById("svgcontainer"), 150, 150);
var circle = paper.circle(75, 75, 50);
circle.attr({"fill": "#CCCCCC", "stroke": null});
var group = paper.set();

//---On click
document.getElementById("button").addEventListener("click", addSector);

function addSector() {

  sector++;

  group.clear();

  var start = 0;
  var angle = 360 / sector;
  var col = 0;

  var x1;
  var y1;
  var x2;
  var y2;

  var i;
  var path;

  for (i = 0; i < sector; i++) {

    x1 = Math.round((x + Math.cos(start * Math.PI / 180) * radius) * 100) / 100;
    y1 = Math.round((y + Math.sin(start * Math.PI / 180) * radius) * 100) / 100;

    x2 = Math.round((x + Math.cos((start + angle) * Math.PI / 180) * radius) * 100) / 100;
    y2 = Math.round((y + Math.sin((start + angle) * Math.PI / 180) * radius) * 100) / 100;

    path = paper.path("M" + x + "," + y + " L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0 1 " + x2 + "," + y2 + "z");

    path.attr({"fill": colors[col], "stroke" : null});

    group.push(path);

    col++;

    if (col == colors.length) col = 0;

    start += angle;

  }

}

jsfiddle

将扇区添加到 HTML5 中的圈子

Add sectors to circles in HTML5

html

canvas

svg

raphael

geometry