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 you have read our privacy policy.

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