امروزه کتابخانه های بسیاری برای راحتتر کردن کار با جاوا اسکریپت ارائه شده اند و برخی پا را فراتر گذارده و امکانات جدیدی را به جاوا اسکریپت اضافه می کنند امروز می خواهیم یکی از این کتابخانه ها را معرفی و کمی هم درباره نحوه ی استفاده ی آن بگوییم.
مقدمه ای بر jCanvas ترکیب کد های jQuery با Canvas در HTML5
jCanvas چیست ؟
سایت jCanvas توضیح می دهد :
jCanvas یک کتابخانه JavaScript است ، که با jQuery برای jQuery نوشته شده است. که بر روی API HTML5 canvas کار میکند. و امکان افزودن امکانات و توانایی های جدیدی را می دهد. که خیلی از آنها قابل سفارشی شدن هم هستند. مثلا لایه ها . رخداد ها ، دراگ و دراپ، انیمیشن ها . و خیلی موارد دیگر .
نتایج بسیار منعطف و شیرین هستند. توابع jQuery به canvas در HTML5 قدرت و انعطاف پذیری بیشتری می دهند.
jCanvas بشما اجازه انجام همه کارهای معمول با Canvas را می دهد و امکانات افزون تری هم دارد.شما می توانید از متدهای خود Canvas نیز در jCanvas استفاده کنید. draw() method در همین قاعده عمل می کند . شما براحتی می توانید jCanvas را با متد های خود و ویژگی های منحصر بفرد با استفاده از extend() feature گسترش دهید.
افزودن jCanvas به پروژه خود
برای افزودن jCanvas به پروژه خود download the script (لینک به http://projects.calebevans.me/jcanvas/downloads/) را از وبسایت رسمی یا the GitHub page (https://github.com/caleb531/jcanvas) دانلود کنید. سپس آن را در پوشه پروژه خود قرار دهید. همانطور که اشاره شد jCanvas با کد های jQuery کار می کند و برای کار نیاز به jQuery دارد .
در پروژه شما اسکریپت ها باید چیزی شبیه کد های زیر باشد.
<script src="js/jquery.min.js></script>
<script src="js/jcanvas.min.js></script>
<script src="js/script.js></script>
کد آخر برای درج کد های ویژه و اختصاصی شده JavaScript به کمک jCanvas است . بگذارید کار با jCanvas را همینجا شروع کنیم.
ایجاد یک فایل HTML
برای ادامه مثال نیاز به افزودن تگ <canvas> به سند HTML5 خود داریم.
<canvas id="myCanvas" width="600" height="300">
<p>This is fallback content
for users of assistive technologies
or of browsers that don't have
full support for the Canvas API.</p>
</canvas>
چند نکته جذاب در باره کد های ساده ی بالا.
1. بصورت پیشفرض ابعاد تصویر رسم شده در سطح <canvas> 300px * 150px است شما می توانید این اندازه را تغییر دهید کافیست از ویژگی های width و height در HTML استفاده کنید.
2. افزودن یک ایدی اصلا ضروری نیست ولی کمک می کند که JavaScript راحت تر به آن تگ دسترسی داشته باشد.
3. محتوای داخل <canvas> تنها تصاویر بیت مپ هستند و این باعث می شود برخی کاربران و برخی مرور گر ها امکان دسترسی به محتوای آن را نداشته باشند.
اگر یک Canvas معمولی می خواهید کد JavaScript شما چیزی شبیه کد زیر است.
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
متغیر های کد بالا برای محتواهای دو بعدی طراحی شده اند و به شما امکان دسترسی به تمام امکانات موجود و محیا شده توسط HTML5 و Canvas را میدهند.
متد های jCanvas نیز بر پایه دو بعدی طراحی شده اند بگذارید مستقیم برویم سراغ رسم در Canvas به کمک jCanvas.
لایه های در Canvas
اگر تا حالا از نرم افزار های ویرایش عکس شبیه فتوشاپ یا گیمپ استفاده کرده باشید . میدانید لایه ها چه هستند. لایه ها کمک می کنند شما بتوانید هر تصویری در بوم خود را در لایه جداگانه و کاملا مستقل خود رسم کنید.
jCanvas رابط کاربری قدرتمندی را برای لایه ها پیشنهاد می دهد که انعطاف را به بوم شما می افزاید.
وی این هم چگونگی استفاده از لایه ها در jCanvas
افزودن لایه ها
شما تنها می توانید یک شیئ در هر لایه بکشید و شما همچنین می توانید به دو روش لایه های جدید به jCanvas پروژه ی خود اضافه کنید.
1. استفاده از متد addLayer() همراه با استفاده از متد drawLayers()
2. درج ویژگی true برای لایه در داخل در متد ترسیمی .
در زیر از تکنیک اول برای رسم یک مستطیل آبی استفاده کرده ایم.
$myCanvas.addLayer({
type: 'rectangle',
fillStyle: 'steelblue',
fromCenter: false,
name: 'blueRectangle',
x: 50, y: 50,
width: 400, height: 200
}).drawLayers();
و این هم متد دوم برای رسم همان مستطیل
$myCanvas.drawRect({
fillStyle: 'steelblue',
layer: true,
name: 'blueRectangle',
fromCenter: false,
x: 50, y: 50,
width: 400, height: 200
});
همانطور که در تصاویر می بینید نتیجه یکی است.
چیزی که بسیار مهم است نام گذاری لایه ها با کمک ویژگی name است که امکان افزودن و نسبت دادن کد به آن ها را راحت تر می کند همچنین امکان تغییر مکان لایه ها و متحرک سازی آن ها و حتی حذف و سایر موارد را هم ساده تر می کند.
بگذارید کمی از این موارد را اینجا انجام دهیم.
متحرک سازی لایه ها.
در jCanvas شما به آسانی با متد ()animateLayer می توانید انیمیشن را به نقاشی های موجود در لایه ها به نسبت دهید . این متد پارامتر های زیر را می پذیرد.
index یا name برای لایه ها
یک شیئ با یک جفت key-value در قیسمت ویژگی ها برای متحرک سازی
طول انیمیشن بر حسب میلی ثانیه . این امکان انتخابی است اگر آن را خالی بگذارید روی 400 میلی ثانیه پیش فرض خواهد بود
نوسان کاهشی انیمیشن اگر این پارامتر را خالی بگذارید بطور پیش فرض روی swing تنظیم می شود.
متغییر callback که وقتی انیمیشن به پایان برسد فراخوانی خواهد شد.
ما یک دایره نارنجی کمی محو را در یک لایه کشیده ایم . سپس مکان و رنگ و وضوح آن را متحرک کرده ایم . برویم ببینیم چگونه متد ()animateLayer در عمل کار خواهد کرد.
// Draw circle
$myCanvas.drawArc({
name: 'orangeCircle',
layer: true,
x: 50, y: 50,
radius: 100,
fillStyle: 'orange',
opacity: 0.5
});
// Animate the circle layer
$myCanvas.animateLayer('orangeCircle', {
x: 150, y: 150,
radius: 50,
}, 1000, function(layer) { // Callback function
$(this).animateLayer(layer, {
fillStyle: 'darkred',
x: 250, y: 100,
opacity: 1
}, 'slow', 'ease-in-out');
});
تصویر زیر را ببینید
لایه های قابل دراگ شدن
کاری که قصد انجام آن را دارم استفاده از امکان دراگ کردن لایه ها است که در jCanvas تنها کافیست ویژگی draggable را روی true تنظیم کنم.
این هم از کد ها:
$myCanvas.drawRect({
layer: true,
draggable: true,
bringToFront: true,
name: 'blueSquare',
fillStyle: 'steelblue',
x: 250, y: 150,
width: 100, height: 100,
rotate: 80,
shadowX: -1, shadowY: 8,
shadowBlur: 2,
shadowColor: 'rgba(0, 0, 0, 0.8)'
})
.drawRect({
layer: true,
draggable: true,
bringToFront: true,
name: 'redSquare',
fillStyle: 'red',
x: 190, y: 100,
width: 100, height: 100,
rotate: 130,
shadowX: -2, shadowY: 5,
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.5)'
});
ما در این تمرین از ویژگی draggable: true استفاده کرده ایم و همچنین از ویژگی bringToFront زیرا که می خواستیم وقتی شئی گرفته و کشیده می شود روی شی دیگر قرار بگیرد در واقع ما دو لایه حاوی دو مستطیل داریم که با دراگ کردن هم جا به جا می شوند و هم لایه ها روی یکدیگر می لغزند.
در پایان کد چرخاندن لایه ها و درج سایه box shadow است که فقط آنها را گذاشتم تا بدانید اگر لازم شدند چگونه از آنها استفاده کنید.
نتیجه کار باید شبیه شکل زیر باشد.
اگر دوست دارید نرم افزار شما کاری قبل یا هنگام یا بعد از جابه جایی یک لایه قابل دراگ شدن انجام دهد. jCanvas این کار را بسادگی انجام می دهد در واقع این کار توسط توابع callback در طی رخداد های مربوطه امکان پذیر است.
1. dragstart . برای اعمال جلوه ای به هنگام شروع دراگ شدن .
2. drag برای اعمال جلوه ای در هنگام دراگ شدن
3. dragstop جلوه ایی برای هنگام متوقف شدن عمل دراگ لایه
4. dragcancel جلوه ای برای هنگامی که عمل دراگ به خارج از محدوده ی بوم می رود.
اگر دوست دارید نوشته ای با پایان دراگ شدن لایه ای نمایش داده شود باید کدی را در رخداد dragstop درج کنید :
$myCanvas.drawRect({
layer: true,
// Rest of the code as shown above...
// Callback function
dragstop: function(layer) {
var layerName = layer.name;
el.innerHTML = 'The ' + layerName + ' layer has been dropped.';
}
})
.drawRect({
layer: true,
// Rest of the code...
// Callback function
dragstop: function(layer) {
var layerName = layer.name;
el.innerHTML = 'The ' + layerName + ' layer has been dropped.';
}
});
بعد از دراگ کردن یک پیام به شما می گوید که مستطیل چه رنگی دراگ و دراپ شده است به تصویر زیر نگاه کنید.
