شروع کار با konvajs

شروع کار با konvajs

شروع کار با konvajs :

آدرس سایت سازنده : https://konvajs.org/
برای شروع ابتدا konvajs دانلود کنید یا بوسیله CDN های خود سایت درون فایل Html آن را وارد کنید به این صورت :

CDN :
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>

بصورت دستی
<script src="myfolder/konva.js"></script>

خوب حالا به سبک طبقاتی کنوا دقت کنید

 

              Stage
                |
         +------+------+
         |             |
       Layer         Layer
         |             |
   +-----+-----+     Shape
   |           |
 Group       Group
   |           |
   +       +---+---+
   |       |       |
Shape   Group    Shape
           |
           +
           |
         Shape

در طبقه اول  stage وجود دارد stage در واقع  اصلی ترین زمینه برای انجام کار ها است و هر چیزی درون stage  ایجاد می شود

پس در هر صورت شما باید برای هر کاری یک stage  ایجاد کنید

خوب حالا یک stage ایجاد می کنیم

// first we need to create a stage
var stage = new Konva.Stage({
  container: 'container',   // id of container 
  width: 500,
  height: 500
});

در مرحله بعد یک لایه (layer) می سازیم

var layer = new Konva.Layer();

حالا یک شکل (shape) ایجاد میکنیم

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

و شکل رو به لایه اضافه می کنیم

layer.add(circle);

و در مرحله بعد لایه رو به استیج اضافه میکنیم

stage.add(layer);

حالا استیج رو باز بینی می کنیم

layer.draw();

 

کل کد ها در یک نگاه :

// first we need to create a stage
var stage = new Konva.Stage({
  container: 'container',   // id of container 
width: 500, height: 500 }); // then create layer var layer = new Konva.Layer(); // create our shape var circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4 }); // add the shape to the layer layer.add(circle); // add the layer to the stage stage.add(layer); // draw the image layer.draw();

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

چهار + سه =