fabric.js - 文本下划线和 lineHeight答案

【问题标题】：fabric.js - text underline and lineHeightfabric.js - 文本下划线和 lineHeight
【发布时间】：2013-09-11 17:45:26
【问题描述】：

我在 fabric.js 中的文本中添加了下划线，它的工作原理如下图。但是下划线离文字有点远，我改变了lineHeight属性，下划线可以更接近文字，但问题是选择控件的高度也改变了。请看下面的图片。

第一个，我改了lineHeight = 0.2，加了下划线，很好，但是选择控件有点奇怪。第二个，我用的是默认的lineHeight，但是下划线离文字有点远。那么如何在没有选择问题的情况下紧密地为文本添加下划线？

我测试了，发现这个问题是因为originX = 'left'和originY = 'top'，如果originX = 'center'就ok了。

【问题讨论】：

lineHeight 直接影响控件框；基本上是fontSize * lineHeight。没有内置的方法来修改装饰线的垂直偏移。但是您示例中的行太低了，看起来像是某种错误。请制作一个简单的 jsfiddle 来显示这个问题。
这里是-jsfiddle.net/hellomaya/5XCTt/1，github中的问题报告在这里-github.com/kangax/fabric.js/issues/835
所以 lineHeight 不会被解释为文本行的高度，而更像是一个比例因子。否则，fontSize * lineHeight 获取控制框高度是错误的。此错误已在最新开发版本中修复。

标签： javascript fabricjs textedit

【解决方案1】：

试试这个代码，希望它对你更好。

<input type="button" id="undrline" value="Underline" class="underline"  >

$("#undrline").click(function() {
alert("underline");
var obj = canvas.getActiveObject();
if (!obj) return;
obj.setTextDecoration('underline');
canvas.renderAll();
});

【讨论】：