Сортировка случайно сгенерированных SVG по убыванию - PullRequest
Новая
       19

Сортировка случайно сгенерированных SVG по убыванию

0 голосов
/ 18 января 2020

В настоящее время мои javascript таковы: 

var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 100; i++) {
  var x = (Math.floor(Math.random() * 100) + 1)

  var rect = document.createElementNS(svgns, 'rect');
  rect.setAttributeNS(null, 'height', x);
  rect.setAttributeNS(null, 'width', x);
  rect.setAttributeNS(null, 'stroke-width', '5')
  rect.setAttributeNS(null, 'fill', 'red');
  rect.setAttributeNS(null, 'stroke', 'black');
  document.getElementById('svgSquare').appendChild(rect);
}

, а мои HTML таковы: 

<svg id="svgSquare"></svg>

Этот код отображает количество квадратов, которые я хочу, но складывает их друг на друга, и все они начинаются в одной точке. Как взять случайные квадраты, сделанные из этого для l oop и отображать их в порядке убывания в стопке. Не знаете, где go на данный момент, и не уверены, что я задаю правильный вопрос.

1 Ответ

0 голосов
/ 19 января 2020

Вы можете создать свой случайный arr, затем использовать arr.sort(), а затем l oop через свой отсортированный arr, и для каждого размера добавить rect к svg и смещению в направлении X и Y- направление поочередно, чтобы создать этот тип шаблона?:

enter image description here

Вот код также в этом JSFiddle - http://jsfiddle.net/alexander_L/q5umrgnv/41/: 

$(document).ready(function(){
  var svgns = "http://www.w3.org/2000/svg";
  var offsetY = 0;
  var offsetX = 0;
  var arr = [0];
  for (var i = 1; i <= 100; i++) {
    var x = (Math.floor(Math.random() * 100) + 1)    
    arr.push(x);
  }  
  //sort the array ascending:
  arr.sort((a, b) => a - b);

  for (var i = 0; i < 100; i++) {  
    var x = arr[i];
    console.log(i, x);
    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'y', offsetY);
    rect.setAttributeNS(null, 'x', offsetX);
    rect.setAttributeNS(null, 'height', x);
    rect.setAttributeNS(null, 'width', x);
    rect.setAttributeNS(null, 'stroke-width', '5')
    rect.setAttributeNS(null, 'fill', 'red');
    rect.setAttributeNS(null, 'stroke', 'black');
    document.getElementById('svgSquare').appendChild(rect);
    if (i % 2 == 0){
      offsetY += x;
    } else {
      offsetX += x;
    }

    document.getElementById('svgSquare').setAttribute("height", (offsetY + x) + "px");
    document.getElementById('svgSquare').setAttribute("width", (offsetX + x) + "px");

  }
});
...