代码之家 › 专栏 › 技术社区 › Radagast the Brown

在具有起始和结束角度的圆周围放置分隔符

geometry javascript

Radagast the Brown · 技术社区 · 6 年前

我有一个旋钮控制。围绕着这一点,我想放置代表LED灯的沙发。我不希望它们以360度的角度放置在旋钮周围,而是从135度开始(左下角),然后顺时针继续到45度左右(右下角),均匀分布(现在称为10x10像素的正方形)。我要一个有13个台阶的台阶,另一个有15个台阶的台阶。我正在为这个寻找一个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>

1 回复 | 直到 6 年前

sferret 6 年前

已更改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

希望这能回答你的问题