0

尝试使用 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);

您可以在这里看到自己的行为。

4

2 回答 2

1

已在 IE-11 中修复！

直到所有“坏”的 IE 都死了，你可以很容易地“自己动手”制作线条（不太容易制作曲线）。

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

代码取自此 SO 帖子：<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;
    }
  }
}

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

于 2013-11-07T17:50:57.530 回答
0

简短回答：不支持。

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

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

如果您关注该主题，您会发现这曾经也是 Firefox 的一个问题，但已经解决了。然而，对 IE 的支持显然不会很快出现。

于 2013-11-07T17:11:03.633 回答