
شروع کار با 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();