曲线与曲面的绘制

一、学习目标

（1）掌握常用规则参数曲线与曲面的编程绘制方法。

（2）掌握自由曲线与曲面的编程绘制方法。

（3）了解自由曲面的拼接编程方法。

二、学习内容

（1）编程绘一个规则参数曲线（如抛物线、星开线、心脏线）和规则参数曲面（如球、园柱、圆台、圆环线等）。

（2）编程绘制一个n次Bezier曲线和一个网格状三次Bezier曲面正轴测投影图。

三、实现代码

  (1)parametric_curves_surfaces.py，核心算法文件

import numpy as np
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D# 参数曲线绘制函数
def plot_parametric_curves():# 创建图形fig, axs = plt.subplots(2, 2, figsize=(12, 10))# 抛物线t = np.linspace(-2, 2, 100)x_parabola = ty_parabola = t**2axs[0, 0].plot(x_parabola, y_parabola)axs[0, 0].set_title('抛物线')# 星形线t = np.linspace(0, 2*np.pi, 100)x_astroid = np.cos(t)**3y_astroid = np.sin(t)**3axs[0, 1].plot(x_astroid, y_astroid)axs[0, 1].set_title('星形线')# 心脏线t = np.linspace(0, 2*np.pi, 100)x_cardioid = 2*np.cos(t) - np.cos(2*t)y_cardioid = 2*np.sin(t) - np.sin(2*t)axs[1, 0].plot(x_cardioid, y_cardioid)axs[1, 0].set_title('心脏线')plt.tight_layout()plt.show()# 参数曲面绘制函数
def plot_parametric_surfaces():fig = plt.figure(figsize=(15, 10))# 球面ax1 = fig.add_subplot(221, projection='3d')u = np.linspace(0, 2 * np.pi, 100)v = np.linspace(0, np.pi, 100)x_sphere = np.outer(np.cos(u), np.sin(v))y_sphere = np.outer(np.sin(u), np.sin(v))z_sphere = np.outer(np.ones(np.size(u)), np.cos(v))ax1.plot_surface(x_sphere, y_sphere, z_sphere)ax1.set_title('球面')# 圆柱面ax2 = fig.add_subplot(222, projection='3d')theta = np.linspace(0, 2*np.pi, 100)z = np.linspace(0, 1, 100)theta_grid, z_grid = np.meshgrid(theta, z)x_cylinder = np.cos(theta_grid)y_cylinder = np.sin(theta_grid)z_cylinder = z_gridax2.plot_surface(x_cylinder, y_cylinder, z_cylinder)ax2.set_title('圆柱面')# 圆台面ax3 = fig.add_subplot(223, projection='3d')r1, r2 = 1, 0.5theta = np.linspace(0, 2*np.pi, 100)z = np.linspace(0, 1, 100)theta_grid, z_grid = np.meshgrid(theta, z)r = r1 + (r2 - r1) * z_gridx_cone = r * np.cos(theta_grid)y_cone = r * np.sin(theta_grid)z_cone = z_gridax3.plot_surface(x_cone, y_cone, z_cone)ax3.set_title('圆台面')# 圆环面ax4 = fig.add_subplot(224, projection='3d')R, r = 2, 1u = np.linspace(0, 2*np.pi, 100)v = np.linspace(0, 2*np.pi, 100)u_grid, v_grid = np.meshgrid(u, v)x_torus = (R + r*np.cos(v_grid)) * np.cos(u_grid)y_torus = (R + r*np.cos(v_grid)) * np.sin(u_grid)z_torus = r * np.sin(v_grid)ax4.plot_surface(x_torus, y_torus, z_torus)ax4.set_title('圆环面')plt.tight_layout()plt.show()# Bezier曲线和曲面
def bezier_curve(points, t):n = len(points) - 1result = np.zeros(2)for i in range(n + 1):result += points[i] * comb(n, i) * (1 - t)**(n - i) * t**ireturn resultdef comb(n, k):return np.math.factorial(n) / (np.math.factorial(k) * np.math.factorial(n - k))def plot_bezier_curve():# 控制点points = np.array([[0, 0],[1, 2],[2, -1],[3, 1],[4, 0]])# 生成曲线点t = np.linspace(0, 1, 100)curve_points = np.array([bezier_curve(points, ti) for ti in t])# 绘制plt.figure(figsize=(8, 6))plt.plot(points[:, 0], points[:, 1], 'ro-', label='控制点')plt.plot(curve_points[:, 0], curve_points[:, 1], 'b-', label='Bezier曲线')plt.legend()plt.title('5次Bezier曲线')plt.grid(True)plt.show()def bezier_surface(points, u, v):n, m = points.shape[0] - 1, points.shape[1] - 1result = np.zeros(3)for i in range(n + 1):for j in range(m + 1):result += points[i, j] * comb(n, i) * comb(m, j) * (1 - u)**(n - i) * u**i * (1 - v)**(m - j) * v**jreturn resultdef plot_bezier_surface():# 控制点网格points = np.array([[[0, 0, 0], [1, 0, 1], [2, 0, 0]],[[0, 1, 1], [1, 1, 2], [2, 1, 1]],[[0, 2, 0], [1, 2, 1], [2, 2, 0]]])# 生成曲面点u = np.linspace(0, 1, 20)v = np.linspace(0, 1, 20)u_grid, v_grid = np.meshgrid(u, v)surface_points = np.zeros((len(u), len(v), 3))for i in range(len(u)):for j in range(len(v)):surface_points[i, j] = bezier_surface(points, u[i], v[j])# 绘制fig = plt.figure(figsize=(10, 8))ax = fig.add_subplot(111, projection='3d')# 绘制控制点网格for i in range(points.shape[0]):for j in range(points.shape[1]):ax.scatter(points[i, j, 0], points[i, j, 1], points[i, j, 2], color='red')# 绘制曲面ax.plot_surface(surface_points[:, :, 0], surface_points[:, :, 1], surface_points[:, :, 2], alpha=0.5)ax.set_title('3x3控制点网格的Bezier曲面')plt.show()if __name__ == "__main__":# 绘制参数曲线plot_parametric_curves()# 绘制参数曲面plot_parametric_surfaces()# 绘制Bezier曲线plot_bezier_curve()# 绘制Bezier曲面plot_bezier_surface() 

