▶이동
  • 상구너 닷컴 블로그를 방문하신 여러분을 환영합니다 :)
  • 스팸 정책에 의해 일부 덧글·방명록차단될 수 있습니다.

Canvas Context 메소드 확장하기.

Study/JScript/JQuery 상구너(smokingbird) 2016.05.10 16:02

Html5의 Canvas 는 html5의 역사가 그리 길지 않은만큼 그 역사 또한 짧습니다.


기능적인 측면에서 이건 왜이렇게 되느냐 부터 시작해서 아쉬운 부분이 많이 보일때가 많아요.


이럴땐 거의 울며 겨자먹기로 기능을 메소드로 감싸서 보완하고 원래의 기능 '인것 처럼' 구현하곤 합니다.


오늘 만난 문제가 그중 하나였는데요.


첫번째로 canvas의 fillText는 기본적으로 멀티라인을 지원하지 않는 문제였습니다.


이는 일일히 text를 잘라서 계산을 해주어야 하는 부분이었습니다. 


구글가서 찾아보신분들은 아마 아실거에요, 이 문제에대한 원성이 얼마나 자자한지..


그리고 대부분의 경우 메소드를 하나 생성해서 해결을 합니다만,


이게 특정 라이브러리에 속해있는 등의 문제를 만나면 조금은 문제가 복잡해지죠.




그래서 이를 해결했습니다.


그랬더니 또 새로운 문제가 튀어나왔어요.



텍스트의 너비(픽셀상 길이) 를 계산해주는 measureText 여러줄의 길이를 모두 합친 길이가 나왔어요.


사용의 경우 canvas와 javascript 를 지원하는 모든 브라우저에서 사용이 가능하고,


코드를 삽입하면 원래사용하던 이름 그대로 사용하도록 기능만 추가해보았습니다.


아래코드를 확인해보세요





위와같이 오버라이딩을 한번 해놓으면 'fillText' 는 \n 으로 줄바꿈이 가능하고, 'measureText' 는 가장 길이가 긴 줄로 길이를 리턴하게됩니다.



canvas fillText override lineBreak newline

저작자 표시 비영리 변경 금지
신고

'Study > JScript/JQuery' 카테고리의 다른 글

클로저(Closure) 의 특성과 응용 그리고 실수  (0) 2017.01.05
Canvas Context 메소드 확장하기.  (0) 2016.05.10
_h5ai audio,video autoplay  (0) 2014.09.29
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.
  • 구너갤러리 15.11.2

    Develop 상구너(smokingbird) 2015.11.16 10:32

    구너갤러리가 업데이트 되었습니다.


    관리를 위해 썸네일을 모두 한자리에서 관리하도록 처리 하였습니다.


    업데이트사항

    - 썸네일을 루트폴더에 /ggthumbnail 에서 모두 관리.


    기본 기능

    - 모바일/PC 반응형 웹

    - PC이용시 키보드로 제어

    - 한곡 반복

    - 파일 하나로 하위디렉토리 전체 갤러리화

    - 디렉토리 구분 출력

    - 압축파일 다운로드 가능하도록 출력

    - 외부 라이브러리 다운받을 필요 없도록 만듬.(jQuery 등)

    - 이미지 바로 다운로드 받기 지원.



    !! 파일 하나로 내 서버가 갤러리가된다!

    !! one-file php image gallery 구너갤러리.


    jQuery 플러그인과 swipebox 플러그인을 이용했습니다.(swipebox 는 약간의 수정이 있었습니다.)


    두가지 파일이 필요합니다.

    .htaccess 와 index.php 두개입니다.

    아래 파일을 받아주세요.


    Pictures.zip







    아래는 index.php 의 php 부분입니다.




    설치는 대략 이렇습니다.


    1. 이미지파일들이 잔뜩 있는 폴더(디렉토리)에 압축을 풀어 넣고

    2. 에디터로 경로를 수정합니다.

    3. 해당 페이지를 브라우저로 접속합니다.



    사용상 문의는 댓글로 ^^



    저작자 표시 비영리 변경 금지
    신고

    'Develop' 카테고리의 다른 글

    mWeb Mac버전 배포  (2) 2016.11.22
    개발자 후원하기.  (0) 2016.07.13
    구너갤러리 15.11.2  (0) 2015.11.16
    구너갤러리 15.11  (0) 2015.11.04
    구너 플레이어 15.11  (1) 2015.11.04
    베지에 곡선 (Bezier Curve)  (1) 2015.09.04
    0 0
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.