Tengo una matriz que tiene valores dinámicos del servidor.
let arr = ['#eee','#fff','#aaa'] or sometimes, let arr = ['#eee','#fff','#aaa','#eee','#fff','#aaa']Ahora, necesito calcular los valores de gradiente para una distribución equitativa de los colores. Hice algo como a continuación, que está dando un valor incorrecto.
let arr = ['#eee','#fff','#aaa','#eee','#fff','#aaa'] let gper = parseFloat(100/arr.length) let c_arr = arr.map((k, i) => { return `${k} ${parseFloat(gper * i--)}% ${parseFloat(gper * i)}%`}) .toString() console.log(`linear-gradient(to left, ${c_arr})`)¿Hay una mejor manera de arreglar esto?
Si desea una distribución uniforme de los colores en su degradado, no es necesario especificar ningún porcentaje. El navegador hace esto por defecto.
Simplemente puede hacer algo como esto:
`linear-gradient(to left, ${arr.join()})`Solo se necesita una ligera alteración en el cálculo: en la pregunta, el primer valor fue negativo.
Este fragmento lo explica en un bucle solo para que quede un poco más claro: los valores deben comenzar en 0, no en -gper.
let arr = ['#eee', '#fff', '#aaa', '#eee', '#fff', '#aaa'] let gper = parseFloat(100 / arr.length) let c_arr = ''; for (let i = 0; i < arr.length; i++) { c_arr += ((i == 0) ? '' : ', ') + arr[i] + ' ' + i * gper + '%' + ' ' + (i + 1) * gper + '%'; } console.log(`linear-gradient(to left, ${c_arr})`);El resultado es:
linear-gradient(to left, #eee 0% 16.666666666666668%, #fff 16.666666666666668% 33.333333333333336%, #aaa 33.333333333333336% 50%, #eee 50% 66.66666666666667%, #fff 66.66666666666667% 83.33333333333334%, #aaa 83.33333333333334% 100%)