Siatka rysunkowa z jQuery SVG tworzy linie 2px zamiast 1px

Wiem, że to nie biblioteka jQuery SVG powoduje ten problem, ale podczas renderowania poziomych lub pionowych linii SVG na współrzędnych x, y, linie mają szerokość 2px zamiast 1px. Prawdopodobnie ma to związek z wygładzaniem Aby je naprawić i narysować linię o szerokości 1px, muszę ustawić współrzędne, dodając 0,5px.Siatka rysunkowa z jQuery SVG tworzy linie 2px zamiast 1px

Czy istnieje sposób na uzyskanie grubości linii 1px bez konieczności ich modyfikowania?

Źródło

2011-09-28 josef.van.niekerk

sposób na rozwiązanie tego problemu jest zastosowanie jakiegoś CSS do linii:

.thelines{ 
    shape-rendering:crispEdges 
}

The spec chapter on shape-rendering property.

Zasadniczo wyłącza antialiasing dla linii, a linie, które nie są wprost pozioma lub pionowa NIE może wyglądać bardzo ładnie.

Ale pewnie lepiej będzie, jeśli dodasz .5 do współrzędnych linii, ponieważ przeglądarki wykonują to, do czego im polecono: linia ma dokładne współrzędne, a obrys jest pomalowany po obu stronach linii, pół piksela tu i pół piksela.

Źródło

2011-09-29 07:51:16

To może działać, jeśli mogę wyłączyć AA, to rozwiąże problem. –

OK, to działało, tylko problem, styl jQuery SVG nie jest ustawiony prawidłowo, jeśli nazywasz go shapeRendering, jak to się mówi w jego dokumentacji, musi być renderowaniem kształtu, w przeciwnym razie nie zadziała. –

Przypuszczam, że musi to być 'shapeRendering', gdy ustawiasz go jako właściwość obiektu DOM:' yourElement.style.shapeRendering = "crispEdges" ', ale wewnątrz atrybutu stylu powinien zachować swoją oryginalną nazwę. –

Potrzebujesz jednej szerokiej na pionowe linie poziomej i pionowej z ostrymi, a nie rozmytymi krawędziami.

Jeśli wszystkie współrzędne w swojej SVG są liczbami całkowitymi, może można zrównoważyć cały obraz przez 0,5, za pomocą elementu transform:

// first group has no transform 
// lines appear blurred, because they are centered on boundary of two pixels 
<g id = "blurred"> 
    <line x1="10" y1="10" x2="110" y2="10" stroke="black" stroke-width="1"/> 
    <line x1="10" y1="10" x2="10" y2="100" stroke="black" stroke-width="1"/> 
</g> 

    // second group has half pixel transform - 
    // lines will appear sharp because they are translated to a pixel centre 
    <g id="sharp" transform="translate(0.5,0.5)"> 
    <line x1="120" y1="10" x2="220" y2="10" stroke="black" stroke-width="1"/> 
    <line x1="120" y1="10" x2="120" y2="100" stroke="black" stroke-width="1"/> 
</g>

svg renders like this

ale będzie nie działają dla linii poziomych/pionowych, które nie są zdefiniowane za pomocą współrzędnych całkowitych lub gdy inna transformacja powoduje ich przesunięcie poza współrzędne całkowite.

Jeśli ten pomysł nie może być wykorzystany do rozwiązania problemu, prawdopodobnie potrzebna jest technika "przyciągania pikseli". Spowoduje to zanalizowanie linii przed jej narysowaniem. Jeśli linia jest pionowa lub pozioma (po transformacji), musisz dostosować współrzędne, aby znalazły się w centrum piksela po transformacji.

Być może zainteresuje Cię wyjaśnienie na temat tego powszechnego problemu z informacjami na temat numeru WPF Pixel Snapping.

Źródło

2011-09-29 07:17:00 GarethOwen

To brzmi jak dobry pomysł! :) Dzięki –

setTimeout (function() { d3.selectAll ('. Cpu-statistics .c3-ygrid-linie .c3-ygrid-line') .attr ('transform', funkcja (d, i) { return 'translate (0.5,0.5)'; }); }, 300); – Ivan

Wystarczy użyć szerokiego prostokąta 1px z wypełnieniem (tylko dla linii poziomych/pionowych oczywiście).

np. dla linii poziomej pełnej szerokości:

<rect x="0" y="0" width="100%" height="1" fill="#c2c2c2"></rect>

Idealne linie szerokie 1px za każdym razem.

Źródło

2015-01-29 19:51:59

Siatka rysunkowa z jQuery SVG tworzy linie 2px zamiast 1px

Odpowiedz

Powiązane problemy