一种基于JavaScript的小学生paper.js图形绘图仪

Question

我已经开始用JavaScript为我的学童编写一个简单的绘图仪。我使用了paper.js库，因为我希望能够将图形导出为svg文件。

我只是一个初学者，这一切(只是一个谦逊的数学老师)，所以我会非常欢迎任何想法，您可能有。代码的运行速度不是特别快，所以我对性能的任何改进都特别感兴趣。

非常感谢和最良好的祝愿。

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.3.0/math.min.js"></script>

<input type="number" id="input_xWidth" value=14><br>
<input type="number" id="input_yWidth" value=4><br>
<input type="text" id="eqn" value='sin(x)'><br>

<button onclick="drawGrid()">draw grid</button>
<button onclick="exportSVG()">export</button>

<br><br>

<canvas id="canvas_1"></canvas><br>

JavaScript：

var graphScope = new paper.PaperScope();
var canvas_1 = document.getElementById('canvas_1');
graphScope.setup(canvas_1);
graphScope.activate();

const scale = 10;

function drawGrid() {

  var xWidth = document.getElementById("input_xWidth").value;
  var yWidth = document.getElementById("input_yWidth").value;

  var z;
  var zz;

  //clear the canvas
  graphScope.project.activeLayer.removeChildren()

  //draw minor gridlines
  for (z = 0; z < xWidth; z++) {
    for (zz = 1; zz < 5; zz++) {
      var myPath = new graphScope.Path();
      myPath.strokeColor = new graphScope.Color(0.9, 0.9, 0.9);
      myPath.add(new graphScope.Point(z * scale + (scale / 5) * zz, -(0)));
      myPath.add(new graphScope.Point(z * scale + (scale / 5) * zz, -(yWidth * scale)));
    }
  }

  for (z = 0; z < yWidth; z++) {
    for (zz = 1; zz < 5; zz++) {
      var myPath = new graphScope.Path();
      myPath.strokeColor = new graphScope.Color(0.9, 0.9, 0.9);
      myPath.add(new graphScope.Point(0, -(z * scale + (scale / 5) * zz)));
      myPath.add(new graphScope.Point(xWidth * scale, -(z * scale + (scale / 5) * zz)));
    }
  }

  //draw major gridlines
  for (z = 0; z <= xWidth; z++) {
    var myPath = new graphScope.Path();
    myPath.strokeColor = new graphScope.Color(0.5, 0.5, 0.5);
    myPath.add(new graphScope.Point(z * scale, -(0)));
    myPath.add(new graphScope.Point(z * scale, -(yWidth * scale)));
  }

  for (z = 0; z <= yWidth; z++) {
    var myPath = new graphScope.Path();
    myPath.strokeColor = new graphScope.Color(0.5, 0.5, 0.5);
    myPath.add(new graphScope.Point(0, -(z * scale)));
    myPath.add(new graphScope.Point(xWidth * scale, -(z * scale)));
  }

  // parse equation from input box
  const node2 = math.parse(document.getElementById("eqn").value)
  const code2 = node2.compile()
  let scope = {
    x: 3,
  }


  // trim graph to grid
  var rectangle = new graphScope.Rectangle(new graphScope.Point(0, 0), new graphScope.Point(xWidth * scale, -yWidth * scale));
  var GraphBoundary = new graphScope.Path.Rectangle(rectangle);
  var graphPath = new graphScope.Path();
  for (z = 0; z < xWidth; z += 0.001) {
    scope.x = z
    graphPath.add(new graphScope.Point(z * scale, -(20 + scale * code2.evaluate(scope))));
  }
  var NewPath = graphPath.intersect(GraphBoundary, {
    trace: false
  })
  NewPath.strokeColor = new graphScope.Color(0.1, 0.1, 0.1);
  graphPath.remove();

  //fit page to canvas bounds
  graphScope.project.activeLayer.fitBounds(graphScope.view.bounds);
}

function exportSVG() {
  var fileName = "custom.svg"
  var url = "data:image/svg+xml;utf8," + encodeURIComponent(graphScope.project.exportSVG({
    asString: true
  }));
  var link = document.createElement("a");
  link.download = fileName;
  link.href = url;
  link.click();
}

Answer 1

我对纸不熟悉，所以什么也不能说。关于HTML，我不会说太多，因为它显然只是一个函数占位符，除了两点：

• 在所有属性上一致使用双引号"。
• 不要使用on...属性。使用addEventListener在脚本中分配事件侦听器。

关于剧本：

• 使用let/const而不是var。
• 在for语句中使用let分别声明变量in循环(例如，不要在所有循环中重用相同的声明变量)。
• 使用更好的变量名称。我不知道z，zz，node2，code2等是什么意思。(还要确保所有变量名都以小写字母开头。)
• 不要在循环中重复创建相同的颜色。在循环之外创建它们一次。