در این پست برنامه ای را قرار می دهم که می خواهد یک فایل زبان سی یا سی پلاس پلاس را با فرمت c. یا cpp. بگیرد و پشته ی فراخوانی  (CallStack) آن…

ادامه مطلب ←

مارتین لوتر کینگ در بخش سوم اتوبیوگرافی خود، درباره‌ی ابرانسان نیچه این گونه می‌گوید: “در نظر نیچه ابرانسان کسی است که می‌خواهد انسان را چنان شگفت زده کند که انسان بوزینه را شگفت زده کرد.“

Snap.svg یک فریم‌ورک جاوااسکریپت است که می‌تواند برای طراحی و انیمیت یا پویانمایی گرافیک‌هایی بر پایه‌ی svg مورد استفاده قرار گیرد.

اسنپ.اس‌وی‌جی را دمیتری بارانوفسکی طراحی کرده است، طراح رافائل‌جی‌اس. دمیتری از بچه‌های خط ادوبی‌ست.

قبل از شروع چند دموی جالب ببینید.

در ابتدا

خب، برای شروع می‌تونیم مخزن اسنپ رو از گیت‌هاب دریافت کنیم و فایل dist/snap.svg-min.js رو توی یه فایل اچ‌تی‌ام‌ال فراخوانی کنیم.

یا می‌تونیم فقط خود فایل رو دریافت کنیم.

برای استفاده راحت‌تر از اسنپ می‌تونیم یه متغییر واسه سلکتور تعریف کنیم.

var s = Snap("#svg");

نکته:کد خودمون رو باید توی تابع window.onload قرار می‌دیم. به این صورت:

window.onload = function(){
	var s = Snap("#svg");
};

نیاز هست که توی body صفحمون یه تگ svg قرار بدیم و id اون رو برای مثال بذاریم svg که بتونیم با سکلتورمون باهاش کار کنیم.

رسم اولین شکل
اولین شکلی که میخوایم بکشیم یه دایرس. اینجوری میکشیمش:

window.onload = function(){
	var s = Snap("#svg");
	var bigCircle = s.circle(150, 150, 100);
};

در تابع circle که برای رسم دایره استفاده میشه، عدد اول x، عدد دوم y و عدد سوم شعاع دایرمونه. رنگ دایرمون به صورت پیش‌فرض سیاهه.
نتیجه رو می‌تونید دریافت کنید و ببینید.

خب، یکم رنگ کنیم دایرمون رو؟ این چند خط که صفات معمولی svg هستن رو به کدمون اضافه می‌کنیم. این صفات به ترتیب رنگ شکل، رنگ دیواره و سایز دیواره هستن. همونطور که مشخصه از element.attr برای دادن صفت به شکلمون استفاده می‌کنیم.

bigCircle.attr({
	fill: "#bada55",
	stroke: "#000",
	strokeWidth: 5
});

دایرمون اینجوری میشه:

انیمیت کردن
با استفاده از تابع animate می‌تونیم. به این شکل:

bigCircle.animate({r: 50}, 1000);

برای آرگومان اول صفت یا صفاتی رو قرار میدیم که قراره انیمیت بشن. که در بند بالا ما r یا همون شعاع رو برای این کار انتخاب کردیم.
آرگومان دوم هم زمان هست که بر حسب میلی‌ثانیه سنجیده می‌شه.
انیمیت به این صورت اتفاق میفته که شعاع دایره در عرض یه ثانیه از 150 به 50 تغییر می‌کنه.
نتیجه‌ی کار تا به اینجا رو می‌تونید دریافت کنید و ببینید.

تابع animate آرگومان‌های دیگه‌ای هم داره. برای مثال دوتا از اونا توابع easing و callback هستن.
توابع easing توابعی هستن که برای انیمیت کردن استفاده میشن. در اسنپ تابعی وجود داره به اسم mina که شامل انیمیت‌های از-پیش-آماده‌یی هست که برای سهولت کار در اختیار ما قرار گذاشته شدن. مثلن تابع elastic یکی از تابع‌های موجود در minaست و برای ما انیمیت کشسانی ایجاد میکنه. استفاده از mina به این صورته:

bigCircle.animate({r: 50}, 1000,mina.elastic);

میتونیم یه خط دیگه هم اضافه کنیم و توی اون روی y کار کنیم. صفت cy صفتیه که توی svg برای کار روی y استفاده میشه. پس به این صورت عمل می کنیم:

bigCircle.animate({cy: 200}, 1000,mina.bounce);

از تابع mina.bounce برای ایجاد انیمیتی مثل به زمین خوردن و بلند شدن توپ استفاده کنیم.

وارد کردن فایل svg
ما می‌تونیم فایل svg مورد نیاز خودمون رو وارد کنیم و باهاش کار کنیم. مثلن یه ابر. به این شکل عمل می‌کنیم:

Snap.load('img/cloud.svg', function (f){
	s.append(f);
}); 

و با خط زیر یه انیمیت هم بهش میدیم

var cloudsvg = s.select("#cloudsvg");
cloudsvg.animate({transform: "t" + (1500)}, 50000);

