< noktalı inme;canvas>

SORU

2 Ocak 2011, Pazar

< noktalı inme;canvas>

Mümkün oldukça kolay olan CSS gibi inme özelliği ayarlanabilir değil sanırım. Çizgiler vuruş çizerken, noktalı, ama tuval üzerine sağlam bir kesik var CSS ile bu mümkün görünmüyor. Nasıl uygulanıyor bu?

Bazı örnekler gördüm ama böyle saçma bir işlev için çok uzun.

Örneğin:

http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/22000c0d0a1c54f9?pli=1

CEVAP

2 Ocak 2011, Pazar

Eğlenceli bir soru! Kesik çizgiler özel bir uygulama yazdım; 11**. Adobe Illustrator yoldan geldim ve çizgi/boşluk uzunluğu dizisi belirlemenize olanak sağlar.

Stackoverflow gelecek kuşaklar için, işte benim Uygulama (s/Ç hat genişlikleri için biraz değiştirdim:):

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
  CP.dashedLine = function(x,y,x2,y2,dashArray){
    if (!dashArray) dashArray=[10,5];
    if (dashLength==0) dashLength = 0.001; // Hack for Safari
    var dashCount = dashArray.length;
    this.moveTo(x, y);
    var dx = (x2-x), dy = (y2-y);
    var slope = dx ? dy/dx : 1e15;
    var distRemaining = Math.sqrt( dx*dx   dy*dy );
    var dashIndex=0, draw=true;
    while (distRemaining>=0.1){
      var dashLength = dashArray[dashIndex  �shCount];
      if (dashLength > distRemaining) dashLength = distRemaining;
      var xStep = Math.sqrt( dashLength*dashLength / (1   slope*slope) );
      if (dx<0) xStep = -xStep;
      x  = xStep
      y  = slope*xStep;
      this[draw ? 'lineTo' : 'moveTo'](x,y);
      distRemaining -= dashLength;
      draw = !draw;
    }
  }
}

10px 30px uzun, bir boşluk tarafından takip edildiğini tire ile 170,10 20,150 bir çizgi çizmek için kullanın:

myContext.dashedLine(20,150,170,10,[30,10]);

Dalgalı çizgiler ve noktalar çizmek için kullanın (örneğin):

myContext.lineCap   = 'round';
myContext.lineWidth = 4; // Lines 4px wide, dots of diameter 4
myContext.dashedLine(20,150,170,10,[30,10,0,10]);

"0 çizgi uzunluğu çizgi boyunca nokta yuvarlak lineCap sonuçları ile birlikte." çok kısa

Eğer herkesin bildiği bir şekilde erişmek için geçerli bir tuval kapsamında yol, çok isterdim biliyor musun, olur izin ver bana yaz bu kadar ctx.dashTo(x,y,dashes) yerine gerektiren size tekrar belirtmek başlangıç noktası yöntemini çağırın.

Bunu Paylaş: