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 を使用してベースラインを調整する必要があります。1 つまたは 2 つのフォントに関しては、それは問題ではありません。しかし、このプロジェクトでは数十のフォントでフォントを選択できるため、個々のフォントごとにピクセル単位で正確な行の高さのルールを作成するのは非常に面倒です。

この問題を回避する方法を知っている人はいますか? フォントのベースラインを一貫して DIV 要素の下部に移動する方法、または実際にキャンバスの「外側」にある部分をキャンバスに表示する創造的な解決策はありますか? ;)

ありがとうございます！

4

1 に答える 1

0

display:table-cellとを使用できますvertical-align:bottom。ここみたいに：

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

于 2013-06-04T16:06:50.257 に答える