Pemalam jQuery ImageDrawer.js merealisasikan lukisan dinamik animasi gambar (dengan muat turun kod sumber)_jquery

ImageDrawer.js ialah pemalam jQuery yang boleh melukis animasi imej secara dinamik. Melalui pemalam ImageDrawer.js, anda boleh mencipta proses melukis imej yang dinamik pada halaman Anda boleh mengawal parameter seperti tempoh animasi lukisan, yang sangat menarik.

Paparan kesan Muat turun kod sumber

Cara menggunakan

Menggunakan pemalam gambar yang dilukis secara dinamik ini memerlukan pengenalan fail imagedrawer.css, jquery dan imagedrawer.js ke dalam halaman.

<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>

Struktur HTML

Masukkan gambar yang anda perlu lukis pada halaman.

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

Pemalam permulaan

Selepas elemen DOM halaman dimuatkan, pemalam lukisan imej boleh dimulakan melalui kaedah berikut.

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

Parameter konfigurasi

Pemalam lukisan imej ImageDrawer.js mempunyai parameter konfigurasi berikut yang tersedia.

$(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
}
});

tempoh: tempoh melukis animasi. Boleh menjadi integer atau objek:

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

Pensel sempadan: Masa yang diperlukan untuk melukis sempadan.
PencilShades: Masa yang diperlukan untuk melukis bayang-bayang hitam dan putih.
colorShades: Masa yang diperlukan untuk melukis bayang warna.
fullColors; masa yang diperlukan untuk mengisi warna.
latar belakang: Warna latar belakang kanvas.

panggilan balik: fungsi panggil balik.

pensel: Ikon pensel kecil dipaparkan di atas kanvas.

Di atas ialah pengetahuan tentang pemalam jQuery ImageDrawer.js yang diperkenalkan oleh editor untuk melukis animasi imej secara dinamik (muat turun kod sumber dilampirkan).