2015-01-22 3 views
3

В собственном холсте HTML5 текст размещается по исходному тексту текста, но в Fabric.js он, по-видимому, находится внизу текста. Я хочу, чтобы Fabric.js размещал текст по базовому уровню. Является ли это возможным?Позиция text.js text по базовому уровню

См 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> 
 
\t var c = document.getElementById("native"); 
 
\t var ctx = c.getContext("2d"); 
 
\t ctx.font = "50px Times New Roman"; 
 
\t ctx.fillText("Hello World",10,50); 
 
\t 
 
\t ctx.moveTo(10,50); 
 
\t ctx.lineTo(100,50); 
 
\t ctx.strokeStyle = '#ff0000'; 
 
\t ctx.stroke(); 
 

 
</script>

ответ

0

К сожалению, это не выглядит возможным на данный момент. Атрибут textBaseline имеет значение «alphabetic», а единственными доступными параметрами вертикального выравнивания являются «верхний», «центральный», & «нижний» (которые относительно ткани ограничивающего прямоугольника рисуют вокруг текста).

Я создал issue, чтобы запросить эту функцию. Надеюсь, они добавят!

Смежные вопросы