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号或5号以上品格上，所以我应该指出我们正在绘制哪个品格，而不是每次都绘制整个吉他。

第二个问题是我不知道应该从哪里开始以及如何正确处理它，我想在React或Python中实现所有功能，然后生成一堆img，并在我的应用程序中使用它们，这就是我很满意我也在考虑js和CSS，但实际上我该如何编写一个代码，根据数字在那个特定的位置上画一个圆圈。

我不是在寻找代码，只是一些可以在这里开始我的研究的链接，现在我有点卡住了，如果您需要更多信息，请告诉我。

Answer 1

我将为此使用Python，以及Pyx和/或Pillow。

您可以从基本的网格图像开始，知道网格中每个正方形的大小将很容易遍历并将圆/其他标记放置在特定点，然后将图像的更新版本保存到新的位置。

要放置标记，请分别设置宽度和高度的常量，然后乘以每条绳索的位置变量（或具有这种作用的东西）。

JavaScript画布也可以使用.toDataUrl（）保存到图像，但是我发现Python的性能更好。

Answer 2

这可能不是您期望的答案，因为我对吉他和吉他和弦一无所知。请看看。

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>

动态绘制吉他和弦

2 个答案: