<canvas>中的虚线描边

Question

我想不可能设置像CSS这样的笔触属性很容易.使用CSS时,我们在绘制线条/笔划时使用虚线,点线,实体但在画布上这似乎不是一种选择.你是如何实现的？

我已经看过一些例子,但他们真的很渴望这么愚蠢的功能.

例如:

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

Answer 1

有趣的问题!我写了一个虚线的自定义实现; 你可以在这里尝试一下.我采用了Adobe Illustrator的路线,允许您指定一个短划线/间隙长度数组.

对于stackoverflow后代,这是我的实现(略微改变s/o线宽):

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++%dashCount];
      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;
    }
  }
}

要画一条线20,150,以170,10与被30PX长之后10px的的差距破折号,你可以使用:

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

要绘制交替的短划线和点,请使用(例如):

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

"非常短"的短划线长度0与圆形lineCap结合在一起产生沿着你的线的点.

如果有人知道访问画布上下文路径的当前点的方法,我很想知道它,因为它允许我写这个ctx.dashTo(x,y,dashes)而不是要求你重新指定方法调用中的起点.

Answer 2

这个Phrogz代码的简化版本利用了Canvas的内置转换功能,并且还处理特殊情况,例如当dx = 0时

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP.lineTo) {
    CP.dashedLine = function(x, y, x2, y2, da) {
        if (!da) da = [10,5];
        this.save();
        var dx = (x2-x), dy = (y2-y);
        var len = Math.sqrt(dx*dx + dy*dy);
        var rot = Math.atan2(dy, dx);
        this.translate(x, y);
        this.moveTo(0, 0);
        this.rotate(rot);       
        var dc = da.length;
        var di = 0, draw = true;
        x = 0;
        while (len > x) {
            x += da[di++ % dc];
            if (x > len) x = len;
            draw ? this.lineTo(x, 0): this.moveTo(x, 0);
            draw = !draw;
        }       
        this.restore();
    }
}

我认为我的计算是正确的,似乎渲染正常.

Answer 3

目前至少setLineDash([5,10])适用于Chrome,而ctx.mozDash = [5,10]适用于FF:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

if ( ctx.setLineDash !== undefined )   ctx.setLineDash([5,10]);
if ( ctx.mozDash !== undefined )       ctx.mozDash = [5,10];

ctx.beginPath();              
ctx.lineWidth="2";
ctx.strokeStyle="green";
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke();

设置为null会使该线条变为实线.

Answer 4

Mozilla一直在努力实现画布的虚线描边,所以我们可能会在不久的将来看到它添加到规范中.

Answer 5

Phroz的解决方案很棒.但是当我在我的应用程序中使用它时,我发现了两个错误.

以下代码被调试(并且为了可读性而重构)版本的Phroz之一.

// Fixed: Minus xStep bug (when x2 < x, original code bugs)
// Fixed: Vertical line bug (when abs(x - x2) is zero, original code bugs because of NaN)
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if(CP && CP.lineTo) CP.dashedLine = function(x, y, x2, y2, dashArray){
    if(! dashArray) dashArray=[10,5];
    var dashCount = dashArray.length;
    var dx = (x2 - x);
    var dy = (y2 - y);
    var xSlope = (Math.abs(dx) > Math.abs(dy));
    var slope = (xSlope) ? dy / dx : dx / dy;

    this.moveTo(x, y);
    var distRemaining = Math.sqrt(dx * dx + dy * dy);
    var dashIndex = 0;
    while(distRemaining >= 0.1){
        var dashLength = Math.min(distRemaining, dashArray[dashIndex % dashCount]);
        var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
        if(xSlope){
            if(dx < 0) step = -step;
            x += step
            y += slope * step;
        }else{
            if(dy < 0) step = -step;
            x += slope * step;
            y += step;
        }
        this[(dashIndex % 2 == 0) ? 'lineTo' : 'moveTo'](x, y);
        distRemaining -= dashLength;
        dashIndex++;
    }
}

Answer 6

有一个更简单的方法来做到这一点.根据http://www.w3.org/TR/2dcontext/#dom-context-2d-strokestyle,strokeStyle接受字符串,CanvasGradients或CanvasPatterns.所以我们只拍这样的图像:

  <img src="images/dashedLineProto.jpg" id="cvpattern1" width="32" height="32" />

将它加载到画布中,并用它绘制我们的小矩形.

  var img=document.getElementById("cvpattern1");
  var pat=ctx.createPattern(img,"repeat");
  ctx.strokeStyle = pat;
  ctx.strokeRect(20,20,150,100);

这并不会产生完美的虚线,但它真的很简单,可以修改.当您绘制水平或垂直的线条时,结果当然可能变得不完美,点状图案可能有助于那里.

PS.请记住,当您尝试在代码中使用来自外部源的imgs时,SOP会适用.