توی خط اول ما یه id سلکت کردیم، cloudsvg که اون رو توی فایل svgمون از قبل تعریف کردیم و در واقع idی ابرمونه.
توی خط بعد از تابع animate استفاده کردیم و می‌خوایم با خواصیت transform کار کنیم. اسنپ از تابع matrix برای اعمال انیمیت استفاده می کنه. پیشنهاد میدم این مقاله رو بخونید.
این که چرا t رو اینجا نوشتیم علتش اینه که توی اسنپ نماینده‌ی translate هست. البته هنوز توی داکیومنت اسنپ چیزی از این مخفف‌ها گفته نشده ولی با رجوع به فایل این قسمت رو دیدم:

if (command == "t" && tlen == 2){
    m.translate(t[1], 0);
} else if (command == "t" && tlen == 3) {
    if (absolute) {
        x1 = inver.x(0, 0);
        y1 = inver.y(0, 0);
        x2 = inver.x(t[1], t[2]);
        y2 = inver.y(t[1], t[2]);
        m.translate(x2 - x1, y2 - y1);
    } else {
        m.translate(t[1], t[2]);
   }...

توی گیت‌هاب میتونید بهتر متوجه این موضوع بشید.

با خوندن داکیومنت اسنپ و تسلط روی می‌تونید کارای خیلی جالبی انجام بدید.
در اینجا هم آموزش‌های ابتدایی‌ی سایت اسنپ رو می‌تونید ببینید.
این رو هم می‌تونید آزمایش کنید.

من با چیزایی که کار کردیم اینو درست کردم:

فایل‌ها رو می‌تونید از اینجا دریافت کنید و ببینید.
ادامه مطلب ←

کارت‌های گرافیک NVIDIA به دلیل قدرت زیادی که دارند در بین کاربران دنیای کامپیوتر بسیار محبوب هستن، از اونجایی هم که اصولا درصد بالایی از کاربران لینوکس، از ویندوز به … ادامه

ادامه مطلب ←

  اگر شما کار طراحی و گرافیکی انجام میدین شاید این فرصتی باشه تا هنر خودتون رو توی فدورا نیز به نمایش بزارید.تیم طراحی فدورا برای نسخه آینده یعنی Fedora … ادامه

ادامه مطلب ←

اگه شما با Fedup فدورا ۱۸ رو به فدورا ۱۹ آپگرد کرده باشید حتما شاهد این هستید که Boot Loader Grub به صورت سیاه و سفید در اومده و Theme … ادامه

ادامه مطلب ←

نرم افزار Cademia یک سیستم نوین با قابلیت های کامل برای ایجاد نقشه های فنی دقیق و اسناد می باشد.این برنامه ویژه دانشجویان رشته معماری و مهندسین عمران و سایر … ادامه
مطالب مرتبط :

1. لذت پخش موسیقی با نرم افزار Exaile
2. مدیریت آسان iPod با نرم افزار قدرتمند gtkPod
3. پارتیشن بندی و مدیریت هارد دیسک با نرم افزار GParted
4. تماشا و دانلود ویدئوهای یوتیوب با نرم افزار Minitube
5. معرفی نرم افزار مدیریت دانلود uGet
6. با نرم افزار Mixxx یک DJ حرفه ای شوید
7. نرم افزار پخش کننده موسیقی مدرن و شگفت انگیز clementine

ادامه مطلب ←

هر کدوم از نسخه های فدورا داری یک تصویر پس زمینه ویژه است که تیم طراحی فدورا اون رو طراحی میکنن.این تیم برای نسخه Fedora 18  که نام اون گاو … ادامه
مطالب مرتبط :

1. انتشار فدورا 17 برای معماری PPC
2. انتشار نسخه نهایی فدورا 17 با معماری ARM
3. یک هفته تاخیر دیگر در انتشار فدورا 18 آلفا
4. فدورا 16 آلفا منتشر شد
5. پیشنهاد اسم رمز برای فدورا 17
6. فدورا ۱۸ نامگذاری شد
7. انتشار فدورا 17 بتا برای معماری ARM

ادامه مطلب ←

اگر اهل کارای گرافیکی هستید و به گنو/لینوکس کوچ کردید، اولین چیزی که خیلی شما رو از گیمپ نا امید می کنه، اینه که در فتوشاپ بخشی به نام layer style … ادامه مطلب ←

مجموعه ای کوچک از آیکن هایی برای طراحان وب

در صورت نیاز به رمز : www.itutplus.wordpress.com
لینک دانلود:
http://www.mediafire.com/download.php?8hkq8nvvuz77qrr
ادامه مطلب ←

Inkscape یک نرم افزار متن باز و کاملا مجانی برای طراحی گرافیکی وکتوری می باشد. به حول و قوه ی الهی تولید یک سری آموزشی برای این نرم افزار را آغاز کرده ام که انشاالله آن را به پایان برسانم.قسمت اول از این آموزش شامل توضیحات کلی نرم افزار و شروع کار با نرم افزار

Read More… ادامه مطلب ←