この記事はネチズンによって投稿され、より多くの友人が共有する歓迎。
アーティスト：VLEASTWO
1. 言語の背景
- .NET 6/7/8
- ASP.NET Core Blazor
2. 要件の背景
- URLやその他の情報を2次元コードに変換する
- 端末情報を表示する
- 2次元コードの近くに文字情報を配置する
- ユーザーが情報を直接表示する場合 * セクション *
3. ルートの解決。
- 2次元コード生成ツール
2次元コードを生成する多くのバージョンは **Net. Codecrete.QrCode Generator v 2.0.3 **
- リンクBipedのリンク
GitHubリンクhttps://github.com/manuelbl/QrCodeGenerator
NuGetリンクhttps://www.nuget.org/packages/Net.Codecrete.QrCodeGenerator/2.0.3
这里没出现什么问题所以就不试试其他方案了，大同。
- 描画ツール
- 群里给的“Graphics*”
- 查阅微软资料发现从. NET 6开始只能在只能在windows上使用,不过好在官方也给了几条解决方案:
- 私は *SkiaSharp v2.88.3 を選択しました。
- リンクBipedのリンク
GitHubリンクhttps://github.com/mono/SkiaSharp
getリhttps://www.nuget.org/packages/SkiaSharp/2.88.3ク
- レイアウト·レイアウト
二次元コードとテキストの位置関係は確かに基本的に固定されており、フリーハンドスケッチ紙やコンピュータ上のレイアウト図面の選択は影響を与えません。事前に描画する目的は、位置決めポイントの計算を容易にすることですが、実際には、レイアウトを設計するために自分のビジネスに応じて（* 脳は、脳キャッシュに依存しないことができます *）。
クソコード。
- QRの生成
1行のコードで説明することは何もありません：
// 调用语句
var qr = QrCode.EncodeText(mes, QrCode.Ecc.Quartile);
// 库源码
// 简化备注
// text:要编码的文本
// ecl: 二维码质量等级
public static QrCode EncodeText(string text, Ecc ecl)
{
Objects.RequireNonNull(text);
Objects.RequireNonNull(ecl);
var segments = QrSegment.MakeSegments(text);
return EncodeSegments(segments, ecl);
}
- ドローイング
- qrはビットマップのようなクラスに変換する必要があります。
https://www.nuget.org/packages/Net.Codecrete.QrCodeGenerator/2.0.3
異なるプラットフォームには異なるプログラムが必要です
Raster Images / Bitmaps Starting with .NET 6, System.Drawing is only supported on Windows operating system and thus cannot be used for multi-platform libraries like this one. Therefore, ToBitmap() has been removed and three options are now offered in the form of method extensions. To use it: Select one of the imaging libraries below Add the NuGet dependencies to your project Copy the appropriate QrCodeBitmapExtensions.cs file to your project Imaging library Recommendation NuGet dependencies Extension file System.Drawing For Windows only projects System.Drawing.Common QrCodeBitmapExtensions.cs SkiaSharp For macOS, Linux, iOS, Android and multi-platform projects SkiaSharp and SkiaSharp.NativeAssets.Linux (for Linux only) QrCodeBitmapExtensions.cs ImageSharp Currently in beta state SixLabors.ImageSharp.Drawing QrCodeBitmapExtensions.cs
** 上記の一般的な意味は、対応する変換メソッドを選択する必要性に応じて、対応するデモ拡張クラスをgithubで書いてあり、直接コピーできます。
- 我这里采用的是SkiaSharp， 需要先把上的qr转换成可以使用的SKBitmap，方法的话直接从プロジェクト的github上可以直接下载対応的拡張类，我这里直接放対応ソースコードリンク可以自己下载： QrCode转SkiaSharp(SKBitmap)源码 。
<param name="scale">The width and height, in pixels, of each module.(翻译: 宽度和高度,以像素为单位,每个模块)</param>
<param name="border">The number of border modules to add to each of the four sides.(翻译: 边界模块的数量增加的四个方面)</param>
var bmp = qr.ToBitmap(10, 2);
- BMPを取得した後、レイアウト設定に従って、画像のサイズをベースとして使用し、1/10が単語の高さになります。
int h = bmp.Height / 10;
- ブラシを作成すると、パラメータはより一般的です。
var paint = new SKPaint
{
Color = SKColors.Black,
IsAntialias = true,
IsLinearText = true,
TextEncoding = SKTextEncoding.Utf8,
Typeface = SKTypeface.FromFamilyName("微软雅黑"),
TextSize = h,
TextAlign = SKTextAlign.Left,
};
- 上部領域に2倍のサイズのブラシを作成します。
var tempPaint = paint.Clone();
tempPaint.TextSize = 2 * h;
- 描画テーブルスラブを作成する
SKSurface sKSurface = SKSurface.Create(
new SKImageInfo(bmp.Width * 3, bmp.Height * 2));
- キャンバスの作成と白塗り
var canvas = sKSurface.Canvas;
canvas.DrawColor(SKColors.White);
- 上部領域の描画通常は、あらかじめ描画された上部パターン
// 左边缩进一个单位 然后向下偏移四个单位
canvas.DrawText(top,
new SKPoint(01 * h, 04 * h),
tempPaint);
// top是string类型 内容是顶部区域的文字内容
// SKPoint就一个常规的x,y组成的point
// 记住是左上角为(0,0)右下角是(∞,∞)就对了
- タイトル領域の描画
// 首先根据自己写的算法把string转换成 List<string>
// 目的是为了文字过长的时候能够换行
var titles = GetTextLines(title, 28).ToList();
for (int i = 0; i < titles.Count; i++)
{
canvas.DrawText(
titles[i],
new SKPoint(01 * h, (07 + i) * h),
paint);
}
- 使用した改行アルゴリズムのソースコードは以下の通り
/// <summary>
/// 文字换行算法
/// </summary>
/// <param name="text">原文</param>
/// <param name="maxLength">单行最大字数</param>
/// <returns>多行</returns>
private static IEnumerable<string> GetTextLines(
string text, int maxLength)
{
// 注意 maxLength 是字数不是实际宽度
string[] words = text.Select(x => x.ToString()).ToArray(); //text.Split(' ');
List<string> lines = new List<string>();
string line = string.Empty;
foreach (string word in words)
{
//if (!string.IsNullOrEmpty(line))
//{
// line += " ";
//}
if (line.Length + word.Length <= maxLength)
{
line += word;
}
else
{
lines.Add(line);
line = word;
}
}
lines.Add(line);
return lines;
}
**注意これはネット上で見つけた部分修正で、私が0から書いたものではありません **
- 左下の2つのコード
// 因为二维码自身就对周围做了缩进处理 所以不需要再缩进
canvas.DrawBitmap(bmp, new SKPoint(00 * h, 10 * h));
- 右下のテキストコメント
int row = 1;
for (int i = 0; i < notes.Count; i++)
{
var strs = GetTextLines(notes[i], 18);
foreach (var str in strs)
{
// 右下角10h位置 并且左右各缩进1h
// row*h 文字下移位置
canvas.DrawText(str,
new SKPoint(10 * h, (10 + 1) * h + row * h),
paint);
row++;
}
}
- 最後のプロット。
// filename 要保存的文件名 记得是png文件
using (var image = sKSurface.Snapshot())
{
using (var writeStream = File.OpenWrite(filename))
{
// 80是品质 够了
image.Encode(
SKEncodedImageFormat.Png,
80)
.SaveTo(writeStream);
}
}
実際の効果
- コードのテスト
static void Main(string[] args)
{
// 二维码内容
string mes = "https://www.dotnet9.com/";
// 标题
string title = "ThingsGateway 基于net6/7+ ，跨平台边缘采集(物联网)网关";
// 文字备注
List<string> notes = new List<string>()
{
"Blazor Server架构，开发部署更简单",
"采集/上传配置完全支持Excel导入导出",
"插件式驱动，方便驱动二次开发",
"时序数据库存储",
"实时/历史报警(Sql转储)，支持布尔/高低限值",
};
string filename =
Path.Combine(Path.GetTempPath(), Guid.NewGuid() + ".png");
// 顶部区域内容
string top = "开源.NET 7和Blazor组合开发";
// 封装的方法
QrCreate.HorizontalDraw(mes, title, notes, filename, top);
Console.WriteLine(filename);
Console.ReadLine();
}
- テスト結果は
** 注：画像は白地ですが、現在のページも白地にある場合は画像のエッジが見えやすく、自分でダウンロードして見ることをお勧めします **