HTML5 캔버스에서 그림 그리기에 적합한 범위 검사를 수행하는 방법은 무엇입니까?

Question

당신이에 그리거나 (이 방화범에서 직접 붙여 넣기/복사), 오류가 발생합니다 캔버스의 경계를 넘어 지점으로 이동하려고하면, 파이어 폭스에서 캔버스에 그리기 :

An invalid or illegal string was specified" code: "12 

다른 브라우저는 오류를 발생시키지 않습니다. 이는 드로잉 메서드 (lineTo, arc 등)와 이미지 드로잉 모두를위한 것입니다. 그리기 전에 캔버스의 너비와 높이를 사용하여 빠른 경계 검사를 수행하기는 쉽지만 사물의 일부를 그리는 것은 어떨까요?

예를 들어, 중심점과 반지름으로 정의되고 원호 (arc)로 그려진 원이 있다고 가정 해 봅시다. 범위 검사를 수행하면 캔버스에서 벗어날 수 있지만 원의 일부는 기술적으로 볼 수 있어야합니다. 따라서 원은 완전히 또는 전혀 그려지지 않을 것입니다 : 중심점이 캔버스 밖에있는 경우 원의 일부만을 그릴 수있는 방법이 없습니다.

누구든지이 문제를 해결할 수 있습니까?

내가 생각한 한 가지는 큰 "세계 버퍼"캔버스를 사용하여 캔버스에서 복사 한 것입니다. 또 다른 방법은 버퍼 캔버스의 중심에 각 객체를 그려 넣은 다음 새로 그려진 픽셀을 적절한 위치에 디스플레이 캔버스에 복사하는 것입니다.

이 문제를 해결하기 위해 사람들이 수행 한 작업은 무엇입니까?

Answer 1

캔버스는 이미지를 뷰의 경계 사각형에 자릅니다. 이 경계 상자 바깥쪽에 아무런 문제가 없어야합니다. 그것은 당신의 그림에 나타나지 않을 것입니다. 오류를 재현 할 수 있는지 확인하기 위해 특정 예제를 게시하십시오.