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.
0

Canvas çizgi uçları ve çizgi birleşimleri

Canvas etiketine yapılan çizimlerde kullanılan çizgilerin uçları ve birbirine bitişik olarak çizilen ya da closePath ile birleştirilen çizgilerde çizgilerin birleşim yerlerinin ne şekilde olacağı belirlenebilir.

Bu işlemler için şu özellikler kullanılır:
  • lineCap
  • lineJoin
  • miterLimit


lineCap (Çizgi kapağı / şapkası) Özelliği:

lineCap özelliği, çizgilerin uçlarının ne şekilde olacağını belirlemek için kullanılır.

Bu özellik şu değerleri alabilir:

  • butt
  • square
  • round

Varsayılan butt değeridir.

butt değeri çizgi ucunun belirtilen başlangıç konumundan başlayıp bitiş konumunda kesilmesi için kullanılır.

square değeri kullanıldığında uca çizginin kalınlığı kadar bir kare yerleştirilir. Karenin yarısı çizginin içinde, yarısı ise çizginin dışında kalır. Sonuçta çizginin boyu çizginin kalınlığı kadar uzamış olur.

round değerinde ise uca çizginin kalınlığı çapında bir daire eklenir. Yine karede olduğu gibi bu dairenin yarısı çizginin içinde kalır.

Allttaki resimde sırasıyla butt, square ve round durumları gösterilmektedir. Mavi çizgiler, çizginin moveTo ve lineTo  ile verilen başlangıç ve bitiş konumlarını göstermektedir.



Bu resmi oluşturan kod:
<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");

// Sınırları göstermek için çizgilerin dikey
// başlangıç konumlarını gösteren bir çizgi çiz
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.lineTo(50, 180);
ctx.stroke();

// Çizgilerin dikey bitiş konumlarını gösteren bir çizgi çiz
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.lineTo(150, 180);
ctx.stroke();

ctx.strokeStyle = "black";

ctx.lineWidth = 16;

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

ctx.lineCap = "square";

ctx.beginPath();
ctx.moveTo(50, 90);
ctx.lineTo(150, 90);
ctx.stroke();

ctx.lineCap = "round";

ctx.beginPath();
ctx.moveTo(50, 130);
ctx.lineTo(150, 130);
ctx.stroke();


}
</script>

Örnekte butt özelliği varsayılan olduğundan ilk çizgi çizildiğinde lineCap özelliği kullanılmamıştır.

lineJoin Özelliği:

lineJoin özelliği, birleşen çizgilerin birleşim şeklinin nasıl olacağını belirler.

Bu özellik şu değerleri alabilir:
  • miter
  • round
  • bevel

miter değeri varsayılan değerdir ve çizgi uçlarının sivri bir şekilde birleştirilmesini sağlar.

round değeri kullanıldığında çizgi uçları yuvarlak oluşturacak şekilde birleştirilir.

bevel değeri kullanıldığında ise çizgi uçları iki çizginin köşelerini birleştirecek şekilde bir hat ile birleştirilerek oluşturulur.

Alltaki resim sırasıyla miter, round ve bevel değerleri ile yapılan uç birleşimlerini göstermektedir:



Üstteki resmi oluşturan kod:
<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.lineWidth = 10;

ctx.lineJoin = "miter"; // Varsayılandır. İlk seferinde yazmasak da olur.
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(10, 100);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.stroke();

ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(80, 50);
ctx.lineTo(80, 100);
ctx.lineTo(120, 100);
ctx.closePath();
ctx.stroke();

ctx.lineJoin = "bevel";
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(150, 100);
ctx.lineTo(190, 100);
ctx.closePath();
ctx.stroke();

}
</script>

miterLimit Özelliği:

lineJoin değeri miter olduğunda, çizgiler birbirine dar bir açıyla yaklaşırsa uçlar çizgileri devam ettirerek birleştirildiğinden çok sivri olabilmektedir. miterLimit özelliği miter uçların boyunu sınırlamak için kullanılır. Bu değer çizgi kalınlığının yarısına göre belirlenen bir orandır. Varsayılan değeri 10'dur. Yani sivri ucun uzunluğu çizgilerin ilk birleştiği yerden itibaren en fazla çizgi kalınlığının yarısının 10 katını, diğer bir deyişle çizgi kalınlığının 5 katını geçmeyecektir. Eğer geçerse lineJoin özellik değeri bevel olarak ayarlanmış kabul edilecek ve çizgiler buna göre birleştirilecektir.

Aşağıdaki şekilde dar bir açı oluşturan çizgilerin birleşimleri ve birleşimlerin miterLimit ile sınırlandırılmış durumları gösterilmektedir.

Birinci birleşimde miterLimit değeri varsayılan değer yani 10'dur. Çizgiler uzatılarak birleştirildiğinde çizgilerin birleştikleri yer ile çizginin ucu arasındaki mesafe 10 * Çizgi kalınlığı / 2 değerini geçtiğinden çizgi ucu bevel olarak birleştirilmektedir. İkinci şekilde ise miterLimit 23'e ayarlanmış ve çizgi birleşimi tam olarak miter biçiminde görülmektedir. Eğer bu değeri 22 yaparsanız birleşim uzatılmaz.



Görüntüyü oluşturan kod şö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");

// Üçgenlerin üst sınırını gösteren yatay mavi bir çizgi çiz
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(0, 60);
ctx.lineTo(200, 60);
ctx.stroke();

ctx.strokeStyle = "black";
ctx.lineWidth = 6;
// ctx.lineJoin = "miter"; // Varsayılan olduğundan yazmaya gerek yok.
ctx.beginPath();
ctx.moveTo(15, 170);
ctx.lineTo(20, 60);
ctx.lineTo(25, 170);
ctx.closePath();
ctx.stroke();

// miterLimit özelliğini çizgi kalınlığının yarısının 23 katı olarak belirle.
ctx.miterLimit = 23;
ctx.beginPath();
ctx.moveTo(45, 170);
ctx.lineTo(50, 60);
ctx.lineTo(55, 170);
ctx.closePath();
ctx.stroke();

}
</script>

Bu kadar. Lütfen eksik veya hata görürseniz bildirin.



İlgili Makaleler


Yazan: 22.04.16 23:59

101,387p 4ü