html - taxonomica - Blurrying error con varias líneas en un grupo

taxonomia ejemplos

Question

¿Por qué agregar algunas líneas más al objeto del Group da como resultado un efecto tan borroso?

Tenga en cuenta que tener una sola línea en un grupo no da como resultado dicho comportamiento. Parece que se reproduce solo con varias líneas.

Aquí está el código para reproducir el error (puedes probarlo en línea aquí - https://jsfiddle.net/90tw8mfs/ , acerca un poco el zoom y verás de lo que estoy hablando):

var canvas = new fabric.Canvas(''c'');

function addFirstGroup() {
    var firstLine = new fabric.Line([0, 0, 0, 100], {
    strokeLineCap: ''round'',
    strokeWidth: 2,
    stroke: ''#070B7D''
  });
  var group = new fabric.Group([firstLine], {
    left: 100,
    top: 100
  });
  canvas.add(group);
}

function addSecondGroup() {
    var firstLine = new fabric.Line([0, 0, 0, 100], {
    strokeLineCap: ''round'',
    strokeWidth: 2,
    stroke: ''#070B7D''
  });
  var secondLine = new fabric.Line([0, 100, 100, 100], {
    strokeLineCap: ''round'',
    strokeWidth: 2,
    stroke: ''#070B7D''
  });
  var thirdLine = new fabric.Line([100, 100, 100, 0], {
    strokeLineCap: ''round'',
    strokeWidth: 2,
    stroke: ''#070B7D''
  });
  var group = new fabric.Group([firstLine, secondLine, thirdLine], {
    left: 100,
    top: 300
  });
  canvas.add(group);
}

addFirstGroup();
addSecondGroup();

$(''#canvas-wrapper'').mousewheel(function(e) {
    if (e.originalEvent.deltaY < 0) {
    var newZoom = canvas.getZoom() + 0.1;
  } else {
    var newZoom = canvas.getZoom() - 0.1;
  }
  canvas.setZoom(newZoom);
});

¿Por qué? ¿Cómo puedo arreglarlo?

Answer 1

No veo ningún desenfoque, pero esto no significa que no tenga borrosidad. Si tiene una pantalla de alta resolución (pantalla Retina en Mac), se verá borrosa, ya que el lienzo tendrá la mitad de la resolución de la pantalla.

Esta respuesta ayudará a superar la borrosidad causada por las pantallas de alta resolución y Retina.

La siguiente imagen es lo que veo cuando tomo una captura de pantalla de tu violín. (Nota que he reorganizado para que quepa)

No hay desenfoque de píxeles.

Si haces un acercamiento al lienzo obtendrás un efecto borroso. Esto se debe al filtrado bilineal que se aplica a todos los gráficos en la página. Esto funciona bien en las imágenes pero no tan bien en los gráficos, como las líneas.

Esta imagen muestra un aumento del 175% más un zoom adicional para resaltar el desenfoque causado por el filtrado bilineal

También puede solucionar el problema evitando el filtrado bilineal estableciendo la image-rendering: pixelated; regla CSS image-rendering: pixelated; en los elementos que deseas no tener filtrado

Actualmente no hay una manera confiable de detectar pantallas de retina en navegadores. Puede verificar el devicePixelRatio para ver si el valor es 2 pero no puede diferenciar entre retina display (que tendrá un valor de dos pero no zoom) y una página que se amplía un 200%.

Puede usar el devicePixelRatio para hacer que la resolución del lienzo coincida con el tamaño del píxel físico, pero algunos sistemas pueden no manejarlo muy bien debido a la carga adicional de la GPU.