Skip to content

Latest commit

 

History

History
145 lines (99 loc) · 7.72 KB

README.fa.md

File metadata and controls

145 lines (99 loc) · 7.72 KB

Canvas Drawer

یک بسته کوچک و ساده برای نمایش شکل های دو بعدی بر پایه WebGL

میتوانید به زبانهای دیگر هم مطالعه کنید

برای چه کسانی مفید است؟

  • اگر میخواهید مجموعه ای از شکل ها با رنگ ها و Texture های گوناگون را رسم کنید این برنامه برای شما مناسب است.

  • اگر میخواهید قابلیت بزرگنمایی/کوچکنمایی و حرکت روی شکل های رسم شده را به کاربر بدهید، این امکان برای شما فراهم شده.

  • هدف اصلی این برنامه نمایش حجم بزرگی از شکل هایی است که با یکدیگر همپوشانی ندارند. اگر برخی از داده های شما دارای همپوشانی باشند ممکن است در نمایش زمان بزرگنمایی/کوچکنمایی و حرکت با مشکل مواجه شوید. البته در صورتی که از این قابلیت ها استفاده نکنید مشکلی پیش نخواهد آمد.

پیشنیاز ها

این برنامه برای اجرا به کتابخانه های زیر نیاز دارد:

مستندات مربوط به فایل ها

مستندات مربوط به توابع داخل هر فایل که از روی JSDoc ساخته شده است هم از طریق لینک های زیر قابل دسترسی است:

برای تولید این فایل ها باید از jsdoc-to-markdown ممنون باشیم.

روش استفاده

همیشه اولین کار افزودن اسکریپت نهایی به برنامه است ولی پیش از آن از اینکه پیشنیاز هارا اضافه کرده اید اطمینان حاصل کنید:

<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/earcut/src/earcut.js"></script>

حالا که پیشنیاز ها را اضافه کردیم میتوانید به سراغ برنامه خودمان برویم:

<script src="../dist/CanvasDrawer.min.js"></script>

حالا ما به یک <canvas> برای رسم نیاز داریم. پس آنرا اضافه میکنیم:

<canvas id="myCanvas" width="1000" height="700"></canvas>

تعریف مقادیر اولیه

حالا نوبت به استفاده از آن رسیده. روش استفاده بسیار ساده و زیباست:

var cd = new CanvasDrawer({
    'id': 'myCanvas',
    'errorFunction': ()=>alert("امکان بارگذاری WebGL برای شما وجود ندارد"),
    'cartographer': true
});

برای اطلاع دقیق تر از نحوه وارد کردن اطلاعات می توانید به فایل مستندات مربوط به CanvasDrawer رجوع کنید. ولی به صورت خلاصه به بعضی از موارد مهمتر اشاره میکنیم.

مقدار id نشان دهنده شناسه Canvas ما است.

مقدار errorFunction یک تابع را مشخص میکند که در صورت به مشکل خوردن بارگذاری اجرا میشود.

یکی از قسمت های جذاب این برنامه همان چیزی است که مقدار cartographer مشخص میکند. این کلید یک مقدار boolean گرفته و مشخص میکند که آیا میخواهید تا کاربر بتواند با استفاده از موس خود روی Canvas برگنمایی/کوچکنمایی و یا حرکت کند با نه.

رسم شکل

برای توضیح بهتر به قطعه کد زیر توجه کنید:

cd.loadTextures(textures, (data) => {
    cd.drawer.setTextureEnable();
    cd.drawer.setTextureResolution(512, 512);
    cd.drawer.setUseTexture(data['images/a.jpg']);
    cd.addPolygon([0,0, 256,0, 256,256, 0,256]);
    cd.justDraw();

    cd.drawer.setTextureUserTranslation(128, 128);
    cd.drawer.setTextureResolution(768, 768);
    cd.drawer.setUseTexture(data['images/b.jpg']);
    cd.addPolygon([128,128, 512,128, 512,512, 128,512]);
    cd.justDraw();

    cd.drawer.setColorEnable();
    cd.addCircle(250,250,50,15);
    cd.draw(1,0,0,1);
});

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

  • cd.drawer یک Object است که وظیفه ارتباط با WebGL را دارد.
  • اگر بخواهیم از یک Texture استفاده کنیم باید ابتدا در یکی از واحد های Texture بارگذاری شوند. هر واحد با یک عدد صحیح غیر منفی مشخص میشود.

تابع cd.loadTextures دو مقدار را برای ورودی میگیرد. اولی شامل لیستی از آدرس های مربوط به تصاویری است که میخواهیم به عنوان Texture از آنها استفاده کنیم. دومی هم یک تابع Callback است که پس از اینکه تمام تصاویر در واحد ها بارگذاری شدند فراخوانی میشود و یک آرایه انجمنی نیز به آن پاس داده میشود (data)

cd.drawer.setTextureEnable مشخص کننده این است که شکلی که حالا میکشم قرار است یک Texture داشته باشد. به مشابه همین موضوع cd.drawer.setColorEnable بیان کننده این است که قرار است از یک رنگ برای شکل استفاده کنیم.

cd.drawer.setTextureResolution مشخص میکند که اندازه این عکس به ۵۱۲x۵۱۲ تنظیم شود.

cd.drawer.setUseTexture مشخص میکند که میخواهیم کدام یک از Texture هایی که بارگذاری شده اند را استفاده کنیم. data یک نگاشت است از آدرس فایل به شماره واحدی که آن فایل در آن بارگذاری شده است.

cd.addPolygon یک مربع با مختصات مشخص شده را مثلث بندی کرده و مختصات آن را در خافطه نگه میدارد.

cd.justDraw تمام مثلث هایی را که تا این لحظه در حافظه هستند را رسم میکند.

‍cd.draw مشابه cd.justDraw است با این تفاوت که میگوییم آن چیزی که میخواهیم رسم شود به رنگ قرمز باشد. چرا که چهار پارامتر ورودی این تابع مشخص کننده مقادیر r، g، b و a هستند.

برای توسعه دهندگان

اگر شما قصد توسعه این برنامه را دارید لازم است برای راحتی کار شما چند نکته را از پیش مطرح کنم.

اسکریپت compile

احتمالا تغییراتی را در برنامه ایجاد کرده اید و میخواهید از آن فایل های نهایی و قابل انتشار (distribution) را تولید کنید. یا لازم است تا مستندات تولید شده از روی JSDoc ها بروز رسانی شوند.

کافی است تا اسکریپت compile را اجرا کنید!

npm run compile

مجوز استفاده

این بسته تحت مجوز Apache license 2.0 منتشر شده است.