Question

尝试使用KineticJS（v4.7.3）显示虚线。它在Chrome中运行良好，但在IE（v10）中，会显示正常的实线。

以下是代码：

var element = document.getElementById('target'),
    stage = new Kinetic.Stage({
        container: element,
        width: element.offsetWidth,
        height: element.offsetHeight
    }),
    layer = new Kinetic.Layer();

layer.add(new Kinetic.Line({
    points: [10, 10, 190, 190],
    stroke: 'black',
    strokeWidth: 1,
    dashArray: [5, 4]
}));
stage.add(layer);

您可以在here中看到自己的行为。

Answer 1

已修复IE-11！

直到所有“坏”的IE死亡，你可以很容易地“自己动手”行（对于曲线来说不那么容易）。

您可以使用自定义Kinetic.Shape，它可以访问画布上下文（包装上下文）。

代码来自此SO帖子：dotted stroke in <canvas>

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

完全偏离主题：去威斯康星州！我在我祖母家度过了许多美好的夏天长曲棍球。

Answer 2

简答：不支持。

通过线程here，KineticJS的创建者解决了这个问题：

“[T]他的dashArray属性现在使用浏览器实现的dashArray 根据w3c规范，画布上下文的属性。 Firefox是此刻有点落后。“

如果您关注该主题，您会发现这也是Firefox的一个问题，但这已经得到解决。但是，显然不会很快就会对IE提供支持。

KineticJS不会在Internet Explorer 10中绘制虚线

2 个答案: