使用Drawing 类绘图

转自:http://wenku.baidu.com/link?url=a5im8VeEwlnKUaVQf57ZRHiIbAIhS77ycCh4yIx1_GDtL0qmz3_m7U1jvzi-ETyJj1joQzqQ-PBUpazF9w1SIoOOoGkY0W6sqPNDD5ORaJ3

一、原理:

ASP.NET页面中画出图表的关键步骤主要有两步

其一:创建一个图片对象(Bitmap)。然后利用.Net FrameWork SDK所提供的方法在此图片对象上面画出自己想要的图形,譬如画线,画点等。

其二:就是为了更适合传输,把此图片对象,以"Jpeg"格式保存,并显示出来。

二、简单实现:

1)创建一个动态图片

利用"System.Drawing"中的"Bitmap"类来实现的

//创建一个"Bitmap"对象

Bitmap bitmap = new Bitmap ( 400 , 400 ) ; 

2显示图片:

//"Jpeg"格式保存此图片对象,在客户端显示出来
bitmap . Save ( Response . OutputStream , ImageFormat . Jpeg );

 

三、特殊操作

首先根据"Bitmap"对象创建一个"Graphics"对象,然后根据此"Graphics"对象的方法来确定上色的图形类型(譬如显示的图片为椭圆、正方形等)。

(1) 给图片上色 (Brush)

FillRectangle(System.Drawing.Brush brush, float x, float y, float width, float height)

Graphics g = Graphics . FromImage (bitmap) ;
g . FillRectangle ( new SolidBrush ( Color . LightGreen ) , 0 , 0 , 400 , 400 ) ;

(2) 写字 (Brush)

DrawString(string s, System.Drawing.Font font, System.Drawing.Brush brush, float x, float y)

g.DrawString("我的图片"new Font("arial", 20,FontStyle.Bold)new SolidBrush(Color.FromArgb(255, 255, 255)),90,20);

(3) 画线 (Pen)

Pen pen = new Pen(Color.FromArgb(0,255,0),1);

g.DrawPie(pen,0,0,200,200,0,90);

扇形

DrawPie(System.Drawing.Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle)

弧线

DrawArc(System.Drawing.Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle)

椭圆

DrawEllipse(System.Drawing.Pen pen, float x, float y, float width, float height)

直线

DrawLine(System.Drawing.Pen pen, float x1, float y1, float x2, float y2)

矩形

DrawRectangle(System.Drawing.Pen pen, float x, float y, float width, float height)

多边形

DrawPolygon(System.Drawing.Pen pen, System.Drawing.Point[ ] points)


`vue-drawing-canvas` 是一个 Vue 组件库,用于在 Vue.js 应用中创建交互式的绘图面板。这个库允许你在 Web 页面上提供似绘画板的功能,用户可以直接绘制图形或涂鸦。 要开始使用 `vue-drawing-canvas`,请按照以下步骤进行: 1. **安装依赖**: 使用 npm 或 yarn 安装组件到你的项目中: ``` npm install vue-drawing-canvas // 或者 yarn add vue-drawing-canvas ``` 2. **注册并引入组件**: 在你的 `.vue` 文件中,通过 `import` 导入组件,然后在模板中使用它: ```html <template> <div id="myCanvas"> <drawing-canvas v-model="canvasData" :config="canvasConfig"></drawing-canvas> </div> </template> <script> import DrawingCanvas from 'vue-drawing-canvas'; export default { components: { DrawingCanvas }, data() { return { canvasData: null, // 存放画布数据 canvasConfig: { ... } // 设置画布配置(如颜色、线条样式等) }; } } </script> ``` 3. **初始化和配置**: 初始化 `canvasData` 和配置项。你可以设置默认的颜色、线条宽度、是否启用橡皮擦等功能。这些可以通过 `v-model` 与父组件的数据绑定,也可以根据需要动态调整。 4. **监听事件**: `vue-drawing-canvas` 提供了一些事件,比如 `onDraw`, `onClear`, 可以监听这些事件处理用户的操作。例如: ```javascript methods: { onDraw(e) { console.log('User drew:', e.data); } } ``` 5. **渲染数据**: 当用户在画布上画画时,`v-model` 的值会被更新。你可以在这个数据改变时做进一步处理,比如保存图片或者更新界面状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值