D3D 第一个HelloWorld

本文介绍了如何在Windows环境下利用DirectX9(D3D)创建并初始化设备,以及进行基本的绘制流程,包括Clear()、BeginScene()和EndScene()的调用,用于实现简单的渲染操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先需要Directx9的头文件以及两个全局的D3D设备对象,D3D设备

 #include <d3d9.h>
LPDIRECT3D9 g_pD3D = NULL;
LPDIRECT3DDEVICE9 g_pd3dDevice = NULL;
下面是Windows的Main函数,声明窗口,注册窗口类,生成一个hWnd窗口句柄。

ps: hIconSm ,hIcon等图标句柄一定要赋值,貌似不赋值无法创建窗口句柄,本人为win7环境

INT WINAPI WinMain(HINSTANCE hInstance,HINSTANCE hPrevInstance,LPSTR lpCmdLine,int nShowCmd)
{
	WNDCLASSEX wc;
	wc.cbSize			= sizeof(WNDCLASSEX);
	wc.cbClsExtra		= 0;
	wc.cbWndExtra		= 0;
	wc.hInstance		= hInstance;
	wc.hbrBackground	= (HBRUSH)GetStockObject(WHITE_BRUSH); 
	wc.hCursor			= LoadCursor(0, IDC_ARROW);
	wc.hIconSm			= LoadIcon(NULL,IDI_WINLOGO ); 
	wc.hIcon			= LoadIcon(NULL,IDI_APPLICATION);
	wc.lpszMenuName		= NULL;
	wc.lpszClassName	= "D3D Tutorial";
	wc.lpfnWndProc		= MsgProc;
	wc.style			= CS_HREDRAW|CS_VREDRAW;
	
	RegisterClassEx(&wc);

	HWND hWnd = CreateWindowEx(WS_EX_CLIENTEDGE,"D3D Tutorial","D3D Tutorial 01:Create Device",WS
### D3.js 的基本概念 D3.js 是一种基于数据操作文档的强大 JavaScript 库,主要用于创建动态、交互式的可视化图表。它通过绑定任意的数据到 DOM 中并应用数据驱动转换来实现这一目标[^1]。 以下是关于如何使用 D3.js 创建简单可视化的介绍: --- ### 引入 D3.js 库 为了在项目中使用 D3.js,首先需要引入该库。可以通过 CDN 方式加载最新版本的 D3.js 文件。例如,在 HTML 文件头部加入如下脚本标签即可完成引入工作: ```html <script src="https://d3js.org/d3.v7.min.js"></script> ``` 上述代码片段展示了如何从官方资源链接获取最新的压缩版 D3.js 脚本文件。 --- ### 基础示例:绘制简单的 SVG 图形 下面是一个基础的例子,展示如何利用 D3.js 绘制两个矩形图形,并分别标注它们的内容为 “Hello World 1” 和 “Hello World 2”。 #### 完整代码示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3.js Example</title> <!-- 引入 d3.js --> <script src="https://d3js.org/d3.v7.min.js"></script> </head> <body> <svg width="300" height="200"></svg> <script> const svg = d3.select("svg"); // 添加第一个矩形及其文字 svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 100) .attr("height", 50) .style("fill", "blue"); svg.append("text") .attr("x", 20) .attr("y", 40) .text("Hello World 1") .style("fill", "white"); // 添加第二个矩形及其文字 svg.append("rect") .attr("x", 120) .attr("y", 10) .attr("width", 100) .attr("height", 50) .style("fill", "green"); svg.append("text") .attr("x", 130) .attr("y", 40) .text("Hello World 2") .style("fill", "black"); </script> </body> </html> ``` 此代码实现了在一个 `SVG` 元素内部绘制两个不同颜色的矩形以及对应的文本标记功能。 --- ### 数据绑定与更新机制 除了静态绘图外,D3.js 还支持强大的数据绑定能力。可以将数组形式的数据映射至多个图形对象上,并自动处理新增、删除或者修改的情况。这种特性非常适合构建复杂而灵活的动态视图。 假设我们有一组数值 `[50, 100]` 表示宽度变化,则可通过以下方式重新定义上面例子中的矩形尺寸: ```javascript const data = [50, 100]; // Select all existing rectangles and bind the new dataset. const rects = svg.selectAll("rect").data(data); // Enter phase: Create missing elements as needed. rects.enter() .append("rect") .merge(rects) // Merge enter selection with update selection .attr("x", (d, i) => i * 110 + 10) .attr("y", 10) .attr("width", d => d) .attr("height", 50); // Exit phase: Remove extra elements not present in current dataset. rects.exit().remove(); ``` 以上代码演示了进入 (`enter`) 阶段用于添加新条目;退出 (`exit`) 阶段负责清理不再使用的节点。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值