KineticJS strokeWidth of 1 causa una linea sfocata semi-opaca invece di una linea nitida da 1 pixel

Question

Ho guardato in Internet e non ho trovato nulla, ho cercato su altri esempi di KineticJS che utilizzano una larghezza di movimento pari a 1 nei loro rettangoli e sembrano avere una linea semi-opaca da 2 pixel piuttosto che una bella linea nera opaca nitida da 1px.

Ora, suppongo che Google non abbia nulla che la soluzione sia davvero semplice o impossibile, ma ... sai come posso ottenere un bordo di uno px utilizzando 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); 
}); 

Chiunque ha ottenuto tutte le idee?

Answer 1

quando si disegna una linea da (x, y1) a (x, y2) (ad esempio, lo stesso è vero per le linee orizzontali) è necessario preoccuparsi se x è "nel mezzo di un pixel". se la linea è "tra pixel", allora sarà metà nell'uno e metà nell'altro. il risultato apparirà sfocato (fondamentalmente è anti-aliasing).

i sistemi grafici variano a seconda che le coordinate siano per angoli o centri, ma è possibile risolvere il problema sperimentando un po '- è sufficiente aggiungere una larghezza di mezzo pixel al coord e riprovare.

nel caso di una tela html5 (0,0) è l'angolo in alto a sinistra, quindi se non ci sono trasformazioni, suppongo che il centro del pixel in alto a sinistra sia a (0,5, 0,5).

Answer 2

C'è un approccio interessante per ottenere esattamente ciò che si desidera: raggruppare due forme simili. Quello al livello inferiore è un pixel più grande di quello in alto. Riempi quello in basso con il colore che vuoi il bordo (nel tuo caso: nero). funziona bene per me e ha la precisione e la qualità dei CSS

Answer 3

Un altro approccio: se si utilizzano numeri interi come coordinate e linee di peso ortogonali da 1px, è possibile spostare l'intero stadio di [0,5, 0,5] e non è necessario aggiungi la metà di un pixel a ciascuna coordinata, puoi quindi utilizzare i numeri interi come coordinate mentre l'intero stage verrà spostato di mezzo pixel a destra e lo stesso a basso.

Answer 4

Il modo più semplice per risolvere questo problema con Kinetic è utilizzare le proprietà di offset. Così, piuttosto che spostando le singole coordinate di ciò che si sta disegnando, la vostra intera linea/forma/gruppo/strato/stage è compensato da più di tanto, in teoria ottenerlo dove si desidera con il minimo sforzo:

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 , per ottenere un sacco di cose in una volta:

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

Detto questo, non tutti gli articoli beneficiano di questo trucco. Alcuni, in effetti, diventano più confusi. Quindi, assicurati di applicare l'offset al livello più atomico che eviti di contaminare le forme che non ne beneficiano.