Question

使用KineticJS时，不同浏览器中文本的垂直对齐似乎有所不同。我创建了两个JSFiddles来说明问题：首先，文本被渲染到原始HTML5画布而不使用KineticJS（参见Raw HTML5 Example）。在这种情况下，文本在Chrome和FF中以相同的方式对齐。这是原始HTML5画布的JS代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

xOrigin = 10;
context.beginPath();
context.rect(xOrigin, 90, 107, 12);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();      

context.font = '11px Calibri';
context.fillStyle = 'black';
context.fillText('Hello World! Calibri', xOrigin + 9, 100);      

xOrigin = 141;
context.beginPath();
context.rect(xOrigin, 90, 103, 12);
context.fillStyle = 'cyan';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();      

context.font = '11px Arial';
context.fillStyle = 'black';
context.fillText('Hello World! Arial', xOrigin + 9, 100);

然而，当使用KineticJS时，Arial中的文本在FF中比在Chrome中高一个像素（参见KineticJS Example）。以下是KineticJS示例的代码：

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();

  var xOrigin = 10;

  var rect = new Kinetic.Rect({
    x: xOrigin,
    y: 90,
    width: 107,
    height: 12,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 2
  });

  var simpleText = new Kinetic.Text({
    x: xOrigin + 9,
    y: 90,
    text: 'Hello World! Calibri',
    fontSize: 11,
    fontFamily: 'Calibri',
    fill: 'black'
  });

  layer.add(rect);
  layer.add(simpleText);

  xOrigin = 141
  var rect = new Kinetic.Rect({
    x: xOrigin,
    y: 90,
    width: 103,
    height: 12,
    fill: 'cyan',
    stroke: 'black',
    strokeWidth: 2
  });

  var simpleText = new Kinetic.Text({
    x: xOrigin + 9,
    y: 90,
    text: 'Hello World! Arial',
    fontSize: 11,
    fontFamily: 'Arial',
    fill: 'black'
  });

  layer.add(rect);
  layer.add(simpleText);


  stage.add(layer);

有没有办法使用KineticJS在FF和Chrome上一致地呈现文本？不幸的是，KineticJS中似乎没有文本基线属性（see here）。为什么在处理原始HTML5画布时它会正确呈现？这是一个KineticJS错误还是我错过了什么？

Firefox中的垂直文本对齐方式与KineticJS中的其他浏览器不同

0 个答案: