用GDI+绘制图片
本节内容可以参考示例文件"CaseStudy\WebViewer\拦截响应.Table"的窗口"GDI+绘图"。
本节的任务是演示如何拦截图片资源请求，并用GDI+绘制图片，然后直接将绘制好的图片设置为Response显示。
提示：既然是开发Web应用，自然有大量优秀的图表库可以使用，一样都可以实现自动刷新绘制，而且能响应事件，这里只是提供了另一种可能。
设计步骤
1、为方便测试，直接在窗口的AfterLoad事件中生成网页，代码如下：
Dim
html
As
String
=<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>动态图片生成测试</title>
<style>
body { font-family: Arial; padding: 20px; }
.chart-container { margin: 20px 0; }
img { border: 1px solid #ccc; margin: 10px; }
</style>
</head>
<body>
<h1>动态图片生成测试</h1>
<div class="chart-container">
<h3>饼图</h3>
<img src="custom://chart/pie" alt="动态饼图"
id="pie-chart">
<button onclick="refreshImage('pie-chart', 'pie')">刷新</button>
</div>
<div class="chart-container">
<h3>柱状图</h3>
<img src="custom://chart/bar" alt="动态柱状图"
id="bar-chart">
<button onclick="refreshImage('bar-chart', 'bar')">刷新</button>
</div>
<script>
function refreshImage(imgId, chartType) {
const img = document.getElementById(imgId);
img.src = 'custom://chart/' + chartType + '?t=' + Date.now();
}
// 自动刷新
setInterval(() => {
refreshImage('pie-chart', 'pie');
refreshImage('bar-chart', 'bar');
}, 1000);
</script>
</body>
</html>
]]>.Value
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
'初始化浏览器
wv.NavigateToString(html)
网页中插入了两个图片，这两个图片的地址为"custom://chart/pie"和"custom://chart/bar"，这是个胡编的图片地址，所以现在你打开窗口，WebViewer并不会显示图片。
2、为了动态生成这两个图片，我们WebResourceRequested事件代码设置为：
Dim
wv
As
WebViewer = e.Sender.WebViewer
Dim
url = e.Request.Uri.ToLower()
If
url.StartsWith("custom://chart/")
Then
'如果使用的是我们"胡编"的图片地址
'
生成图表图片
Dim
fnt
As
New
Font("微软雅黑",
14)
Dim
chartType = url.Substring("custom://chart/".Length)
'获取图片类型
If
chartType.Contains("?")
Then
chartType = chartType.Split("?")(0)
'去掉
Using
bitmap
As
New
Bitmap(400, 300)
'图片宽度400像素，高度300像素
Using
g
As
Graphics = Graphics.FromImage(bitmap)
g.Clear(Color.White)
'白底
If
chartType.StartsWith("pie")
Then
'饼图
Dim
angle1
As
Integer
= Rand.Next(30, 160)
Dim
angle2
As
Integer
= Rand.Next(30, 160)
g.FillPie(Brushes.Red, 50, 50, 200, 200, 0, angle1)
g.FillPie(Brushes.Blue, 50, 50, 200, 200, angle1, angle2)
g.FillPie(Brushes.Green, 50, 50, 200, 200, angle1 + angle2, 360
- angle1 - angle2)
g.DrawString("动态饼图",
fnt, Brushes.Black, 150, 10)
ElseIf
chartType.StartsWith("bar")
Then
'柱状图
Dim
y1
As
Integer
= Rand.Next(50, 250)
Dim
y2
As
Integer
= Rand.Next(50, 250)
Dim
y3
As
Integer
= Rand.Next(50, 250)
g.FillRectangle(Brushes.Blue, 50, y1, 50, 300 - y1)
g.FillRectangle(Brushes.Green, 120, y2, 50, 300 - y2)
g.FillRectangle(Brushes.Red, 190, y3, 50, 300 - y3)
g.DrawString("动态柱状图",
fnt, Brushes.Black, 150, 10)
Else
'
默认图片
g.DrawString("未知图表类型",
fnt, Brushes.Red, 100, 100)
End
If
End
Using
'
转换为PNG内存流
Dim
ms
As
New
MemoryStream()
bitmap.Save(ms, ImageFormat.Png)
ms.Position =
0
e.Response =
wv.CoreWebView2.Environment.CreateWebResourceResponse( ms,
200,
"OK",
"Content-Type:image/png")
End
Using
End
If
现在就能显示图片了，而且每隔1秒刷新一下：