2014-04-29 3 views
2

hinting the browser about anti-aliasing in svg에 대한 일부 표준화 된 옵션이 있지만 둥근 모서리가있는 사각형이있는 경우에는 아무 것도 작동하지 않는 것으로 보이며 따라서 앤티 앨리어싱을 끌 수 없습니다.인접한 사각형 사각형 간의 라인 회피

사각형이 사각형 사이에 세로 간격을 두지 않지만 앤티 앨리어싱 효과로 인해 사각형 사이에가는 선이 표시됩니다. 예 : 내 svg는 픽셀 80에 직사각형 끝 하나가 있고 다음 픽셀은 81에서 시작하지만 여전히 그들 사이에 얇은 배경 선이 표시됩니다.

직선에 대한 앤티 앨리어싱을 방지하려면 최신 버전 브라우저를 강제 실행할 방법이 없습니다 (crispEdges가 내 둥근 사각형에 강제로 적용하지 않습니다).

는 I는 y로 값을 화소의 0.5을 가산함으로써 조정 대해 및 (I이 가장 현대 LCD 스크린은 two hardware vertical pixels per software exposed pixel를 포함한다는 사실과 관련이 판단) 짝수 또는 홀수 Y 값 조정에 대해 일부 읽기 . 나는이 문제가 얼마나 정확하게 문제를 완화하는지 확신 할 수 없으며 정확히 이것이 왜 정확하고 왜 가장 정확한/단단한 조정 방법인지 명확하게 설명하고 싶습니다. 소프트웨어 당

답변

6

이 하드웨어 수직 픽셀은 픽셀을 잘못

없음을 노출.

SVG에서 "81"과 같은 좌표를 지정하면 해당 좌표는 픽셀 80과 81 사이의 가상 선에 해당합니다. 선의 너비가 "1"이면 렌더러는 50을 배치하여 그리기를 시도합니다 80 픽셀의 색상 % 및 81 픽셀의 50 %입니다. 이것은 앤티 앨리어싱입니다. 한 픽셀 선을 이와 같이 앤티 앨리어싱하지 않으려면 81.5 좌표를 지정하십시오. 이렇게하면 전체 줄이 픽셀 81 안에 들어갑니다.

그러나 줄의 너비가 2 (또는 다른 너비) 인 경우 81.5를 사용하지 말고 81을 유지해야합니다. 50 % (즉, 1) 픽셀 81에서는 50 % (1)가됩니다. 앤티 앨리어싱 효과가 없습니다.

enter image description here

이것은 수평 및 수직 라인들 모두에 적용된다. LCD 또는 오래된 CRT에 상관없이 적용됩니다.

지금이 설명이 의미가 있습니까?

+0

좌표 해석은 픽셀 간의 가상의 위치로, 앤티 엘리 어싱의 경우에만 적용됩니까? SVG에서만? 이 "가상 선"접근법에 대해 확실한 무언가를 찾을 수 없었습니다. – matanster

+1

그것은 개념적/가상적인 라인입니다. 이 동작은 SVG 사양에 지정되어 있지만 SVG에서만 고유하지는 않습니다. –

+2

설명 다이어그램을 추가했습니다. –