一个用D3D绘制2D图形的例子

 

思路如下:

(1)函数Do_Init初始化D3D,D3D设备,顶点缓冲,纹理;主要调用这几个函数:
         Direct3DCreate9,GetAdapterDisplayMode,CreateDevice,CreateVertexBuffer, Lock,Unlock,D3DXCreateTextureFromFile。

(2)函数Do_Frame绘制一帧,主要调用这几个函数:
        Clear,BeginScene,EndScene,SetStreamSource,SetFVF,SetTexture, DrawPrimitive。

(3)函数Do_Shutdown释放D3D资源。

源码如下:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以,下面是一个使用D3绘制甘特图的例子,代码和注释里有详细的解释。 ```javascript // 数据,包括任务名称、开始时间、结束时间、任务颜色等信息 const data = [ { name: '任务1', start: '2021-01-01', end: '2021-01-05', color: '#FFC107' }, { name: '任务2', start: '2021-01-06', end: '2021-01-10', color: '#4CAF50' }, { name: '任务3', start: '2021-01-11', end: '2021-01-15', color: '#2196F3' }, { name: '任务4', start: '2021-01-16', end: '2021-01-20', color: '#9C27B0' }, { name: '任务5', start: '2021-01-21', end: '2021-01-25', color: '#F44336' } ]; // SVG画布大小 const width = 600; const height = 200; // 在body中添加SVG画布 const svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); // 甘特图的横向比例尺,用于将时间转换为像素位置 const xScale = d3.scaleTime() .domain([new Date('2021-01-01'), new Date('2021-01-25')]) .range([0, width]); // 甘特图的纵向比例尺,用于将任务转换为像素位置 const yScale = d3.scaleBand() .domain(data.map(d => d.name)) .range([0, height]); // 绘制甘特图的条形块 const gantt = svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', d => xScale(new Date(d.start))) .attr('y', d => yScale(d.name)) .attr('width', d => xScale(new Date(d.end)) - xScale(new Date(d.start))) .attr('height', yScale.bandwidth()) .attr('fill', d => d.color); // 绘制甘特图的时间轴 const xAxis = d3.axisBottom(xScale); svg.append('g') .attr('transform', `translate(0, ${height})`) .call(xAxis); ``` 这段代码会生成一个简单的甘特图,包含五个任务,每个任务用不同的颜色表示,时间轴使用下方的x轴来表示。你可以根据需要修改数据或样式来适应自己的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值