Details
-
Bug
-
Resolution: Unresolved
-
P3: Somewhat important
-
None
-
5.1.0 RC2
-
Windows 7 64bit
Description
When setting the Canvas textBaseline to middle or hanging, the text is rendered in the same position as if the textBaseline is alphabetic.
When the textBaseline is middle, then text should be rendered in the middle of the red line, and when the textBaseline is hanging, the text should be "hanging" below the red line.
The below Qml was adapted from: http://www.w3schools.com/tags/canvas_textbaseline.asp
Canvas
{
width: 400
height: 200
onPaint:
{
var ctx=getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
}
}