我想在 Flutter Image.drawString 中使用自定义字体答案

【问题标题】：I want to use custom font in Flutter Image.drawString我想在 Flutter Image.drawString 中使用自定义字体
【发布时间】：2022-11-23 22:30:26
【问题描述】：

这是关于 Flutter、Dart、Image，特别是 drawString 函数。

首先，我要做的是为拍摄的照片添加地址和时间水印. 我的意思是不只是将文本放在图像上，而是将其与图片实际合并，以便用户可以提交图片作为他在正确的地点和正确的时间完成了特定任务的证明。

这样做。我找到了正确的函数 drawString()，但问题是它只支持 arial 字体。由于我必须用韩语写作，所以我需要使用我自己的字体。有没有人以前试过这个。我尝试了 readFont 方法，但无法成功。有谁知道吗？

将“package:image/image.dart”导入为 img；

img.drawString(image1, img.readFont('我自己的字体', image1), 30, 30, str_to_write, color:0xFF000000);

====================================== 在调用该函数之前，我尝试按照 Image 包中的说明制作位图字体，但未能成功。（因此，我将 zip 文件放在同一目录和资产文件夹中）

       String fileName = 'GmarketSansTTFMedium.ttf.zip';
       File file = File('$fileName');
       List<int> bytes = file.readAsBytesSync();
       print(bytes);

【问题讨论】：

你是如何将字体添加到你的项目中的？
感谢您给我机会说得更清楚。我在问题中添加了我的做法

标签： flutter image dart drawstring

【解决方案1】：

您可以在以下文件路径的“图像”包中找到将 .ttf 转换为 .zip 的步骤。 lib ==> src ==> bitmap_font.dart

可以与 [drawString] 和 [drawChar] 函数一起使用的位图字体。如果您想使用自己的字体，请按照以下步骤操作：

1. Get your .ttf file - important is to select file with specific style which you want
         for example when you download .ttf file from google fonts: select file from /static folder
         example name: Roboto-Black.ttf
2. Convert ttf file to fnt zip with this link: "https://ttf2fnt.com/" and dont forgot to  mention required font size like 40px, 60px. 
3. Download zip file and drag to your project assets folder and mention path in .yaml file
4. Call below method whereever you want :

const int kYellowColorIntValue = 0xffffff00; 
const int kCyanColorIntValue = 0xff00ffff; 

void getWaterMarkTextOnImage() async 
{
  var decodeImg = img.decodeImage(<your origianl photo UInt8List>);
  ByteData fBitMapFontData = await loadAssetFont();
  
  img.BitmapFont requiredRobotoFont = img.BitmapFont.fromZip(fBitMapFontData.buffer.asUint8List());

  // IMPORTANT NOTE : Assiged color is Cyan. But required color is Yellow.
  // It is taking yellow as cyan and cyan as yellow.
  // set X, Y axis as per your requirement
  img.drawString(decodeImg!, requiredRobotoFont, 80, decodeImg.height - 200,
    requiredLatLongString!,
    color: kCyanColorIntValue);
  
  img.drawString(decodeImg, requiredRobotoFont, 80, decodeImg.height - 130,
    requiredTimeStampString!,
    color: kCyanColorIntValue); // KYellowColorIntValue
  var encodeImage = img.encodeJpg(decodeImg, quality: 100);

  // Take finalImageFile global variable and assign to image widget
  File? finalImageFile = File(<your image captured path>)..writeAsBytesSync(encodeImage);
}

Future<ByteData> loadAssetFont() async 
{
  ByteData imageData = await rootBundle.load(kRobotoBitmapZipFilePath);
  setState(() {}); 
  return imageData;
}

5. Create Image widget here.
Widget getCapturedPhotoWidget()
{
  double aspRatio, imgHeight = 0.0;
  if (<captured pic is portrait mode>) {
    // portrait
    aspRatio = (1 / widget.overlay.ratio!);
    imgHeight = finalImageSize!.width.toDouble();
  } else {
    // landscape
    aspRatio = widget.overlay.ratio! * 1.5;
    imgHeight = finalImageSize!.height.toDouble() / 5;
  }
  return Center(
    child: Container(
        height: imgHeight, // finalImageSize!.width.toDouble(),
        margin: EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 10),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16.0),
          child: AspectRatio(
            aspectRatio: aspRatio, // widget.overlay.ratio!,
            child: finalImageFile != null
                ? Image.file(
                    finalImageFile!,
                    fit: BoxFit.fill,
                  )
                : Offstage(),
          ),
        )),
  );
}

这就是使用位图的自定义字体编码快乐！！！

【讨论】：