添加值后如何让用户在画布上编辑值

如何解决添加值后如何让用户在画布上编辑值

我写了一些代码，使我可以在条形图中添加和删除条形。我想尝试实现的是一种编辑画布上已经存在的条形值的方法。我无法同时指定我要编辑的栏和输入我希望数组索引具有的新值时遇到麻烦。任何帮助将不胜感激。我已经尝试尝试编写editBar函数，但是我可能会以完全错误的方式进行操作。

这是我到目前为止的代码；

<html>
<head>
<script>

var barVals = [];

function draw() {

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  // calculate highest bar value (used to scale the rest)
  var highest = 0;
  for (var b = 0; b < barVals.length; b++) {
    if (barVals[b] > highest)
      highest = barVals[b];
  }

  // we have 8 horizontal lines so calculate an appropriate scale

  var lineSpacing = 1;
  var highestLine = 7 * lineSpacing;

  while (highestLine < highest) {
    lineSpacing *= 10;
    highestLine = 7 * lineSpacing;
  }



  // grey background

  ctx.fillStyle = "rgb(200,200,200)";
  ctx.fillRect(0,600,450);



  // draw and (if we have any data to scale from) label horizontal lines

  var lineNum = 0;
  ctx.fillStyle = "white";
  ctx.font = "16px sans-serif";
  for (y = 0; y <= 350; y += 50) {

    // line
    ctx.beginPath();
    ctx.moveTo(50,y + 50);
    ctx.lineTo(550,y + 50);
    ctx.stroke();

    // label (the 6 is an offset to centre the text vertically on the line)

    if (barVals.length > 0) {
      ctx.fillText(lineSpacing * lineNum,10,400 - y + 6);
      lineNum++;

    }
  }



  // draw boxes (widths based on how many we have)

  var barWidth = 500 / barVals.length;
  var halfBarWidth = barWidth / 2;
  for (b = 0; b < barVals.length; b++) {

    // calculate size of box and draw it

    var x = 60 + b * barWidth;
    var hgt = (barVals[b] / highestLine) * 350; // as fraction of highest line

    if (b % 2 == 0)
      ctx.fillStyle = "red";

    else

      ctx.fillStyle = "blue";

    ctx.fillRect(x,400 - hgt,barWidth,hgt);

    // calculate position of text and draw it

    ctx.fillStyle = "white";
    var metrics = ctx.measureText(barVals[b]);
    var halfTextWidth = metrics.width / 2;
    x = 60 + halfBarWidth + (b * barWidth) - halfTextWidth;
    ctx.fillText(barVals[b],x,420 - hgt);

  }

}



function addBar() {

  var textBoxObj = document.getElementById("barVal");
  barVals.push(parseInt(textBoxObj.value)); // add new value to end of array. As an integer not a string!!
  draw(); // redraw

  textBoxObj.value = 0;

}

function removeBar() {

  var textBoxObj = document.getElementById("removeBarVal");
  barVals.splice(parseInt(textBoxObj.value),1); // choose which object to remove from the array by specifying the index
  draw(); // redraw
    
}
    
function editBar() {
    
    var textBoxObj = document.getElementById("editBarVal");
    barVals.replace(parseInt(textBoxObj.value),1);
}

</script>
</head>


                                 
                                 
                                 <center>
  <canvas id="canvas" width="600" height="450"></canvas>
  <form>
    <br>
    <input type=button value='Add Bar' onclick='addBar();'> <input id='barVal' value=0>
    <input type=button value='Remove Bar' onclick='removeBar();'> <input id='removeBarVal' value=0>
    <input type=button value='Edit Bar' onclick='editBar();'> <input id='editBarVal' value=0>

  </form>
</center>

添加值后如何让用户在画布上编辑值

如何解决添加值后如何让用户在画布上编辑值

相关推荐