Rev. 2.73

fancygestures.gif
fancygestures2.gif

Fancy Gestures는 마우스 커서를 일정한 방향으로 드래그하여 특정한 이벤트를 발생시킬 수 있게하는 jQuery용 플러그인으로 만들어진 자바스크립트 마우스 제스처 라이브러리 입니다. 위 화면은 이 플러그인의 데모로서 기본으로 내장되어 있는 문자인식 제스처를 사용하는 모습입니다. 초기 팜파일럿의 문자인식 제스처를 연상시키네요. 제스처를 설정하는 방법은 간단합니다. 좌측 그림을 참고하여 마우스 커서의 위치를 중심으로 여덟방향에 해당하는 번호 0부터 7사이의 숫자를 진행순서대로 나열하고 "jquery.fancygestures.js" 파일에 정의하면 숫자조합에 제스처를 대조하여 지정한 이벤트를 발생시키게 됩니다. '616'과 같은 페턴은 영문 'N'을 출력하는 것이죠. 소스를 까보니 이동경로를 페턴과 매치 시키려고 복잡스러운 수학 계산식을 수행하더군요.

jquery.fancygestures.js 파일을 열어 사용자 정의를 추가한 후

    gestures[" "] = "0";
    gestures["?"] = "6701232";
    gestures["Back"] = "4" // added by firejune
    .
    .

다음 처럼 적용합니다.

  $(document.body).fancygestures(function (data) {
    if (data == "Back") history.back();
  });

참고로, 함께 사용되는 wz_jsgraphics.js는 커서의 진행 방향을 출력하기 위한 것으로 없어도 무방합니다.

Comments

Phototype은 PHP의 GD라이브러리와 Prototype 자바스크립트 라이브러리를 이용하여 이미지 프로세싱을 할 수 있는 흥미로운 자바스크립트 라이브러리입니다. 이미지의 리사이즈, 회전, 플립, 드랍쉐도, 캡션, 각종 필터 효과 등을 메서드 체인 형식의 코딩으로 적용할 수 있습니다. 아래처럼 말이죠.

l_oPhoto = new Photo().load("test.jpg").dropShadow().flipH().makeSketchy();
document.body.appendChild(l_oPhoto.fetch());

Phototype은 이 코드를 서버로 전송하여 렌더링 된 이미지를 수신하고 디스플레이 합니다. 아래 사진은 직접 설치하여 테스트한 것입니다. 640 x 427 (Quality 70%) 정도의 이미지를 처리하는데 약 0.2초 미만으로 수신합니다. 거의 실시간이네요. 외부 이미지를 로드하거나 경로를 인식하지 못하고, 설정값을 세밀하게 조작할 수 없다는 것이 아쉽기는 하지만 약간만 손보면 매우 쓸만한 이미지 효과를 만들어 낼 수 있을 것으로 보입니다. 재미있게도 "addChuckNorris" 메서드를 사용하면 척 노리스씨가 사진에 오버랩 됩니다. ㅋㅋ

Comments