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

Question

这是关于Flutter、Dart、Image，具体是drawString function。

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

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

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

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

======================================== 在我打电话给 function 之前，我尝试制作 bitmap像图片 package 中所述的这样的字体，但未能成功。 （所以，我将 zip 文件放在同一个目录下，也在 assets 文件夹下）

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

Answer 1

您可以在下面的文件路径中的“图像”package 中找到将.ttf 转换为.zip 的步骤。 库 ==> 源代码 ==> 位图字体.dart

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

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(),
          ),
        )),
  );
}

这就是使用自定义字体 bitmap 快乐编码！！！