在本文中，我們將學習如何在帶有 Razor 頁面的 ASP.NET Core Web 應用程序中創建和顯示矢量圖形。為了創建令人驚嘆的矢量圖形，我們將使用 Aspose.Drawing 庫。在本分步指南中，我們將引導您完成將 Aspose.Drawing 集成到 ASP.NET Core Web 應用程序中的過程。
了解 .NET 的 Aspose.Drawing
Aspose.Drawing for .NET 是一個用於繪製矢量圖形的跨平台 2D 圖形庫。它使開發人員能夠以編程方式處理矢量圖形。該庫允許您在光柵圖像上渲染矢量圖形，例如直線、曲線、圖形以及文本。然後，圖像可以以所有常用的圖形格式保存，包括 BMP、PNG、JPEG、GIF 和 TIFF。
如何在 ASP.NET Core 網頁中創建和顯示矢量圖形
我們可以按照以下步驟在 ASP.NET Core Web 應用程序中創建和顯示矢量圖形：
創建 ASP.NET Core Web 應用程序項目
- 創建一個新項目並選擇 ASP.NET Core Web App 項目模板。
Select the project template.
之後，寫下項目名稱並進入下一步。
最後，選擇框架.NET 7.0(Standard Term Support)，選中Configure for HTTPS選項，然後單擊Create按鈕創建項目。
選擇項目框架
添加Aspose.Drawing NuGet包
- 打開 NuGet 包管理器並安裝 Aspose.Drawing for .NET 包。
安裝 Aspose.Drawing for .NET
添加圖像繪製代碼
- 打開 Pages\Index.cshtml.cs 並將其內容替換為以下腳本。
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Drawing;
namespace AsposeDrawingWebApplication.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public string imageSrc { get; set; }
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
public void OnGet()
{
imageSrc = "data:image/png;base64, " + Convert.ToBase64String(Draw(ImageFormat.Png).ToArray());
}
static MemoryStream Draw(ImageFormat format)
{
// 此代碼示例演示瞭如何繪製區域。
// 創建位圖
Bitmap bitmap = new Bitmap(1000, 800, System.Drawing.Imaging.PixelFormat.Format32bppPArgb);
// 位圖的初始圖形
Graphics graphics = Graphics.FromImage(bitmap);
graphics.SmoothingMode = SmoothingMode.AntiAlias;
// 初始化圖形路徑
GraphicsPath path = new GraphicsPath();
// 添加多邊形
path.AddPolygon(new Point[] { new Point(100, 400), new Point(500, 100), new Point(900, 400), new Point(500, 700) });
// 初始化一個區域
Region region = new Region(path);
// 內部圖形路徑
GraphicsPath innerPath = new GraphicsPath();
// 添加一個矩形
innerPath.AddRectangle(new Rectangle(300, 300, 400, 200));
// 排除內部路徑
region.Exclude(innerPath);
// 定義實心畫筆
Brush brush = new SolidBrush(Color.Green);
// 填充區域
graphics.FillRegion(brush, region);
MemoryStream result = new MemoryStream();
bitmap.Save(result, format);
result.Seek(0, SeekOrigin.Begin);
return result;
}
}
}
- 打開 Pages\Index.cshtml 並將其內容替換為以下腳本。
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<img src="@Model.imageSrc" />
</div>
添加Aspose.Drawing許可證文件
將包含 Aspose.Drawing 許可信息的 Aspose.Drawing.NET.lic 文件複製到項目目錄。從解決方案資源管理器中打開此文件屬性，並將“生成操作”設置為“嵌入式資源”。
之後，打開Program.cs並添加以下代碼以設置Aspose.Drawing許可證。
// 執照
System.Drawing.AsposeDrawing.執照 license = new System.Drawing.AsposeDrawing.執照();
license.Set執照("Aspose.Drawing.NET.lic");
- 最後，運行應用程序。
輸出
下載源代碼
您可以從 GitHub 下載完整的 ASP .NET Web 應用程序源代碼。
獲取免費許可證
如果您想不受任何限制地嘗試該庫，您可以獲得免費的臨時許可證。
Aspose.Drawing – 免費學習資源
您可以使用以下資源探索 Aspose.Drawing 庫的各種其他功能：
結論
總之，Aspose.Drawing 對於希望將動態且具有視覺吸引力的矢量圖形合併到其 Web 項目中的 ASP.NET Web 開發人員來說是一項寶貴的資產。通過遵循提供的步驟，您將使用 Aspose.Drawing 解鎖 Web 開發的新可能性。如有任何疑問，請通過我們的免費支持論壇與我們聯繫。