1

Подскажите как лучше(профессиональней) сделать подобное?

https://jsfiddle.net/77LmLmwt/

Чтобы ячейки "не заползали" друг на друга, равномерно заполняли пространство и между ними был отступ хотя бы 1-2рх.

Код

2 ответа 2

1

Вариант с использованием SVG и JS (JSFiddle):

var width = window.innerWidth
  , height = window.innerHeight
  , cx = width / 2
  , cy = height / 2
  , radius = Math.min(cx, cy) - 1
  , segmentsPerRow = 48
  , angle = 360 / segmentsPerRow
  , rows = 13
  , rowHeight = radius / 23
  , borderWidth = 1
  , borderColor = '#000'
  , segmentColor = '#fff'
  , segments = [];
  
function polarToCartesian(cx, cy, radius, deg) {
  var rad = (deg - 90) * Math.PI / 180;
  return {
    x: cx + (radius * Math.cos(rad)),
    y: cy + (radius * Math.sin(rad))
  };
}

function segmentPath(x, y, radius1, radius2, angleStart, angleEnd) {
  var start1 = polarToCartesian(x, y, radius1, angleEnd)
    , end1 = polarToCartesian(x, y, radius1, angleStart)
    , start2 = polarToCartesian(x, y, radius2, angleEnd)
    , end2 = polarToCartesian(x, y, radius2, angleStart);
  return [
    'M', start1.x, start1.y, 
    'A', radius1, radius1, 0, 0, 0, end1.x, end1.y,
    'L', end2.x, end2.y,
    'A', radius2, radius2, 0, 0, 1, start2.x, start2.y,
    'L', start1.x, start1.y
  ].join(' ');       
}

window.onload = function() {
  var scene = document.getElementById('scene');
  scene.setAttribute('viewBox',  [0, 0, width, height].join(' '));  
  
  for (var row = 0; row < rows; row++) {
    segments.push([]);
    for (var segment = 0; segment < segmentsPerRow; segment++) {
      var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('fill', segmentColor);
      path.setAttribute('stroke', borderColor);
      path.setAttribute('stroke-width', borderWidth);
      path.setAttribute('d', segmentPath(cx, cy, radius - row * rowHeight
        , radius - (row + 1) * rowHeight, angle * segment, angle * (segment + 1)));
      scene.appendChild(path);
      segments[row].push(path);
    }
  }

  segments[0][0].setAttribute('fill', '#f33');
  segments[6][16].setAttribute('fill', '#f33');
  segments[12][32].setAttribute('fill', '#f33');  
};
<svg id="scene"></svg>

4
  • Здорово. для меня это немного круто. Но спасибо. Пойду изучать ваш код.
    – Kamupo
    1 мая 2017 в 3:43
  • Единственное, заменил кол-во генерируемых секторов. :)
    – Kamupo
    1 мая 2017 в 19:55
  • @Kamupo, предметная область этой задачи для меня остается загадкой) 1 мая 2017 в 21:08
  • Если бы здесь было понятие ЛС, я бы мог дать пояснения. В противном же случае это уже не часть вопроса, поэтому оглашать на публику не вижу смысла.
    – Kamupo
    3 мая 2017 в 18:20
0

проста к классу flac в CSS под конец увеличьте margin 15px

2
  • Вы хоть протестили? Многие заползают друг на друга (не говорю про условие "равномерно заполняли пространство").
    – MihailPw
    30 апр 2017 в 20:00
  • может есть другие способы реализации? ну не знаю svg или canvas использовать? Кто то же подобные вещи делает? может кто поделиться опытом?
    – Kamupo
    30 апр 2017 в 20:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.