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

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>

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

15 − هشت =