به نام خدا
امروز با ساخت یک نوشته توسط 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>