0
189
Views¿Cómo ajustar la posición de la bola en un gráfico de regla entre las medidas -100, 0, 100 dentro del lienzo?
Hay un gráfico que tiene medidas que van de -100 a 0 y de 0 a 100. Lo que debo hacer es ajustar el cálculo de la posición de la pelota con el número de acuerdo con la entrada de datos de gradiente, que puede ser un valor entre -100 y 100, el problema es la proporcionalidad, dependiendo de la pantalla, la bola va desapareciendo, estaba usando la distancia 16, pero solo funcionó para un ancho de 586px;
Lo probé aquí si eso podría hacerlo más fácil.
Solo escribiendo este código, usé 38 para 900 de ancho, el problema es que si lo cambias a 1000, se sale de posición... tiene que responder:
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'; Ejemplo de imagen: 
1 answers
Answer question0
No estoy seguro de lo que está haciendo en su calcPos, si necesita algo proporcional, debe dividir el ancho por la cantidad de puntos, su rango está entre -100 y 100, por lo que tenemos 200 puntos, y lo multiplicamos por la posición en este caso es métrica + 100...
X = width/200 * (metric + 100)
Puedes jugar con el siguiente código:
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>Mismo código diferente ancho de lienzo:
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>