آموزش ساخت اشکال مختلف با konva بخش اول

سلام وعرض ادب

توی این بخش می خوام به شما توضیح بدم که چطور می تونید از طریق konva شکل های مختلفی بسازید

توی سایت خود konva به مثل هایی اشاره شده که بنده براتون توضیح میدم

اگر بخوایم شکل ها رو در Konva دسته بندی کنیم  چنین چیزی بدست میاد

Rect : مستطیل

Circle : دایره

Ellipse : بیضی

Wedge :  گوه ( به تکه ای از دایره )

Line : که انواع مختلفی داره

Sprite : شکلی که تشکیل شده از چند تصویر است

image : تصویر

Text : نوشته

Star : ستاره

Ring : حلقه

Arc : بخشی از حلقه

RegularPolygon : چند ظلعی

custom  : به مفهوم سفارشی که توضیح میدم

 

تک تک بصورت کامل توضیح میدم :

Rect یا مستطیل  : شامل هر شکل چهار گوشی می شود یعنی شما هم می تونید بااین دستور مربع بسازی هم مستطیل

خب دستور چیه :

Konva.Rect({مشخصات شکل })

یه مثال بزنم :

var rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
      });

به مثال بالا دقت کنید بنده یک ظرف ساختم به نام rect1 بعد اومدم گفتم یک آبجکت جدید ایجاد کن از konva زیر مجموعه rect  که مشخصاتش این باشه یعنی در محوریت x و y    قرار بگیره  وwidth  (طول) و height (ارتفاع) این باشه  رنگش (fill) سبز باشه و خط دورش (stroke) رنگش سیاه باشه  تازه خط دورشم (strokewidth) مقدارش 4 باشه

بعد از ایجاد شکل باید اونو به لایه اضافه کنیم

دستور کامل توی این صفحه هست میتویند نگاه کنید konva.rect

خب بریم سراغ توضیح تمام ویزگی ها و جزئیات rect البته این ویژگی اکثریت در تمام شکل های konva پیدا میشه

 

 

خب با توجه به جدولی که دید کافی فقط دستور را برای ساخت شکل تغییر دهیم یعنی

بجای rect از Circle برای ساخت دایره استفاده میشه

خوب تفاوت هاشون چیه؟  توی دایره چیزی به نام radius داره که  شعاع دایره تعیین می کنه یعنی هرچقدر بیشتر باشه شعاع دایره بزرگ تر میشه

نمونه کد چنین چیزی خواهد شد

var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });

شکل بعدی Ellipse که ویژگی خاصش اینه که شما محور x , y شعاع رو تایین می کنید یعنی این کد

var oval = new Konva.Ellipse({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radiusX: 100,
        radiusY: 50,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
      });

شکل بعدی Wedge یا بخشی از دایره است  که سه  ویژگی اصلی داره یک شعاع radius و دوم زاویه angle که زاویه جدا شده از دایره رو نشون میده و سوم rotation که محور چرخش رو نشون میده مثلا از 360 درجه شما می گید در 90 درجه یه زاویه 60 درجه ایجاد کن

به مثال دقت کنید  که یک زاویه 60 با شعاع 70 و در محوریت -120 درجه ایجاد کرده

var wedge = new Konva.Wedge({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        angle: 60,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        rotation: -120,
      });

خوب به ساخت خط رسیدیم بصورت عادی خط  با Konva.Line() ایجاد میشه  و ویژگی ویژه در ایجاد نقاط مختلف بر ایجاد خط است points خوب به مثال زیر دقت کنید

var redLine = new Konva.Line({
points: [5, 70, 140, 23, 250, 60, 300, 20],
stroke: 'red',
  strokeWidth: 15,
  lineCap: 'round',
  lineJoin: 'round',
  });

خوب دقت کنید مبنید یک سری عدد بصورت آرایه جلوی points  قرار گرفتن  که اگر بخوایم اونو بخونید به این صورت میشه [x1, y1, x2, y2, x3, y3] یعنی شروع خط x = 5 , y = 70  و بهمین ترتیب تا پایان خط  که میشه  x = 300 , y = 20  بقیه ویژگی ها مثل  stroke , strokeWidth ,lineCap ,lineJoin توی جدول توضیح اومده 

 

یه سبک دیگه از استفاده از لاین وجود داره اونم اینه که بصورت Polygon استفاده بشه یعنی اول و آخر خط به هم وصل میشه با گزینه closed: true

مثل مثال زیر

var poly = new Konva.Line({
points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93],
fill: ‘#00D2FF’,
stroke: ‘black’,
strokeWidth: 5,
closed: true,
});

شما می تونید خط هارو بجای سخط بودن بصورت نرم بسازید  با این کد tension به مثال دقت کنید

var redLine = new Konva.Line({
        points: [5, 70, 140, 23, 250, 60, 300, 20],
        stroke: 'red',
        strokeWidth: 15,
        lineCap: 'round',
        lineJoin: 'round',
        tension: 1,
      });

س