1

我有一个小设计问题，我似乎无法理解。也许我可以在这里找到一些有创造力的人，他们可以为我指明方向——我相信我现在有创造力障碍:(

在我解释之前，请看下面的例子。这使事情变得更容易：http: //jsfiddle.net/DV9SE/3/

<canvas id="mycanvas" width="100" height="20"></canvas>
<div id="mydiv">ASDqpjy</div>

#mycanvas {
  position:absolute;
  left:20px;
  top:20px;
  border:1px solid #999999;
}
#mydiv {
  position:absolute;
  height:20px;
  width:100px;
  left:20px;
  top:50px;
  border:1px solid #999999;
  font-family:arial;
  font-size:14px;
  line-height:2.2;
}

var canvas = $('#mycanvas')[0];
var ctx = canvas.getContext('2d');

ctx.font = '14px arial';
ctx.fillText('ASDqpjy', 0, canvas.height);

如您所见，将文本的基线放在画布元素的最底部非常容易。这正是我需要的一个项目。基线必须位于元素的底部（稍后我可以通过 JQuery 将其渲染为可移动的）。但是问题是：文本被截断，因为很明显，下部将在画布之外，因此无法呈现。

另一种选择 - 或者我认为 - 是将所有内容放在 DIV 中，这使得渲染部分文本成为可能，即在实际边框/边距之外。但是这里的问题是：我必须通过使用 css line-height 来调整基线。当涉及一种或两种字体时，这不是问题。但是由于该项目将允许使用数十种字体进行字体选择，因此为每种字体创建像素精确的行高规则将是一项完整的工作。

有人知道如何解决这个问题吗？如何可能将字体的基线一致地移动到 DIV 元素的底部，或者一个创造性的解决方案，如何在画布中显示实际上“外部”的部分？;)

非常感谢！

4

1 回答 1

0

您可以使用display:table-cell和vertical-align:bottom。像这儿：

http://jsfiddle.net/DV9SE/1/

于 2013-06-04T16:06:50.257 回答