如何在 canvas 内的测量 -100、0、100 之间调整标尺图表中球的位置？

Question

有一个图表，其测量范围为 -100 到 0 和 0 到 100。我需要做的是根据 gradientDataChart 输入调整球位置的计算，该值可以是介于-100和100，比例问题，视屏幕而定，球消失了，我用的距离是16，但它只适用于586px的宽度；

我测试了 it here 是否会更容易。

刚写这段代码，900宽度我用了38，问题是如果改成1000就跑位了...需要响应：

var widthDefault = 900, metric = -100, calcPos = 38 * ((metric / widthDefault) * 100);
      ctx.beginPath();
      canvas.width = widthDefault;
      ctx.translate(calcPos, 0);
      var centerX = canvas.width / 2; 
      var centerY = canvas.height / 2;
      ctx.arc(centerX, centerY, 24, 0, Math.PI * 2, false);
      ctx.fillStyle ="#ffffff";
      ctx.fill()
      ctx.font = 'bold 14pt sans-serif';
      ctx.textAlign = 'center';
      ctx.strokeStyle ='#622BCF'
      ctx.stroke();
      ctx.fillStyle ="#622bcf80"; 
      ctx.fillText(`${medida}`, centerX, centerY+8);
      ctx.globalCompositeOperation = 'destination-over';

图片示例：

Answer 1

我不确定你在 calcPos 中做什么，如果你需要一些比例，你需要将宽度除以点数，你的范围在 -100 到 100 之间，所以我们有 200 点，我们将其乘以本例中的位置，即公制 + 100...
X = width/200 * (metric + 100)

你可以玩下面的代码：

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

function drawCircle(width, metric) {
  var X = width/200 * (metric + 100)
  var Y = canvas.height / 2;
  ctx.beginPath();
  ctx.arc(X, Y, 18, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillText(metric, X, Y);
}

drawCircle(canvas.width, -80)
drawCircle(canvas.width, -50)
drawCircle(canvas.width, 0)
drawCircle(canvas.width, 25)
drawCircle(canvas.width, 80)

<canvas id="c" width=300 height=140 style="border:solid 1px"></canvas>

相同代码不同canvas宽度：

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

function drawCircle(width, metric) {
  var X = width/200 * (metric + 100)
  var Y = canvas.height / 2;
  ctx.beginPath();
  ctx.arc(X, Y, 18, 0, Math.PI * 2, false);
  ctx.stroke();
  ctx.fillText(metric, X, Y);
}

drawCircle(canvas.width, -80)
drawCircle(canvas.width, -50)
drawCircle(canvas.width, 0)
drawCircle(canvas.width, 25)
drawCircle(canvas.width, 80)

<canvas id="c" width=600 height=140 style="border:solid 1px"></canvas>

如何在 canvas 内的测量 -100、0、100 之间调整标尺图表中球的位置？

How to adjust the position of the ball in a ruler chart between measurements -100, 0, 100 inside the canvas?

javascript

angular

typescript

canvas