HTML5 : 부정확 한 직사각형 위치 지정

Question

HTML5의 캔버스를 사용하여 주로 일부 직사각형과 간단한 선으로 구성된 미리보기 이미지를 만듭니다. 지금까지 잘 작동하지만 어떻게 든 고칠 수없는 한 가지 문제가 있습니다. 다음 상황을 가정하십시오.

context.fillStyle = "rgba(0,0,0,0.75)"; 
context.fillRect(100.64646,100,50.94967,20); 
context.fillRect(100.64646+50.94967,100,100,20); 

그래서 저는 불투명도가 2 인 직사각형을 그립니다. x 시작 좌표와 첫 번째 rect의 x 길이는 두 번째 rect의 x 시작 좌표와 같으므로 이론적으로는 두 요소 사이에 여백을 두지 않고 충돌해야합니다. 안타깝게도 결과는 달라집니다. (http://files.clemensfreitag.de/thin_spacing.jpg 참조)

상자 사이에 아주 작은 간격이 있으며 배경색이 표시됩니다. 그러나 : 좌표와 길이가 정수 값인 경우이 문제가 발생하지 않습니다.

float 값을 사용하여 수행 할 수있는 방법이 있습니까? 그리기 전에 정수로 변환하면 내 응용 프로그램에서 허용 될 수 있지만이 기능이 부동 소수점으로 작동하지 않아야하는 이유가 궁금합니다.

최저

, 클레멘스

Answer 1

은 당신이보고있는 것은이 불투명 한 색을 중첩의 결과입니다. 첫 번째 사각형의 길이가 151.59613으로 끝나면 사각형은 자동으로 앤티 엘리 어싱되어 맨 오른쪽 열에 rgba (0,0,0,0.4470975)가 채워집니다. 두 번째 사각형이 동일한 x 좌표에서 시작될 때는 rgba (0,0,0,0.3029025)를 사용하여 가장 왼쪽 열 (첫 번째 사각형의 가장 오른쪽과 동일)을 채우는 앤티 앨리어스입니다. 두 값은 rgba (0,0,0,0.75)까지 합쳐 지지만 혼합 된 방법은 아닙니다. 대신, 두 번째 색상 (rgba (0,0,0, .3029025))은 첫 번째 색상의 맨 위에 그려지고 rgba (0,0,0,0.4470975+ (1-0.4470975) * 0.3029025) = rgba , 0,0,0.61457305). 실제로 두 직사각형 사이에는 간격이 없지만 약간 밝은 회색 음영 인 1 픽셀 열이 있습니다.

마찬가지로 단색을 사용하는 경우 두 번째 사각형의 앤티 앨리어스가 적용된 열이 첫 번째를 덮어 쓰게되므로 "틈"에 더 밝은 회색 음영이 나타납니다.

앤티 엘리 어싱이 필요하지 않으므로 문제가 정수 값으로 나타나지 않습니다. 각 사각형은 픽셀의 가장자리에서 끝납니다.

globalCompositeOperation 설정 중 아무 것도이 문제를 해결하지 못했고, 앤티 앨리어싱을 해제하면 가끔 1px 간격이 생길 수 있으므로 정수 값을 강제로 사용하는 것이 가장 간단한 해결책이라고 생각합니다 (또는 그 열을 지울 수 있습니다. 원하는 색상으로).

Answer 2

이 기사에서는 성능에 대해 살펴 보았지만 부동 소수점을 사용할 때 픽셀간에 "퍼지 (fuzzy)"로 그려지는 것과 동일한 효과가 발생할 가능성이 있습니다.

http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

빠른 검색은 깨끗한 이미지와 정수와 더 나은 성능을 얻을 것이다 제안합니다.

Answer 3

이 문제는 객체가 플로트 기반 그리드에서 그리는 방식과 관련이 있습니다 (특히 수직 및 수평선 및 따라서 직사각형).

설명과 스키마가 참조 : http://canop.org/blog/?p=220

하여 객체의 크기에 따라, 당신은 당신의 모양에 대한 정수 또는 중간 정수 좌표와 크기를 사용할 필요, 목표는의 완전한 픽셀을 채우는 것 두 가지 차원.

예

:

• 사용
• 은 정수 2 픽셀 너비 라인

좌표를 사용하는 얇은 라인 중간 정수 (한 픽셀의 폭) (및 연장 rect의 논리)