(2)app.py，使用Flask框架，提供参数曲线和曲面的Web可视化。

from flask import Flask, render_template, jsonify
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg
import io
import base64app = Flask(__name__)def get_parametric_curves():# 创建图形fig, axs = plt.subplots(2, 2, figsize=(12, 10))# 抛物线t = np.linspace(-2, 2, 100)x_parabola = ty_parabola = t**2axs[0, 0].plot(x_parabola, y_parabola, 'b-', linewidth=2)axs[0, 0].set_title('抛物线', fontsize=12)axs[0, 0].grid(True)# 星形线t = np.linspace(0, 2*np.pi, 100)x_astroid = np.cos(t)**3y_astroid = np.sin(t)**3axs[0, 1].plot(x_astroid, y_astroid, 'r-', linewidth=2)axs[0, 1].set_title('星形线', fontsize=12)axs[0, 1].grid(True)# 心脏线t = np.linspace(0, 2*np.pi, 100)x_cardioid = 2*np.cos(t) - np.cos(2*t)y_cardioid = 2*np.sin(t) - np.sin(2*t)axs[1, 0].plot(x_cardioid, y_cardioid, 'g-', linewidth=2)axs[1, 0].set_title('心脏线', fontsize=12)axs[1, 0].grid(True)plt.tight_layout()return fig_to_base64(fig)def get_parametric_surfaces():fig = plt.figure(figsize=(15, 10))# 球面ax1 = fig.add_subplot(221, projection='3d')u = np.linspace(0, 2 * np.pi, 100)v = np.linspace(0, np.pi, 100)x_sphere = np.outer(np.cos(u), np.sin(v))y_sphere = np.outer(np.sin(u), np.sin(v))z_sphere = np.outer(np.ones(np.size(u)), np.cos(v))ax1.plot_surface(x_sphere, y_sphere, z_sphere, cmap='viridis')ax1.set_title('球面', fontsize=12)# 圆柱面ax2 = fig.add_subplot(222, projection='3d')theta = np.linspace(0, 2*np.pi, 100)z = np.linspace(0, 1, 100)theta_grid, z_grid = np.meshgrid(theta, z)x_cylinder = np.cos(theta_grid)y_cylinder = np.sin(theta_grid)z_cylinder = z_gridax2.plot_surface(x_cylinder, y_cylinder, z_cylinder, cmap='plasma')ax2.set_title('圆柱面', fontsize=12)# 圆台面ax3 = fig.add_subplot(223, projection='3d')r1, r2 = 1, 0.5theta = np.linspace(0, 2*np.pi, 100)z = np.linspace(0, 1, 100)theta_grid, z_grid = np.meshgrid(theta, z)r = r1 + (r2 - r1) * z_gridx_cone = r * np.cos(theta_grid)y_cone = r * np.sin(theta_grid)z_cone = z_gridax3.plot_surface(x_cone, y_cone, z_cone, cmap='inferno')ax3.set_title('圆台面', fontsize=12)# 圆环面ax4 = fig.add_subplot(224, projection='3d')R, r = 2, 1u = np.linspace(0, 2*np.pi, 100)v = np.linspace(0, 2*np.pi, 100)u_grid, v_grid = np.meshgrid(u, v)x_torus = (R + r*np.cos(v_grid)) * np.cos(u_grid)y_torus = (R + r*np.cos(v_grid)) * np.sin(u_grid)z_torus = r * np.sin(v_grid)ax4.plot_surface(x_torus, y_torus, z_torus, cmap='magma')ax4.set_title('圆环面', fontsize=12)plt.tight_layout()return fig_to_base64(fig)def get_bezier_curve():points = np.array([[0, 0],[1, 2],[2, -1],[3, 1],[4, 0]])t = np.linspace(0, 1, 100)curve_points = np.array([bezier_curve(points, ti) for ti in t])plt.figure(figsize=(8, 6))plt.plot(points[:, 0], points[:, 1], 'ro-', label='控制点')plt.plot(curve_points[:, 0], curve_points[:, 1], 'b-', label='Bezier曲线')plt.legend()plt.title('5次Bezier曲线', fontsize=12)plt.grid(True)return fig_to_base64(plt.gcf())def get_bezier_surface():points = np.array([[[0, 0, 0], [1, 0, 1], [2, 0, 0]],[[0, 1, 1], [1, 1, 2], [2, 1, 1]],[[0, 2, 0], [1, 2, 1], [2, 2, 0]]])u = np.linspace(0, 1, 20)v = np.linspace(0, 1, 20)u_grid, v_grid = np.meshgrid(u, v)surface_points = np.zeros((len(u), len(v), 3))for i in range(len(u)):for j in range(len(v)):surface_points[i, j] = bezier_surface(points, u[i], v[j])fig = plt.figure(figsize=(10, 8))ax = fig.add_subplot(111, projection='3d')for i in range(points.shape[0]):for j in range(points.shape[1]):ax.scatter(points[i, j, 0], points[i, j, 1], points[i, j, 2], color='red')ax.plot_surface(surface_points[:, :, 0], surface_points[:, :, 1], surface_points[:, :, 2], alpha=0.5, cmap='viridis')ax.set_title('3x3控制点网格的Bezier曲面', fontsize=12)return fig_to_base64(fig)def bezier_curve(points, t):n = len(points) - 1result = np.zeros(2)for i in range(n + 1):result += points[i] * comb(n, i) * (1 - t)**(n - i) * t**ireturn resultdef bezier_surface(points, u, v):n, m = points.shape[0] - 1, points.shape[1] - 1result = np.zeros(3)for i in range(n + 1):for j in range(m + 1):result += points[i, j] * comb(n, i) * comb(m, j) * (1 - u)**(n - i) * u**i * (1 - v)**(m - j) * v**jreturn resultdef comb(n, k):return np.math.factorial(n) / (np.math.factorial(k) * np.math.factorial(n - k))def fig_to_base64(fig):canvas = FigureCanvasAgg(fig)buf = io.BytesIO()canvas.print_png(buf)data = base64.b64encode(buf.getvalue()).decode('utf-8')plt.close(fig)return data@app.route('/')
def index():return render_template('index.html')@app.route('/get_curves')
def get_curves():return jsonify({'parametric_curves': get_parametric_curves(),'parametric_surfaces': get_parametric_surfaces(),'bezier_curve': get_bezier_curve(),'bezier_surface': get_bezier_surface()})if __name__ == '__main__':app.run(debug=True) 

