I'm trying to paint stroked text on a canvas. in my editor, I created the stroked text effect by stacking two text widegts:
class TextDataView extends ElementView<TextData> {
final String placeholderText;
TextDataView(TextData data, {required this.placeholderText}) : super(data);
Text buildText(BuildContext context) {
return Text(
data.text.isNotEmpty ? data.text : placeholderText,
style: data.getTextStyle(),
textAlign: data.textAlignment,
);
}
@override
Widget build(BuildContext context) {
final text = buildText(context);
return Stack(
alignment: Alignment.center,
children: [
// for outline
Text(
text.data!,
style: text.style!.copyWith(
foreground: Paint()
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..strokeWidth = data.textStrokeSize
..color = data.textStrokeSize == 0
? Colors.transparent
: data.textStrokeColor,
color: null,
),
maxLines: text.maxLines,
overflow: text.overflow,
semanticsLabel: text.semanticsLabel,
softWrap: text.softWrap,
strutStyle: text.strutStyle,
textAlign: text.textAlign,
textDirection: text.textDirection,
textScaleFactor: text.textScaleFactor,
),
// for display
text,
],
);
}
}
For output rendering, I can only paint the display text:
extension TextDataToTextPainter on TextData {
TextPainter composeText() {
return TextPainter(
textAlign: textAlignment,
textDirection: textDirection,
maxLines: maxLines,
textScaleFactor: textScaleFactor,
text: TextSpan(
text: text,
style: getTextStyle(),
),
);
}
}
class EditorTextPainter extends ElementPainter<TransformData<TextData>> {
@override
Future<void> draw(Canvas canvas, Size size, TransformData<TextData> data) {
canvas.saveLayer(Offset.zero & size, Paint());
final text = data.data.composeText();
final offset = data.offset.alongSize(size);
final textSize = data.size.toActualSize(size);
text.layout(maxWidth: textSize.width);
text.paint(canvas, offset);
canvas.rotate(data.angle);
canvas.restore();
return Future.value();
}
}
How can I also paint the stroke with TextPainter?
