Question

我有一个旋钮控件。围绕这一点，我想放置代表LED灯的div。我不希望它们围绕旋钮以360°定位-而是从135°（左下）开始，然后沿顺时针方向旋转至约45°-右下-均匀分布（例如，目前10x10像素正方形的div）。我的旋钮是13 divs，旋钮是15 divs，请问我正在寻找JavaScript实现。

这是我到目前为止所拥有的代码，我知道它是简单的几何图形，目前我无法理解。这是第39行。

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
        circle {
        fill: steelblue;
        fill-opacity: .8;
      }
        #canvas {
            height: 250px;
            width: 250px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 10;
        }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="250" height="250"></canvas>  
    <div id="canvas"></div>
      
    <script>
        var createNodes = function (numNodes, radius) {
         var nodes = [], 
             width = (radius * 2) + 50,
             height = (radius * 2) + 50,
             angle,
             x,
             y,
             i;
            for (i=0; i<numNodes; i++) {
                 angle = (i / numNodes) * (Math.PI * 1.49) + (145 * (Math.PI / 180))//MAGIC NUMBERS, BAD
                //angle = (i / (numNodes/2)) * Math.PI; // Calculate the angle at which the element will be placed.
                                                // For a semicircle, we would use (i / numNodes) * Math.PI.
                x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element.
                y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element.
                nodes.push({'id': i, 'x': x, 'y': y});
         }
         return nodes;
       }

       var createSvg = function (radius, callback) {
         d3.selectAll('svg').remove();
         var svg = d3.select('#canvas').append('svg:svg')
                    .attr('width', (radius * 2) + 50)
                    .attr('height', (radius * 2) + 50);
         callback(svg);
       }

       var createElements = function (svg, nodes, elementRadius) {
         element = svg.selectAll('circle')
                        .data(nodes)
                      .enter().append('svg:circle')
                        .attr('r', elementRadius)
                        .attr('cx', function (d, i) {
                          return d.x;
                        })
                        .attr('cy', function (d, i) {
                          return d.y;
                        });
       }

       var draw = function () {
         var numNodes = 15;
         var radius = 100;
         var nodes = createNodes(numNodes, radius);
         createSvg(radius, function (svg) {
           createElements(svg, nodes, 5);
         });
       }

    // Draw the SVG arc I want to place itens around.
       
      var canvas = document.getElementById('myCanvas');
      canvas.style.backgroundColor = '#dddddd';

      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 0.8 * Math.PI;
      var endAngle = 0.2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
        
      $(document).ready(function() {
          draw();
      });
    </script>
  </body>
</html>

Answer 1

更改了createNodes函数

var createNodes = function (numNodes, radius,start,end) {
     var nodes = [], 
         width = (radius * 2) + 50,
         height = (radius * 2) + 50,
         inc=(end-start)/(numNodes - 1),
         angle,
         x,
         y,
         i;

        for (i=0; i<numNodes; i++) { 
            angle = start + i*inc;
            x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element.
            y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element.
            nodes.push({'id': i, 'x': x, 'y': y});
     }
     return nodes;
   }

在函数参数中添加了起始角度和终止角度。

使起点和终点角度更加明确

  var startAngle = -1.25 * Math.PI; // same as 0.75 * Math.PI i.e adding 2*PI (360 deg)
  var endAngle =  0.25 * Math.PI;  // same as 2.25 * Math.PI 
  // or if you would like it in degrees
  var startAngle=135/180  * Math.PI; // same as -225/180 i.e subtracting 360
  var endAngle=405/180 * Math.PI;  // same as 45/180

希望这能回答您的问题

将div放置在具有起始和终止角度的圆周围

1 个答案: