DXOpal Windowdraw_박스 벌레 수정했어요.

안녕하세요, 저는 야하라입니다.오늘 DXOpal 버그를 수정했습니다. 어떻게 작동하는지 설명해 드리겠습니다.

흰색이 회색으로?

저번 DXOpal로 Undertale 같은 화면 만들기 - Qita라고 썼어요.박스로 사각형을 그릴 때 이상해 보여요.
이거 최초 캡처인데 흰색으로 1px의 사각형을 그리려고 했는데 좀 어둡지 않나요?흰색이라기보다는 회색...

까닭

트위터에서 잔소리를 할 때 캔버스의 좌표계(0,0)는'왼쪽 픽셀'이 아니라'왼쪽 픽셀의 왼쪽 상단'을 가리키며 예쁜 1px선을 그리려면 0.5를 넣어야 한다고 알려준다.

https://twitter.com/yhara/status/1070293143952605184

수정

우선 재현 코드가 있기 때문에 이것이 고쳤는지 바로 알 수 있도록 개발 환경을 설정했다.
DEVELOPMENT.md에는 bundle exec rackup하면공식 사이트과 대체적으로 같은 것이 일어서서 이 디버깅을 사용한다고 쓰여 있다.

공식 사이트와 config.ru의 차이

공식 사이트(github 페이지)에 구축된build/dxopal은 대체적으로 같다고 말했다.min.js가 사용되고 config가 사용됩니다.루가 시작된 상태에서lib/아래의 코드는 매번 컴파일되기 때문입니다.
디버깅 중 약간의 수정을 위해 재구성하는 것은 너무 번거로우며,rackup으로 시작하는 것을 사용하면 매우 편리합니다.config.루여기 gsub.,}내의 dxopal입니다.min.js가 컴파일된 코드를 읽는 것으로 변경되었습니다.

재구성 코드 불러오기

먼저 빨간색 동그라미가 움직이는 시연 원본은 examples/top -page/main.rb에 있어요.따라서 여기Window.draw_box(10, 10, 50, 50, C_RED)에 적당히 가입하여 브라우저를 다시 불러옵니다.
사각형이 나오다.1 조금 이해하기 어렵지만 빨간색 동그라미에 비해 핑크색이 조금 있어요.

수정

Window.draw_box의 본체는lib/dxopal/image입니다.rb에 있어요.윈도와 Image는 비슷한 방법이 있기 때문에 Image에 모인다.
그러니까 이미지.rb의 box 방법을 다음과 같이 수정합니다.

       %x{
         ctx.beginPath();
         ctx.strokeStyle = #{_rgba(color)};
-        ctx.rect(x1, y1, x2-x1+1, y2-y1+1);
+        ctx.rect(x1+0.5, y1+0.5, x2-x1+1, y2-y1+1);
         ctx.stroke();
       }
       return self

브라우저를 다시 로드하면 선명한 선이 나타납니다.좋다.이거야.

또 다른 구린내 나는 벌레

이러면 어제 마지막 시위행진도 예쁘게 나올 텐데...

그렇게 생각하지만 중앙만 굵어졌네요.ctx.rect의 3, 4 파라미터는 너비와 높이이지만 위의 diff를 보면 느낌+1이 남는다.
그래서 거기도 수정이 되면...

       %x{
         ctx.beginPath();
         ctx.strokeStyle = #{_rgba(color)};
-        ctx.rect(x1, y1, x2-x1+1, y2-y1+1);
+        ctx.rect(x1+0.5, y1+0.5, x2-x1, y2-y1);
         ctx.stroke();
       }
       return self