es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

HTML Canvas – Evitar la falta de nitidez

26 Jul, 2023 Programación

Contexto:
Estoy trabajando en un proyecto para renderizar un mapa en un lienzo HTML Canvas, este mapa está basado en puntos arrugados y diagramas de Voronoi. Debido a esta técnica, necesito usar ctx.scale (ambos valores, ancho y alto, están establecidos en 8). Una vez que el mapa se genera en el lienzo, leo cada píxel buscando un color específico establecido, que luego se convierte en un mapa 3D.

Problema:
Todo ‘funciona’ bien, excepto que las formas del lienzo se ven de alguna manera antialiasing, y eso obviamente crea un gran problema ya que algunos de los colores que leo de los píxeles no coinciden con mi conjunto de colores.

enter image description here

Hasta ahora, así es como se ve mi configuración de lienzo:

const dpr = window.devicePixelRatio | 1
const ctx = mapCanvas.getContext('2d')
ctx.save()

ctx.scale((mapCanvas.width / CONFIG.RESOLUTION) *dpr, (mapCanvas.Height / CONFIG.RESOLUTION) *dpr)
ctx.lineWidth = 0.5
ctx.globalCompositeOperation = 'source-over'
ctx.imageSmoothingEnabled = false

En cuanto a globalCompositeOperation, probé casi todas las opciones que tenían sentido, pero los resultados siguen siendo los mismos.

También agregué en el lado de CSS lo siguiente:

image-rendering: pixelated;

Pero también probé crisp-edges.

En resumen, he leído más artículos / tutoriales de los que hubiera deseado, he pasado 3 horas tratando de resolverlo, pero no importa lo que haga, no veo cómo voy a solucionarlo.

¿Alguien podría darme un poco de ayuda?

Gracias de antemano.

TF

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema aquí es que el valor predeterminado para imageSmoothingEnabled es true, lo que está causando el efecto de suavizado. Dado que ya lo has establecido como false, es posible que el problema se deba a que la transformación de escala no se aplica antes de dibujar la imagen, ya que ctx.scale() se aplica a todo lo que se dibuje posteriormente.

    Para solucionarlo, intenta aplicar la escala antes de dibujar el mapa. Puedes modificar tu código para que se vea así:

    const dpr = window.devicePixelRatio | 1
const ctx = mapCanvas.getContext('2d')

// configurar escala
ctx.scale((mapCanvas.width / CONFIG.RESOLUTION) * dpr, (mapCanvas.height / CONFIG.RESOLUTION) * dpr)

// dibujar mapa
// ...

// leer píxeles
// ...

// restablecer escala si es necesario
ctx.setTransform(1, 0, 0, 1, 0, 0) // restablece la transformación predeterminada

    Además, asegúrate de que los valores de mapCanvas.width y CONFIG.RESOLUTION sean múltiplos de 8, de lo contrario, es posible que obtengas cierta borrosidad en las líneas debido a la escala.

    ¡Espero que esto ayude!

Comments are closed.