Skip to content

Commit 49e1a79

Browse files
astururasturur
committed
meh solution
1 parent 2e9ea73 commit 49e1a79

File tree

2 files changed

+128
-16
lines changed

2 files changed

+128
-16
lines changed

‎src/CanvasRenderingContext2d.cc‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2400,23 +2400,34 @@ NAN_METHOD(Context2d::StrokeText) {
24002400
/*
24012401
* Gets the baseline adjustment in device pixels
24022402
*/
2403-
inline double getBaselineAdjustment(PangoLayout* layout, short baseline) {
2403+
inline double getBaselineAdjustment(PangoLayout* layout, short baseline, cairo_t *_context) {
24042404
PangoRectangle logical_rect;
2405-
pango_layout_line_get_extents(pango_layout_get_line(layout, 0), NULL, &logical_rect);
2405+
PangoLayout* measureLayout = pango_layout_copy(layout);
2406+
pango_layout_set_text(measureLayout, "gjĮ測試ÅÊ", -1);
2407+
pango_layout_line_get_extents(pango_layout_get_line(measureLayout, 0), NULL, &logical_rect);
2408+
2409+
// extract the scale value from the current transform so that we know how many pixels we
2410+
// need for our extra canvas in the drawImage operation.
24062411

24072412
double scale = 1.0 / PANGO_SCALE;
2408-
double ascent = scale * pango_layout_get_baseline(layout);
2413+
double ascent = scale * pango_layout_get_baseline(measureLayout);
24092414
double descent = scale * logical_rect.height - ascent;
2415+
double correction_factor = scale * logical_rect.height * 0.072;
24102416

24112417
switch (baseline) {
24122418
case TEXT_BASELINE_ALPHABETIC:
2413-
return ascent;
2419+
return ascent; // / current_scale_y;
2420+
case TEXT_BASELINE_IDEOGRAPHIC:
2421+
return ascent + correction_factor;
24142422
case TEXT_BASELINE_MIDDLE:
2415-
return (ascent + descent) / 2.0;
2423+
return (ascent + descent) / 2.0; // / current_scale_y;
24162424
case TEXT_BASELINE_BOTTOM:
2417-
return ascent + descent;
2425+
return (ascent + descent) - correction_factor; // / current_scale_y;
2426+
case TEXT_BASELINE_HANGING:
2427+
return correction_factor * 3.0;
2428+
case TEXT_BASELINE_TOP:
24182429
default:
2419-
return 0;
2430+
return correction_factor;
24202431
}
24212432
}
24222433

@@ -2443,8 +2454,7 @@ Context2d::setTextPath(double x, double y) {
24432454
x -= logical_rect.width;
24442455
break;
24452456
}
2446-
2447-
y -= getBaselineAdjustment(_layout, state->textBaseline);
2457+
y -= getBaselineAdjustment(_layout, state->textBaseline, _context);
24482458

24492459
cairo_move_to(_context, x, y);
24502460
if (state->textDrawingMode == TEXT_DRAW_PATHS) {
@@ -2686,7 +2696,8 @@ NAN_METHOD(Context2d::MeasureText) {
26862696

26872697
cairo_matrix_t matrix;
26882698
cairo_get_matrix(ctx, &matrix);
2689-
double y_offset = getBaselineAdjustment(layout, context->state->textBaseline);
2699+
2700+
double y_offset = getBaselineAdjustment(layout, context->state->textBaseline, ctx);
26902701

26912702
Nan::Set(obj,
26922703
Nan::New<String>("width").ToLocalChecked(),

‎test/public/tests.js‎

Lines changed: 107 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -985,7 +985,7 @@ tests['textBaseline alphabetic'] = function (ctx) {
985985
ctx.lineTo(200, 100)
986986
ctx.stroke()
987987

988-
ctx.font = 'normal 20px Arial'
988+
ctx.font = 'normal 30px Arial'
989989
ctx.textBaseline = 'alphabetic'
990990
ctx.textAlign = 'center'
991991
ctx.fillText('alphabetic', 100, 100)
@@ -998,7 +998,7 @@ tests['textBaseline top'] = function (ctx) {
998998
ctx.lineTo(200, 100)
999999
ctx.stroke()
10001000

1001-
ctx.font = 'normal 20px Arial'
1001+
ctx.font = 'normal 30px Arial'
10021002
ctx.textBaseline = 'top'
10031003
ctx.textAlign = 'center'
10041004
ctx.fillText('top', 100, 100)
@@ -1011,7 +1011,7 @@ tests['textBaseline hanging'] = function (ctx) {
10111011
ctx.lineTo(200, 100)
10121012
ctx.stroke()
10131013

1014-
ctx.font = 'normal 20px Arial'
1014+
ctx.font = 'normal 30px Arial'
10151015
ctx.textBaseline = 'hanging'
10161016
ctx.textAlign = 'center'
10171017
ctx.fillText('hanging', 100, 100)
@@ -1024,7 +1024,9 @@ tests['textBaseline middle'] = function (ctx) {
10241024
ctx.lineTo(200, 100)
10251025
ctx.stroke()
10261026

1027-
ctx.font = 'normal 20px Arial'
1027+
ctx.lineWidth = 30;
1028+
ctx.strokeStyle = 'red';
1029+
ctx.font = 'normal 30px Arial'
10281030
ctx.textBaseline = 'middle'
10291031
ctx.textAlign = 'center'
10301032
ctx.fillText('middle', 100, 100)
@@ -1037,7 +1039,7 @@ tests['textBaseline ideographic'] = function (ctx) {
10371039
ctx.lineTo(200, 100)
10381040
ctx.stroke()
10391041

1040-
ctx.font = 'normal 20px Arial'
1042+
ctx.font = 'normal 30px Arial'
10411043
ctx.textBaseline = 'ideographic'
10421044
ctx.textAlign = 'center'
10431045
ctx.fillText('ideographic', 100, 100)
@@ -1050,12 +1052,102 @@ tests['textBaseline bottom'] = function (ctx) {
10501052
ctx.lineTo(200, 100)
10511053
ctx.stroke()
10521054

1053-
ctx.font = 'normal 20px Arial'
1055+
ctx.font = 'normal 30px Arial'
10541056
ctx.textBaseline = 'bottom'
10551057
ctx.textAlign = 'center'
10561058
ctx.fillText('bottom', 100, 100)
10571059
}
10581060

1061+
tests['textBaseline alphabetic with scale'] = function (ctx) {
1062+
ctx.strokeStyle = '#666'
1063+
ctx.scale(1, 4)
1064+
ctx.lineWidth = 0.25
1065+
ctx.strokeRect(0, 0, 200, 50)
1066+
ctx.lineTo(0, 25)
1067+
ctx.lineTo(200, 25)
1068+
ctx.stroke()
1069+
1070+
ctx.font = 'normal 30px Arial'
1071+
ctx.textBaseline = 'alphabetic'
1072+
ctx.textAlign = 'center'
1073+
ctx.fillText('alphabetic', 100, 25)
1074+
}
1075+
1076+
tests['textBaseline top with scale'] = function (ctx) {
1077+
ctx.strokeStyle = '#666'
1078+
ctx.scale(1, 4)
1079+
ctx.lineWidth = 0.25
1080+
ctx.strokeRect(0, 0, 200, 50)
1081+
ctx.lineTo(0, 25)
1082+
ctx.lineTo(200, 25)
1083+
ctx.stroke()
1084+
1085+
ctx.font = 'normal 30px Arial'
1086+
ctx.textBaseline = 'top'
1087+
ctx.textAlign = 'center'
1088+
ctx.fillText('top', 100, 25)
1089+
}
1090+
1091+
tests['textBaseline hanging with scale'] = function (ctx) {
1092+
ctx.strokeStyle = '#666'
1093+
ctx.scale(1, 4)
1094+
ctx.lineWidth = 0.25
1095+
ctx.strokeRect(0, 0, 200, 50)
1096+
ctx.lineTo(0, 25)
1097+
ctx.lineTo(200, 25)
1098+
ctx.stroke()
1099+
1100+
ctx.font = 'normal 30px Arial'
1101+
ctx.textBaseline = 'hanging'
1102+
ctx.textAlign = 'center'
1103+
ctx.fillText('hanging', 100, 25)
1104+
}
1105+
1106+
tests['textBaseline middle with scale'] = function (ctx) {
1107+
ctx.strokeStyle = '#666'
1108+
ctx.scale(1, 4)
1109+
ctx.lineWidth = 0.25
1110+
ctx.strokeRect(0, 0, 200, 50)
1111+
ctx.lineTo(0, 25)
1112+
ctx.lineTo(200, 25)
1113+
ctx.stroke()
1114+
1115+
ctx.font = 'normal 30px Arial'
1116+
ctx.textBaseline = 'middle'
1117+
ctx.textAlign = 'center'
1118+
ctx.fillText('middle', 100, 25)
1119+
}
1120+
1121+
tests['textBaseline ideographic with scale'] = function (ctx) {
1122+
ctx.strokeStyle = '#666'
1123+
ctx.scale(1, 4)
1124+
ctx.lineWidth = 0.25
1125+
ctx.strokeRect(0, 0, 200, 50)
1126+
ctx.lineTo(0, 25)
1127+
ctx.lineTo(200, 25)
1128+
ctx.stroke()
1129+
1130+
ctx.font = 'normal 30px Arial'
1131+
ctx.textBaseline = 'ideographic'
1132+
ctx.textAlign = 'center'
1133+
ctx.fillText('ideographic', 100, 25)
1134+
}
1135+
1136+
tests['textBaseline bottom with scale'] = function (ctx) {
1137+
ctx.strokeStyle = '#666'
1138+
ctx.scale(1, 4)
1139+
ctx.lineWidth = 0.25
1140+
ctx.strokeRect(0, 0, 200, 50)
1141+
ctx.lineTo(0, 25)
1142+
ctx.lineTo(200, 25)
1143+
ctx.stroke()
1144+
1145+
ctx.font = 'normal 30px Arial'
1146+
ctx.textBaseline = 'bottom'
1147+
ctx.textAlign = 'center'
1148+
ctx.fillText('bottom', 100, 25)
1149+
}
1150+
10591151
tests['font size px'] = function (ctx) {
10601152
ctx.strokeStyle = '#666'
10611153
ctx.strokeRect(0, 0, 200, 200)
@@ -2506,3 +2598,12 @@ tests['transformed drawimage'] = function (ctx) {
25062598
ctx.transform(1.2, 1, 1.8, 1.3, 0, 0)
25072599
ctx.drawImage(ctx.canvas, 0, 0)
25082600
}
2601+
2602+
tests['#1544 text scaling issue'] = function (ctx) {
2603+
ctx.font = '24px Verdana';
2604+
ctx.fillStyle = 'red';
2605+
ctx.textAlign = 'left';
2606+
ctx.textBaseline = 'top';
2607+
ctx.scale(1, 4);
2608+
ctx.fillText('2020', 20, 20);
2609+
}

0 commit comments

Comments
 (0)