나는 그리기 위해 캔버스를 사용하는 웹 앱을 만들고 있습니다. 나는 무한히 큰 드로잉 공간 (원하는 방향으로 원하는만큼 스크롤 할 수 있음)을 가지고 데이터/이미지를 데이터베이스에 저장하고 싶습니다.무한히 큰 캔버스 만드는 법?
뭔가 비슷한 것을 여기에 입력했습니다 : http://wordsquared.com/, 더 많은 사람들이 그것을 재생할수록 커집니다.
필자는 어떻게 든 타일링 된 이미지를 필요로하고 db에 저장 한 다음 뷰포트 내의 이미지 만 loding한다는 것을 알고 있습니다. 어떻게하면 무한한 스크롤링이 이루어지며 어디에서 시작해야합니까?
이것은 약간 비 재래 한 방법이지만 무한한 가능성이있는 (이론적으로는 언 바운드 저장 공간으로) 나를 무한정 강타했습니다.
보드의 현재로드 된 덩어리를 저장해야합니다. 이는 일종의 고유 ID로 제공됩니다. 청크와 데이터에는 다음과 같은 열이있는 테이블에있을 필요가 : 청크의
의
이제 드래그 할 캔버스에 대한 이벤트 리스너를 만들고 이동 거리를 추적합니다. 놓을 때 캔버스가 다른 청크로 변경되지 않았다면 아무 것도하지 않습니다.
캔버스가 현재 청크를 떠난 경우 저장된 ID를 사용하여 다음에로드 할 청크를 찾습니다. ID가 0이면 청크가 아직 존재하지 않는다고 가정하고 생성합니다. 그렇지 않으면 기존 청크를 대체하여 청크를로드하십시오. 캔버스를 중앙에 다시 놓습니다.
ID가 충분하고 저장 공간이 충분하면 좌표 시스템이 사용되지 않으므로 무한 캔버스가됩니다. 또한 모서리를 감싸거나 웜홀을 만들 수도 있습니다.
어떻게 구현해야하는지는 잘 모르겠지만 캔버스가 얼마나 멀리 이동했는지 추적하면됩니다. Google지도는 비슷한 기능을 수행하므로 처리 방법을 살펴볼 것입니다. 곧 답변을하고 구현 세부 정보를 추가 할 수 있는지 살펴 보겠습니다.
이 방법은 가장 실용적이지 않거나 가장 간단한 방법 일 수는 없지만 생각해 보니 재미있었습니다.
편집 : 나는이 기본 기능의 라인을 따라 믿고 : http://candrews.net/blog/2010/10/introducing-sprymap/ 그것은 경량 드래그 자바 스크립트 맵입니다. 그렇다면 얼마나 멀리 추적 할 필요가 있습니다.
흠 .. 확실히 isnt 관습,하지만 아마도 가장 실용적이고 간단한 방법은 들었어. 생각 나는 각 타일을 (1000px x 1000px)처럼 큰 전체 HTML 캔버스가되도록하는 것이 가장 좋을 것이라고 생각하므로 모든 데이터를 저장하고로드하기 쉽습니다. – sdfadfaasd
나는 이것을 처리하기 위해 TiledCanvas라는 라이브러리를 만들었습니다. 줌과 이동을위한 인터페이스를 제공합니다. 그리고 모든 캔버스 api를 사용하여 무한한 공간을 그립니다.
좌표를 기반으로 청크를 동적으로로드 할 수 있습니다. x, y 및 콜백을 매개 변수로 사용하는 함수를 제공하기 만하면 캔버스에 그릴 수있는 것을 돌려 줄 수 있습니다.
당신은하지 제대로, 무한 가질 수 없습니다, 당신은 당신이 당신의 좌표 시스템의 한계를 타격하게 될 겁니다으로 단지 방향으로 다음 청크를로드하지 않습니다. 당신이하고 싶은 일은 끊임없이 캔버스를 다시 중심에두고 중심이로드 된 영역의 가장자리에 도달 할 때 새로운 덩어리를로드하는 것입니다. – ssube
내가 말하는 것은 당신이 스크롤할수록 커질수록 커집니다. 물론 나는 한도를 정해야 할 필요가 있지만, 내가 설정 한 크기만큼 큰 것을 얻고 싶습니다. – sdfadfaasd
가능한 [캔버스 무한 만들기] 가능한 복제본 (http://stackoverflow.com/questions/38589304/make-a-canvas-infinite) – bummi