Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

Yazılım Makaleleri

0

Canvas ile metin görüntüleme

Canvas etiketi ile metin görüntülemek için kullanılan özellikler ve yöntemler şunlardır.
  • font 
  • fillText 
  • strokeText 
  • textBaseline 
  • textAlign
  • measureText

font Özelliği

font özelliği, metin görüntülemede kullanılacak yazının stilini (kalın / bold, yatık / italic, normal), karakter boyutunu ve yazı tipi adını bildirmek için kullanılır. Değerler tırnak (tek veya çift) içinde aralarına birer boşluk verilerek yazılır.

Örnek :
ctx.font = "italic 20px Arial";
Örnek 2:
ctx.font = "16px 'Courier New'";

fillText Yöntemi:

fillText yöntemi, dolgu stilini kullanarak içi dolgulu metin görüntüler. Bir sonraki strokeText yönteminde göreceğiniz gibi, metinler içi boş olarak da görüntülenebilir.

Kullanımı şöyledir:
fillText(metin,
         metnin yatay / x konumu,
         metnin dikey / y konumu
         en fazla genişlik);
Örnek:
    <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
        Tarayıcınız HTML5 desteklemiyor.
    </canvas><br />
    <input type="button" value="Çiz" onclick="ciz()" />
    <script>
        function ciz() {

            var tuval = document.getElementById("cnTuval");
            var ctx = tuval.getContext("2d");

            ctx.fillStyle = "blue";

            ctx.font = "bold 20px Arial";

            // x=0, y=30 konumunda mavi (dolgu stiliyle) "Merhaba" metnini görüntüle
            ctx.fillText("Merhaba", 0, 30);

        }
    </script>
Çıktı şu şekilde olacaktır:

strokeText Yöntemi:

strokeText yöntemi çizgi stilini kullanarak içi boş / kenarlıklı metin görüntülemek için kullanılır.

Kullanımı:
strokeText(metin,
           metnin yatay / x konumu,
           metnin yatay / y konumu,
           en fazla genişlik);
Örnek:
    <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
        Tarayıcınız HTML5 desteklemiyor.
    </canvas><br />
    <input type="button" value="Çiz" onclick="ciz()" />
    <script>
        function ciz() {

            var tuval = document.getElementById("cnTuval");
            var ctx = tuval.getContext("2d");

            ctx.strokeStyle = "blue";

            ctx.font = "bold 30px Arial";

            // x=0, y=30 konumunda mavi (dolgu stiliyle) "Merhaba" metnini görüntüle
            ctx.strokeText("Merhaba", 0, 30);

        }
    </script>
Çıktısı şöyle olacaktır:

textBaseline Özelliği:

txtBaseline özelliği metnin verilen konuma göre dikey pozisyonunu belirler. Bu özellik aşağıdaki değerleri alabilir:
  • alphabetic 
  • hanging 
  • bottom 
  • middle 
  • top 
Bu değerlerden varsayılan alphabetic değeridir. Yani yazılmadığında bu değer kabul edilir.

Aşağıdaki şekilde metnin görüntülenmesi için verdiğiniz dikey pozisyonu gri çizginin temsil ettiğini varsaydığınızda verilen değere göre metnin nerede görüntüleneceği gösterilmektedir.


textBaseline özelliğinin varsayılan değeri alphabetic olduğundan, eğer bir metni dikey olarak 0 konumunda görüntülemek isterseniz metin görünmez Bunun nedeni şekildeki gri çizginin dikey 0 (y=0 ) konumunu temsil ettiğini varsayarsak yazının çizginin yani 0. pikselin üstüne yazılması ve dolayısıyla tuvalin dışına çıkmasıdır.

Üstteki resimle benzer bir çıktıyı veren örnek:
    <canvas id="cnTuval" width="450" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

// Dikey (y) 20 piksel konumunu yatay, gri bir çizgi çiz.
ctx.strokeStyle = "gray";
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(600, 20);
ctx.stroke();

ctx.font = "16px Arial";
// textBaseline varsayılan değeri alphabetic olduğundan kullanmadık.
// alttaki satılarda kullanılacak.
ctx.fillText("Alphabetic", 0, 20);

ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 90, 20);

ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 180, 20);

ctx.textBaseline = "middle";
ctx.fillText("Middle", 270, 20);

ctx.textBaseline = "top";
ctx.fillText("Top", 360, 20);

}
</script>

measureText Yöntemi:

measureText yöntemi, tuval üzerine çıktı olarak yazılacak metnin yazmadan önce genişliğinin ne olacağını öğrenmek için kullanılır.

measureText yöntemi TextMetrics arayüzünü uygulayan bir nesne (object) döndürür. TextMetrics arayüzünde uygulanacak sadece bir tane özellik vardır. O da metnin genişliğini veren width (genişlik) özelliğidir. Yani measureText ile dönen değerin width özelliği ile metin genişliğini öğreniriz.

Metnin genişliğini ölçen ve çıktıya yazan örnek:

