JS로 스케치

나는 이걸 생각하면 고생하고있다JS로 스케치

JS로 스케치 앱을 만들었다 고 가정 해 보겠습니다. 예 : http://intridea.github.com/sketch.js/

그리고 무언가를 그린 후에 사용자의 그림을 저장하려고합니다. 따라서 누군가가 사이트를 방문 할 때마다 이전의 모든 그림이로드됩니다. 진짜로 실시간으로 만드는 것은 지금 옵션이 아니기 때문에 실시간 다중 사용자 그리기를 다소 위장한 것입니다.

서버 쪽 저는 PHP와 MySQL을 사용하고 있는데, 이것이 좋을지 모르겠습니다.

감사합니다.

출처

2011-09-07 dandoen

'sketch.js'를 ($('#myCanvas').sketch()을 사용하여) 적용한 캔버스에는 toDataURL() (jQuery 요소가 아닌 HTML 요소)이라는 함수가 있습니다. 이 함수가 서버에 반환하는 데이터를 업로드 할 수 있습니다.

$('#upload').click(function() { 
    $.post('/upload_image.php', { data: $('#myCanvas').get(0).toDataURL() }, function() { 
     alert('uploaded'); 
    }); 
});

서버에 게시 된 데이터를로드하여 캔버스를 복원 할 수 있습니다. 예를 들어 여기를 참조하십시오 : http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/.

출처

2011-09-07 08:28:38

이와 같은 프로젝트로 해결할 여러 가지 복잡한 문제가 있습니다. 필자는 최근에 백엔드를 위해 PHP와 MySQL을 사용하여 실시간 캔버스 기반 다중 사용자 그리기 응용 프로그램을 개발했습니다. 더 중요한 아이디어 중 일부는 다음과 같습니다.

JS에는 완벽한 그림 응용 프로그램에 꼭 필요한 해상도로 마우스 좌표를 폴링하는 기능이 없습니다. 가볍게 재미있는 스케치를하면 그걸로 도망 갈 수 있습니다. 하지만 Photoshop 품질을 에뮬레이트하는 것은 불가능합니다. 이 문제는 주로면 처리 된 스케치 선을 초래합니다. 이 예제는 링크 된 예제에서 약간 볼 수 있지만 기본 선 그리기 기능을 사용하지 않고 대신 사용자 정의 스탬프 모양을 사용하는 경우에는 지나치게 명확합니다.

Jan Jongboom의 설명에 따라 사용자의 캔버스 상태를 업로드 할 수 있지만 문제가없는 것은 아닙니다. 이 시나리오를 고려해보십시오. user1과 user2이 동시에 앱에 연결되며 빈 캔버스로 인사합니다. user1은 큰 빨강 채워진 원을 그리고 나서 user2은 큰 파란색, 채워진 삼각형을 그립니다. 외부 관측자에게서 user1가 먼저 그 모양을 그리고 user2이 가장 먼저 그렸다. 다소 복잡한 시나리오에서, user2의 그림이 네트워크 지연으로 인해 user1 전에 서버에 업로드가 완료되었다고 가정 해 봅시다. 서버가 user1의 상태를 user2의 상단에 잘못 저장합니다. 이것은 문제의 다소 단순화 된 버전이지만, 시스템 규모가 커지고 동시에 여러 사람이 그림을 그리는 것과 같이 큰 문제입니다. 사람들은 서로 그림을 그릴 것이고 캔버스의 상태는 각 지역 사용자마다 다를 것입니다.

또 다른 문제는 캔버스의 해상도에 따라 각 동작 후에 캔버스 데이터를 업로드하는 것이 적절하지 않다는 것입니다. 전체 화면 해상도로 실행해야하는 것을 디자인하는 경우 모든 작업 후에 1680x1050 이미지를 업로드하는 것은 확실히 효율적이지 않습니다. 대신 사용자 작업을 다시 만드는 데 필요한 정보를 전송해야합니다. 이것은 훨씬 더 나은 접근법입니다 (즉, [4,6]에서 반지름이 9px 인 파란색 원을 그립니다). 이것은 또한 데이터베이스 구성에 도움이됩니다.

내가 잠시 동안 좋아했던 한 가지 옵션은 PHP가 모든 사람이 그리는 캔버스의 서버 측 이미지를 PHP로 업데이트하는 것이 었습니다.서버가 업데이트를 수신하면 PHP는 사용자가 로컬에서 사용하는 것과 동일한 리소스를로드하고 동일한 드로잉 작업을 수행합니다. 그런 다음 새로운 사용자가 연결되면 가장 최근의 서버 측 이미지를 가져 와서 추가 업데이트를 로컬에서 처리하여 다른 모든 사용자를 따라 잡았습니다. 불행하게도, PHP의 모든 이미지 함수가 CPU 기반이므로 브러시 크기 조정, 회전, 투명도 및 간격 작업을 할 때 처리 시간이 너무 오래 걸렸습니다. 가치가있다.

선품 외에도 가장 큰 문제는 모두를 동기화 상태로 유지하는 것입니다. 귀하의 목적을 위해, 이것은 전혀 문제가되지 않을 수도 있습니다. 그러나 브라우저에서 다중 사용자 Photoshop을 구현하려는 경우 꽤 큰 티켓 항목입니다.

이 아이디어 나 방법에 대해 다른 질문이 있으면 언제든지 문의하십시오.

출처

2011-09-12 21:46:15 Xenethyl

나중에 도면을 편집 할 수있게하려면 toDataURL 접근 방식에 문제가 있습니다.

최근 다른 저장 방법과 실행 취소/다시 실행 기능으로 sketch.js를 구현했습니다.

나는 Github의 this issue에있는 질문에 답변했습니다.

» My full implementation incl. undo/redo

# this is what I save via AJAX 
dataURL: -> JSON.stringify(@getSketch().actions) 

load: (id) -> 
    $.ajax "#{@getContainer().data("target-url")}/#{id}.json", 
    success: (data, status, xhr) => 
     sketch = @getSketch() 
     $.each data.json_data, -> sketch.actions.push(this) 
     sketch.redraw() 
    error: (xhr, status, msg) => alert("Failed to load sketch! #{xhr.status}: #{msg}")

이 CoffeeScript, 당신 수 convert it to JS 당신이 좋아하지만, 얻을 경우 약간 비밀이다.

출처

2013-10-23 02:37:29

JS로 스케치

답변

관련 문제