Question

在原生HTML5画布中，文本由文本基线定位，但在Fabric.js中，它似乎位于文本的底部。我希望Fabric.js按基线定位文本。有可能吗？

请参阅image

这是用于示例的代码。

Fabric.js<br />
<canvas id="fabric" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script src="fabric.js"></script>
<script>
    var canvas = new fabric.Canvas('fabric');
     canvas.add(new fabric.Line([100, 100, 200, 100], { left: 10, top: 50, stroke: 'red' }));
     canvas.add(new fabric.Text('Hello World', { left: 10, top: 50, originY: 'bottom', useNative: true, fontSize: 50 }));
</script>
<br /> 
Native HTML5<br />
<canvas id="native" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
	var c = document.getElementById("native");
	var ctx = c.getContext("2d");
	ctx.font = "50px Times New Roman";
	ctx.fillText("Hello World",10,50);
	
	ctx.moveTo(10,50);
	ctx.lineTo(100,50);
	ctx.strokeStyle = '#ff0000';
	ctx.stroke();

</script>

Answer 1

不幸的是，目前看起来并不可行。 textBaseline属性设置为＆＃39; alphabetic＆＃39;唯一可用的垂直对齐选项是＆＃39; top＆＃39;，＆＃39; center＆＃39;，＆amp; ＆＃39;底部＆＃39; （它们相对于边界框结构在文本周围绘制）。

我已创建issue来请求此功能。希望他们加上它！

按基线定位fabric.js文本

1 个答案: