003:D2D 性能测试-绘制不同对象的帧率变化

本文详细介绍了使用Direct2D进行D2D性能测试,重点关注了图像、矩形、圆和文本的绘制对帧率的影响。结果显示,文本绘制对帧率影响最大,而采用CBitmapRenderTarget进行缓冲区绘制并纹理贴图的方法能显著提升文本绘制的效率。然而,这种方法在窗口大小变化或文本内容频繁更新时可能存在弊端。通过测试,确认CBitmapRenderTarget是目前最优的解决方案,但具体实现仍需进一步测试。

前言:

       D2D性能测试,目的是了解D2D特性,为后续系统设计确定技术路线。主要对D2D绘制不同对方的速度进行测试,测试的对象包括:图像、文本、椭圆和矩形,测试绘制不同对象对帧率的影响。测试结果表明:以帧率下降速度最快排列,绘制文本帧率下降最快,其次是椭圆、矩形,影响最小的是图像。

       探讨了提高文本绘制的方法:采用CBitmapRenderTarget,类似于一个位图缓冲区,现在里面进行绘制,然后再纹理贴图的方式显示在屏幕上,速度飞起,但如果窗口大小经常变动或文字内容经常更改,则改方法存在一定的弊端。

一、绘制图像

     从硬盘读取一张JPG图像到CD2DBitmap(数据由硬盘,读取内存,在以纹理的方式存储到GPU的显存中,瓶颈在于图像的读取;另外是否要对图像进行修改也是需要考虑的,如果类似DICOM这样,需要调整窗宽窗位,频繁的修改图像,则图像在CPU端的修改,及内存到显存的传输是影像性能的关键),然后显示在窗口中,拖动窗口进行重新绘制,测试对帧率的影像,途中下方输出是绘制的帧率,可以看到对帧率基本没有影响。分析CD2DBitmap应该是以纹理的方式存在于GPU端,绘制的过程就等同于进行纹理贴图进,因此不会对帧率有什么影响。

 二、绘制矩形

       鼠标每单击窗口一次,在该位置绘制一个矩形,随着点击次数的增加,绘制帧率有所下降,但并不明显。每绘制一次,都需要传输矩形参数到GPU端。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> /* styles.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; } h1 { margin: 0; } main { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #box { display: flex; flex-direction: column; align-items: center; } .buttons { margin-bottom: 20px; } button { padding: 10px 20px; margin-right: 10px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .background-div { margin-bottom: 20px; } .background-btn { padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .content { width: 80%; background-color: #f9f9f9; padding: 20px; } h2 { margin-top: 0; } #todo-form { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; gap: 10px; } .input-field { padding: 10px; flex: 1; } .submit-btn { padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .list { height: 400px; } .item { height: 40px; border-radius: 4px; line-height: 40px; padding: 8px; margin-bottom: 8px; background-color: #eee; } .item:hover { background-color: #ccc; } .hidden { display: none; } #myCanvas { /* display: none; */ } </style> <body> <main> <div class="buttons"> <button class="start-btn" id="start-btn">开始录制</button> <button class="pause-btn">暂停录制</button> <button class="resume-btn">继续录制</button> <button class="stop-btn" id="stop-btn">结束录制</button> </div> <div id="box"> <video width="100%" height="100" src="抖音-记录美好生活.mp4" autoplay controls></video> <section class="content"> <h2>TODO LIST</h2> <div class="background-div"> <button class="background-btn">切换背景颜色</button> </div> <div id="todo-form"> <input type="text" class="input-field" placeholder="输入待办事项" /> <button type="submit" class="submit-btn">提交</button> </div> <div class="list"></div> </section> <canvas id="myCanvas"></canvas> </div> <img src="" alt="" class="hidden" /> </main> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script> // 假设我们有一个目标元素 #target 和一个用于绘制的 canvas 元素 #myCanvas const target = document.getElementById('box'); const canvas = document.getElementById('myCanvas'); const startBtn = document.getElementById('start-btn'); const stopBtn = document.getElementById('stop-btn'); let mediaRecorder; let recordedChunks = []; let animationId; let stream; async function captureCanvas() { try { // 使用html2canvas捕获目标元素 const canvasElement = await html2canvas(target); const ctx = canvas.getContext('2d'); // 将捕获的内容绘制到canvas上 canvas.width = canvasElement.width; canvas.height = canvasElement.height; ctx.drawImage(canvasElement, 0, 0); } catch (error) { console.error('捕获失败:', error); } } // 开始录制 startBtn.addEventListener('click', async () => { recordedChunks = []; // 先绘制一次,确保canvas有内容 await captureCanvas(); // 获取canvas的媒体流,设置帧率(例如30fps) stream = canvas.captureStream(30); mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' }); mediaRecorder.ondataavailable = event => { if (event.data.size > 0) { recordedChunks.push(event.data); } }; mediaRecorder.onstop = () => { // 合并数据并生成视频文件 const blob = new Blob(recordedChunks, { type: 'video/webm' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'recorded.webm'; a.click(); // 释放资源 stream.getTracks().forEach(track => track.stop()); URL.revokeObjectURL(url); }; mediaRecorder.start(); // 开始循环绘制,以保持视频流的持续生成 function updateCanvas() { captureCanvas().then(() => { animationId = requestAnimationFrame(updateCanvas); }); } updateCanvas(); }); // 停止录制 stopBtn.addEventListener('click', () => { mediaRecorder.stop(); cancelAnimationFrame(animationId); }); </script> </body> </html> 以上代码在html2canvas转视频是如何收录视频和音频,请给出一个完整的案例
最新发布
08-15
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伍心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值