Рисование гитарных аккордов динамически

Question

Итак, моя цель - нарисовать гитарные аккорды, например, так, используя файл json, количество аккордов, которые я должен создать, равно 924, поэтому я никак не могу сделать это вручную.

У меня есть массив чисел, разделенных запятой (посмотрите на позицию) Я определенно не использую пальчики (это палец, который вы должны использовать, в основном это число сверху)кругов)

[
  {
    "id": "404",
    "name": "Cb",
    "intervals": "",
    "positions": [
      {
        "id": "1226",
        "position": "x,2,4,4,4,2",
        "fingerings": "13331;12341",
        "picture": "",
        "chord_id": "404",
        "instrument_id": "1"
      },
      {
        "id": "1231",
        "position": "7,9,9,8,7,7",
        "fingerings": "134211",
        "picture": "",
        "chord_id": "404",
        "instrument_id": "1"
      },
      {
        "id": "1251",
        "position": "7,6,4,4,4,7",
        "fingerings": "321114",
        "picture": "",
        "chord_id": "404",
        "instrument_id": "1"
      },

      ...

Это сложно, потому что у каждого аккорда есть несколько позиций, и некоторые из них находятся на ладу 5 или больше, поэтому я должен указать, какой лад мы рисуем, а не рисовать всю гитару каждый раз.

Второй вопрос: я не знаю, с чего именно начать и как правильно с этим справиться. Я бы хотел реализовать все в React или Python, а затем сгенерировать кучу imgs и использовать их в своем приложении.это то, что мне удобно.Я также думал о js и css, но на самом деле, как я могу написать код, который помещает кружок в определенное место на основе числа.

Я не ищу код, просто некоторые ссылки, с которых я могу начатьмое исследование, теперь я немного застрял, пожалуйста, дайте мне знать, если вам нужно больше информации.

Answer 1

Возможно, это не тот ответ, которого вы ожидаете, поскольку я ничего не знаю о гитарах и гитарных аккордах.Пожалуйста, посмотрите.

const SVG_NS = 'http://www.w3.org/2000/svg';
let json = [
  {
    "id": "404",
    "name": "Cb",
    "intervals": "",
    "positions": [
      {
        "id": "1226",
        "position": "x,2,4,4,4,2",
        "fingerings": "13331;12341",
        "picture": "",
        "chord_id": "404",
        "instrument_id": "1"
      },
      {
        "id": "1231",
        "position": "7,9,9,8,7,7",
        "fingerings": "134211",
        "picture": "",
        "chord_id": "404",
        "instrument_id": "1"
      },
      {
        "id": "1251",
        "position": "7,6,4,4,4,7",
        "fingerings": "321114",
        "picture": "",
        "chord_id": "404",
        "instrument_id": "1"
      }
      ]
   }
]

for(let j = 0; j < json[0].positions.length; j++){
let position = json[0].positions[j].position.replace("x","").split(",");
let min = Math.min.apply(null, position);
let displacement = min < 1 ? 1 : min;
let svg = drawSVGElement("svg", {viewBox:"0 0 70 60"}, wrap);
drawGrid();

for(let i = 0; i < position.length; i++ ){
if(parseInt(position[i]) > 0){

let cp = {// circle position
  x : 10 + parseInt(i) * 10,
  y : 15 + (position[i] - displacement)*10
}
drawSVGElement("circle",{cx:cp.x,cy:cp.y,r:4}, svg)
}
}




function drawGrid(){
  let d = "";
  for(let i = 1; i < 6; i++){
    d+=`M10,${i*10}H60`
  } 
  for(let i = 1; i < 7; i++){
    d+=`M${i*10},10V50`
  }
  let path = drawSVGElement("path",{"d": d}, svg);
}

function drawSVGElement(tag, o, parent) {
  var svgElement = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      svgElement.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(svgElement);
  return svgElement;
}

}

svg{border:1px solid; max-height:100vh;}
path{fill:none;stroke:red;stroke-linecap: round}

<div id="wrap"></div>

Answer 2

Я бы использовал Python для этого вместе с Pyx и / или Pillow.

Вы могли бы начать с базового изображения сетки, зная, что размер каждого квадрата в вашей сетке будет очень легко перебиратьи поместите круги / другие маркеры в определенные точки, а затем сохраните обновленную версию изображения в новом месте.

Для размещения маркеров установите константы для ширины и высоты соответственно, а затем умножьте их на свои переменные положения для каждогошнур (или что-то в этом роде).

Холст JavaScript также можно сохранить в изображение с помощью .toDataUrl (), но я обнаружил, что Python работает лучше.