javascript - 动态绘制吉他和弦

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 实现所有内容，然后生成一堆 img 并在我的应用程序中使用它们，这就是我很舒服。我也在考虑 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>