【JavaScript】【Canvas】【Fabric.js】canvas에 물결선 등의 장식이 있는 선을 그린다
전제
fabric.js 버전 2.3.2
목적
HTML5의 캔버스 위에 임의의 길이의 물결선 등의 장식이 있는 선을 그려가는 방법의 검토.
전법
canvas를 다루는 라이브러리는 Fabric.js을 사용합니다.
이 라이브러리에는 선을 그리는 기능이 있지만,
물결선 등은 그릴 수 없는 것 같습니다.
이번에는 물결선의 이미지를 연속시켜 물결선을 그리는 작전으로 갔습니다.
해봤어
안녕하세요 이런 목목선? 에서 해 보았습니다.
See the Pen 모쿠모쿠 선 그리기 by momosetkn ( @momosetkn ) on CodePen .
해설
HTML5의 캔버스 위에 임의의 길이의 물결선 등의 장식이 있는 선을 그려가는 방법의 검토.
전법
canvas를 다루는 라이브러리는 Fabric.js을 사용합니다.
이 라이브러리에는 선을 그리는 기능이 있지만,
물결선 등은 그릴 수 없는 것 같습니다.
이번에는 물결선의 이미지를 연속시켜 물결선을 그리는 작전으로 갔습니다.
해봤어
안녕하세요 이런 목목선? 에서 해 보았습니다.
See the Pen 모쿠모쿠 선 그리기 by momosetkn ( @momosetkn ) on CodePen .
해설
안녕하세요 이런 목목선? 에서 해 보았습니다.
See the Pen 모쿠모쿠 선 그리기 by momosetkn ( @momosetkn ) on CodePen .
해설
fabric.Image 을 left 속성 (요점은 왼쪽에서 가로 방향의 위치)을 준비한 이미지의 폭을 더해가면서 나란히 갑니다.
늘어놓은 이미지 가운데 우단의 이미지는 이미지를 부분적으로 밖에 사용하지 않기 때문에 width 속성 로 부분적으로 깎도록 합니다.
그리고 마지막으로 fabric.Group#initialize 으로 그룹화합니다.
※그룹화하지 않으면 늘어놓은 화상의 각각이 선택하자마자 엉망으로 선택되어 버립니다
마지막으로
코드 더 깨끗하게 생긴 것 같지만… 뭐 어때?
Reference
이 문제에 관하여(【JavaScript】【Canvas】【Fabric.js】canvas에 물결선 등의 장식이 있는 선을 그린다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/momosetkn/items/99c83efe8ca73459a497텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
