Размещение div вокруг круга с начальным и конечным углами - PullRequest
Новая
       4

Размещение div вокруг круга с начальным и конечным углами

0 голосов
/ 02 января 2019

У меня есть ручка управления. Вокруг этого я хотел бы разместить div, которые будут представлять светодиодные фонари. Я не хочу, чтобы они располагались вокруг ручки на 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 Ответ

0 голосов
/ 02 января 2019

изменил вашу функцию 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

Надеюсь, что это отвечает на ваш вопрос

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...