在< canvas> [英] dotted stroke in <canvas>

问题描述

我猜想不可能设置stroke属性，如CSS很容易。使用CSS我们有虚线，虚线，实体，但在画布线/或笔画这不似乎是一个选项。

I guess it is not possible to set stroke property such as CSS which is quite easy. With CSS we have dashed, dotted, solid but on canvas when drawing lines/or strokes this doesn't seem to be an option. How have you implemented this?

我已经看过一些例子，但是他们对于这样一个蠢的函数真的很长。

I've seen some examples but they are really long for such a silly function.

例如：

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

推荐答案

有趣的问题！我写了一个虚线的自定义实现;您可以在这里试用。我使用Adobe Illustrator的路由，并允许你指定一个破折号/间隙长度的数组。

Fun question! I've written a custom implementation of dashed lines; you can try it out here. I took the route of Adobe Illustrator and allow you to specify an array of dash/gap lengths.

对于stackoverflow后代，这里是我的实现width）：

For stackoverflow posterity, here's my implementation (slightly altered for s/o line widths):

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;
    }
  }
}

code> 20,150 到 170,10 ，其中的短划线长度为30像素，后跟10px的间距，您可以使用：

To draw a line from 20,150 to 170,10 with dashes that are 30px long followed by a gap of 10px, you would use:

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

要绘制交替的破折号和点，请使用（例如）：

To draw alternating dashes and dots, use (for example):

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结合使用，会产生沿着您的行的点。

The "very short" dash length of 0 combined with the rounded lineCap results in dots along your line.

如果任何人都知道访问canvas上下文路径的当前点， d爱知道它，因为它会允许我写这个 ctx.dashTo（x，y，dashes），而不是要求您重新指定开始点在方法调用中。

If anyone knows of a way to access the current point of a canvas context path, I'd love to know about it, as it would allow me to write this as ctx.dashTo(x,y,dashes) instead of requiring you to re-specify the start point in the method call.

这篇关于在< canvas>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！