(3)HTML页面，可视化展示。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>参数曲线与曲面可视化</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"><style>body {background-color: #f8f9fa;padding-top: 20px;}.container {max-width: 1200px;}.card {margin-bottom: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border: none;}.card-header {background-color: #007bff;color: white;font-weight: bold;}.loading {text-align: center;padding: 20px;}.plot-container {text-align: center;padding: 10px;}.plot-container img {max-width: 100%;height: auto;border-radius: 5px;}h1 {color: #007bff;margin-bottom: 30px;text-align: center;}</style>
</head>
<body><div class="container"><h1>参数曲线与曲面可视化</h1><div class="row"><div class="col-md-6"><div class="card"><div class="card-header">参数曲线</div><div class="card-body"><div class="plot-container" id="parametric-curves"><div class="loading"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div></div></div></div></div></div><div class="col-md-6"><div class="card"><div class="card-header">参数曲面</div><div class="card-body"><div class="plot-container" id="parametric-surfaces"><div class="loading"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div></div></div></div></div></div></div><div class="row"><div class="col-md-6"><div class="card"><div class="card-header">Bezier曲线</div><div class="card-body"><div class="plot-container" id="bezier-curve"><div class="loading"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div></div></div></div></div></div><div class="col-md-6"><div class="card"><div class="card-header">Bezier曲面</div><div class="card-body"><div class="plot-container" id="bezier-surface"><div class="loading"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div></div></div></div></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script><script>// 加载所有图形fetch('/get_curves').then(response => response.json()).then(data => {// 更新参数曲线document.getElementById('parametric-curves').innerHTML = `<img src="data:image/png;base64,${data.parametric_curves}" alt="参数曲线">`;// 更新参数曲面document.getElementById('parametric-surfaces').innerHTML = `<img src="data:image/png;base64,${data.parametric_surfaces}" alt="参数曲面">`;// 更新Bezier曲线document.getElementById('bezier-curve').innerHTML = `<img src="data:image/png;base64,${data.bezier_curve}" alt="Bezier曲线">`;// 更新Bezier曲面document.getElementById('bezier-surface').innerHTML = `<img src="data:image/png;base64,${data.bezier_surface}" alt="Bezier曲面">`;}).catch(error => {console.error('Error:', error);document.querySelectorAll('.loading').forEach(el => {el.innerHTML = '<div class="alert alert-danger">加载失败，请刷新页面重试</div>';});});</script>
</body>
</html> 

四、运行结果

五、项目简介

# 参数曲线与曲面可视化项目

## 项目概述

本项目使用Python Flask框架和Matplotlib库，实现了多种参数曲线和曲面的可视化展示，包括Bezier曲线/曲面的算法实现。

## 功能模块

### 1. 参数曲线可视化

- 抛物线

- 星形线

- 心脏线

### 2. 参数曲面可视化

- 球面

- 圆柱面

- 圆台面

- 圆环面

### 3. Bezier曲线/曲面

- 5次Bezier曲线

- 3x3控制点网格的Bezier曲面

## 技术特点

- 使用Flask提供Web服务接口

- Matplotlib生成高质量图形

- 参数方程精确计算曲线/曲面

- 响应式前端展示

## 运行方式

```bash

pip install -r requirements.txt

python app.py

```

访问 http://localhost:5000 查看可视化效果