KineticJS strokeEl ancho de 1 causa una línea borrosa y semiopaca en lugar de una línea nítida de 1 píxel

Question

He buscado en Internet y no he encontrado nada, he buscado en otros ejemplos de KineticJS que utilizan un strokeWidth de 1 en sus rectángulos y todos parecen tener una línea semiopaca de 2 píxeles en lugar de una bonita línea negra opaca de 1px.

Ahora, supongo que como Google no tiene nada de lo que la solución es realmente simple o imposible, pero ... ¿sabes cómo puedo obtener un borde de un px usando KineticJS?

$(window).load(function(){ 
    var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400}); 
    var layer = new Kinetic.Layer(); 

    var rect = new Kinetic.Rect({ 
     x: stage.attrs.width/2, y: stage.attrs.height/2, 
     width: 100, height: 100, 
     fill: "#eee", stroke: "black", strokeWidth: 1 
    }); 

    layer.add(rect); 
    stage.add(layer); 
}); 

Alguien tiene alguna idea?

Answer 1

Cuando dibuja una línea desde (x, y1) a (x, y2) (digamos, lo mismo vale para líneas horizontales) necesita preocuparse acerca de si x está "en el medio de un píxel". si la línea es "entre píxeles", será la mitad en uno y la mitad en otro. el resultado se verá borroso (básicamente es anti-aliasing).

los sistemas gráficos varían según si las coordenadas son para esquinas o centros, pero puede solucionar el problema experimentando un poco; solo necesita agregar un ancho de medio píxel a las coordenadas y vuelva a intentarlo.

en el caso de un lienzo html5 (0,0) es la esquina superior izquierda, por lo que si no tiene transformación supongo que el centro de píxeles superior izquierdo está en (0,5, 0,5).

Answer 2

Hay un enfoque genial para obtener exactamente lo que desea: agrupe dos formas similares. El que está en el nivel inferior es un píxel más grande que el de la parte superior. Llene la de abajo con el color que desea en su borde (en su caso: negro). funciona bien para mí y tiene la precisión y la calidad de CSS

Answer 3

Otro enfoque: si usa números enteros como coordenadas y líneas de peso ortogonales de 1px, puede mover la etapa completa por [0.5, 0.5] y no tiene que agrega la mitad de un píxel a cada coordenada, puedes usar números enteros como coordenadas ya que toda tu etapa se moverá mitad de píxel a derecha y lo mismo a abajo.

Answer 4

La manera más fácil de resolver esto con Kinetic es usar las propiedades de compensación. Así, en lugar de cambio de coordenadas individuales de lo que está dibujando, su línea entera/forma/grupo/capa/fase es compensado por tanto, en teoría conseguir el lugar que desee con el mínimo esfuerzo:

var rect = new Kinetic.Rect({ 
    x: stage.attrs.width/2, y: stage.attrs.height/2, 
    width: 100, height: 100, 
    fill: "#eee", stroke: "black", strokeWidth: 1, 
    offsetX: 0.5, 
    offsetY: 0.5 
}); 

o , para obtener un montón de cosas a la vez:

var layer = new Kinetic.Layer({ 
    offsetX: 0.5, 
    offsetY: 0.5 
}); 

Dicho esto, no todos los artículos se benefician de este truco. Algunos, de hecho, se vuelven más borrosos. Por lo tanto, asegúrese de aplicar el desplazamiento al nivel más atómico que evite contaminar formas que no se benefician de él.