konva ایجاد یک نوشته

به نام خدا

امروز با ساخت یک نوشته توسط kova در خدمت شما عزیزان هستم

نوشته در کنوا با قبلیت زمینه بصورت های رنگ ، گرداینت خطی و حلقوی و تصویر می تونید بسازید

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

در مثال زیر ما تنها یک نوشته ساده با زمینه رنگ ایجاد کردیم

<div id="runing"></div>
<script>

var stage = new Konva.Stage({
        container: 'runing',
        width:150,
        height: 100
    });

    // add canvas element
    var layer = new Konva.Layer();
    stage.add(layer);

var text = new Konva.Text({
  x: 10,
  y: 15,
  text: 'Simple Text',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green'
});

layer.add(text );

    layer.draw();

که در خط

fill: 'green' 

رنگش رو مشخص کردیم در fill میتونید از اسم رنگ و کد hex استفاده کنید چیزی شبیه این #0073aa که به این صورت می شود

fill: '#0073aa'

حالا می خوایم از گرادینت برای زمینه اون استفاده کنیم

برای اینکار باید ویژگی fillPriority را به حالت  linear-gradient تغییر بدیم که بصورت زیر خواهد بود

var text = new Konva.Text({
  x: 10,
  y: 15,
  text: 'Simple Text',
  fontSize: 30,
  fontFamily: 'Calibri',
  fillPriority: ' linear-gradient'
});

وبعد از اون باید fillLinearGradientStartPoint و fillLinearGradientEndPoint رو مشخص کنیم

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

var text = new Konva.Text({
  x: 10,
  y: 15,
  text: 'Simple Text',
  fontSize: 30,
  fontFamily: 'Calibri',
  fillPriority: ' linear-gradient',
  fillLinearGradientStartPoint: { x: -50, y: -50 },
  fillLinearGradientEndPoint: { x: 50, y: 50 },
});

آخرین محرله قرار دادن استوپ های رنگی است که محل نمایش هر رنگ رو مشخص می کنه که بصورت آبجکت قرار میگیره

[0, 'red', 1, 'yellow']

یه درجه از صفر تا 1 رو تصور کنید رنگ قرمز از 0 شروع میشه و رنگ زرد از 1 یعنی زمانی رنگ قرمز تموم میشه درجه ما یک با شد که رنگ زرد اجرا میشه همین طور به ترتیب به جلو میریم

حالا بزارید مثال بصورت عملی ببینیم

<div id="runing1"></div>
<script>

var stage = new Konva.Stage({
        container: 'runing1',
        width:400,
        height: 400
    });

    // add canvas element
    var layer = new Konva.Layer();
    stage.add(layer);

var text = new Konva.Text({
  x: 10,
  y: 15,
  text: 'Simple Text',
  fontSize: 70,
  fontFamily: 'Calibri',
  fillPriority: ' linear-gradient',
  fillLinearGradientStartPoint: { x: -50, y: -50 },
  fillLinearGradientEndPoint: { x: 100, y: 100},
  fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});

layer.add(text );

    layer.draw();

</script>