<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.font = "16px Arial";
ctx.fillText("Merhaba Dünya.", 5, 20);
ctx.fillText("Genişlik: " + ctx.measureText("Merhaba Dünya.").width, 5, 40);

}
</script>

Çıktı şöyle olacaktır:

Tuval üzerine yazı yazıldığında yazının tuvalin dışına taşan kısmı görüntülenmez.

Dışa taşan yazıya örnek:
    <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.font = "16px Arial";
ctx.fillText("Bizim buranın dağlarında karlar uzun süre kalırlar.", 5, 20);

}
</script>
Çıktı şöyle olacaktır:



Bunu engellemenin iki yolu vardır.

Birinci yol, fillText ve strokeText yöntemlerinin yukarıda bahsedilmeyen "en fazla genişlik" parametresini kullanarak metnin görüntüleneceği maksimum genişliği belirtmektir. Bu özellik Excel'deki "Uyacak şekilde daralt" seçeneğinin yaptığı işe benzer bir şekilde çalışır. Metni belirttiğiniz genişliğe sığacak kadar küçültür.

Örnek:
<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.font = "16px Arial";
// Metni en fazla 190 piksel genişliğinde görüntüle
ctx.fillText("Bizim buranın dağlarında karlar uzun süre kalırlar.", 5, 20, 190);

}
</script>
Çıktı şöyle olacaktır:


İkinci yol ise metni kelimelere bölüp, her bir kelimenin genişliğini measureText ile öğrenmek ve ona göre kelimeleri ayrı ayrı yazarak kelime kelime çıktıyı oluşturmaktır. Tabi bu iş biraz programlama gerektirir.

Bu yöntem de yine Excel'deki "Metni kaydır" seçeneğinin yaptığı işi yapar.

Örnek:
    function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

var fontBoyutu = 16;
ctx.font = fontBoyutu + "px Arial";

metniKaydir(ctx, // Kapsamı parametre olarak gönder.
"Bizim buranın dağlarında karlar uzun süre kalırlar. Kara kara kargalar karlı iyi tarlalar ararlar. Bitti.",
10, // Metnin sol sınırı
20, // Menin başlayacağı dikey konum (y)
fontBoyutu * 1.5, // Satır yüksekliği (yazı tipi boyutu * 1.5 ile hesaplanır)
190); // Metnin sağ sınırı

}

function metniKaydir(ctx, metin, x, y, satirYuksekligi, maksimumGenislik) {
// Boşluğun genişliğini ölç.
var boslukGenisligi = ctx.measureText(" ").width;

// Metni kelimelere bölerek bir kelime dizisi oluştur.
var kelimeler = metin.split(" ");

// Değişkenleri oluştur va bazılarına başlangıç değerlerini ata.
var sonX = x, sonY = y, genislik;

// Kelime sayısınca bir döngü yap.
for (var i = 0; i < kelimeler.length; i++) {

// i. kelimenin genişliğini ölç.
genislik = ctx.measureText(kelimeler[i]).width;

// Metin yazılan son yatay pozisyona genişliği eklediğimizde maksimum
// genişliği aşıyorsa (yazı sağ sınırın dışına çıkacaksa)...
if (sonX + genislik > maksimumGenislik) {

// Bir satır alta geç (sonY değerini satır yüksekliği kadar arttır).
sonY += satirYuksekligi;

// Son yatay konumu metnin sol sınırına eşitle (satır başı yap)
sonX = x;

}
// Hesaplanan koordinatlara i. kelimeyi yaz.
ctx.fillText(kelimeler[i], sonX, sonY);

// Bir sonraki kelime için, son yatay konumu
// yazılan kelimenin boyu + bir boşluk genişliği kadar arttır.
sonX += genislik + boslukGenisligi;

}
}
</script>
Çıktı şöyledir:

textAlign Özelliği:

textAlign özelliği görüntülenecek metni verilen konuma hizalamak için kullanılır. Bu özellik aşağıdaki değerleri alabilir.
  • left
  • right
  • center
  • start
  • end

Varsayılan start değeridir.

Hizalama işlemi fillText veya strokeText ile bildirdiğiniz yatay konuma göre yapılır. Aşağıdaki şekil, yatay konumun mavi çizgi olduğu kabul edildiğinde verilen özellik değerlerine göre metnin nasıl hizalanacağını göstermektedir.

Bu resmi oluşturacak çıktı örneği şöyledir:

<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 200);
ctx.stroke();

ctx.font = "16px Arial";

// start özelliği varsayılan olduğundan ilk seferde vermeye gerek yok.
// ctx.textAlign = "start";
ctx.fillText("start", 100, 20);

ctx.textAlign = "end";
ctx.fillText("end", 100, 50);

ctx.textAlign = "left";
ctx.fillText("left", 100, 80);

ctx.textAlign = "center";
ctx.fillText("center", 100, 110);

ctx.textAlign = "right";
ctx.fillText("right", 100, 140);

}
</script>
Bu kadar. Eksiklik görürseniz lütfen bildirin.



İlgili Makaleler


Yazan: 21.04.16 18:30
canora
101,387p 4ü