jQuery 플러그인 ImageDrawer.js는 그림 애니메이션의 동적 그리기를 구현합니다(소스 코드 다운로드 포함)_jquery

ImageDrawer.js는 이미지 애니메이션을 동적으로 그릴 수 있는 jQuery 플러그인입니다. ImageDrawer.js 플러그인을 통해 페이지에 이미지를 그리는 동적 프로세스를 생성할 수 있으며, 매우 흥미로운 그리기 애니메이션 지속 시간과 같은 매개변수를 제어할 수 있습니다.

효과 표시 소스 코드 다운로드

사용방법

이 동적으로 그려진 그림 플러그인을 사용하려면 페이지에 imagedrawer.css, jquery 및 imagedrawer.js 파일을 도입해야 합니다.

<link rel="stylesheet" href="css/imagedrawer.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagedrawer.js"></script>

HTML 구조

그리는데 필요한 그림을 페이지에 삽입하세요.

<div id="container">
<img id="example" src="img.jpg">
</div>

플러그인 초기화

페이지 DOM 요소가 로드된 후 다음 방법을 통해 이미지 그리기 플러그인을 초기화할 수 있습니다.

$('div#container').drawImage();

구성 매개변수

ImageDrawer.js 이미지 그리기 플러그인에는 다음과 같은 사용 가능한 구성 매개변수가 있습니다.

$(div#container).drawImge({
duration: 20, @number - seconds it's take to draw the entire picture
Instead of specifying the duration on the whole animation,
|| { it's also possible to set the duration of single drawing phases:
borderPencil : 9, @number - seconds it's take to draw the picture by using only the pencil for borders
pencilShades : 6, @number - seconds it's take to draw sharpest shades with black pencil
colorShades : 7.5, @number - seconds it's take to draw first, basic, vanish colors
fullColors : 7.5 @number - seconds it's take to define better all colors on the picture
},
background: '#949494', @string - background color for image while it's been drawing
callback: fn(), @function - function to execute after the last phase
pencil: {
height: '50px',
width : '50px',
src : './img/pencil.png' @string - path to the pencil image
}
});

기간: 애니메이션을 그리는 기간입니다. 정수 또는 객체일 수 있습니다:

{
borderPencil : 9, 
pencilShades : 6, 
colorShades : 7.5, 
fullColors : 7.5 
}

borderPencil: 테두리를 그리는 데 필요한 시간입니다.
pencilShades: 흑백 그림자를 그리는 데 필요한 시간입니다.
colorShades: 색상 그림자를 그리는 데 필요한 시간입니다.
fullColors; 색상을 채우는 데 걸리는 시간입니다.
background: 캔버스의 배경색입니다.

콜백: 콜백 함수입니다.

연필: 캔버스 위에 표시되는 작은 연필 아이콘입니다.

위는 이미지 애니메이션을 동적으로 그리기 위해 에디터가 소개한 jQuery 플러그인 ImageDrawer.js에 대한 지식입니다. (소스코드 다운로드 첨부) 모두에게 도움이 되었으면 좋겠습니다!