图形裁剪算法

1.学习目标

理解区域编码(Region Code，RC)

设计Cohen-Sutherland直线裁剪算法

编程实现Cohen-Sutherland直线裁剪算法

2.具体代码

1.具体算法

/**
 * Cohen-Sutherland直线裁剪算法 - 优化版
 * @author AI Assistant
 * @license MIT
 */

// 区域编码常量 - 使用对象枚举以增强可读性
const RegionCode = Object.freeze({
  INSIDE: 0, // 0000
  LEFT: 1,   // 0001
  RIGHT: 2,  // 0010
  BOTTOM: 4, // 0100
  TOP: 8     // 1000
});

/**
 * 计算点的区域编码
 * @param {number} x - 点的x坐标
 * @param {number} y - 点的y坐标
 * @param {Object} clipWindow - 裁剪窗口
 * @returns {number} - 区域编码
 */
function computeCode(x, y, clipWindow) {
  const { xmin, ymin, xmax, ymax } = clipWindow;
  
  // 使用位运算计算区域编码
  let code = RegionCode.INSIDE;
  
  // 左/右测试
  if (x < xmin) {
    code |= RegionCode.LEFT;
  } else if (x > xmax) {
    code |= RegionCode.RIGHT;
  }
  
  // 下/上测试
  if (y < ymin) {
    code |= RegionCode.BOTTOM;
  } else if (y > ymax) {
    code |= RegionCode.TOP;
  }
  
  return code;
}

/**
 * 计算线段与裁剪窗口边界的交点
 * @param {number} code - 端点的区域编码
 * @param {Point} p1 - 线段起点
 * @param {Point} p2 - 线段终点
 * @param {Object} clipWindow - 裁剪窗口
 * @returns {Point} - 交点坐标
 */
function computeIntersection(code, p1, p2, clipWindow) {
  const { xmin, ymin, xmax, ymax } = clipWindow;
  const { x: x1, y: y1 } = p1;
  const { x: x2, y: y2 } = p2;
  
  let x, y;
  
  // 根据区域编码确定交点
  if ((code & RegionCode.TOP) !== 0) {
    // 与上边界相交
    x = x1 + (x2 - x1) * (ymax - y1) / (y2 - y1);
    y = ymax;
  } else if ((code & RegionCode.BOTTOM) !== 0) {
    // 与下边界相交
    x = x1 + (x2 - x1) * (ymin - y1) / (y2 - y1);
    y = ymin;
  } else if ((code & RegionCode.RIGHT) !== 0) {
    // 与右边界相交
    y = y1 + (y2 - y1) * (xmax - x1) / (x2 - x1);
    x = xmax;
  } else if ((code & RegionCode.LEFT) !== 0) {
    // 与左边界相交
    y = y1 + (y2 - y1) * (xmin - x1) / (x2 - x1);
    x = xmin;
  }
  
  return { x, y };
}

/**
 * Cohen-Sutherland直线裁剪算法
 * @param {Point} p1 - 线段起点 {x, y}
 * @param {Point} p2 - 线段终点 {x, y}
 * @param {Object} clipWindow - 裁剪窗口 {xmin, ymin, xmax, ymax}
 * @returns {Object|null} - 裁剪后的线段坐标，如果线段完全在窗口外则返回null
 */
function cohenSutherlandClip(p1, p2, clipWindow) {
  // 创建点的副本，避免修改原始数据
  let point1 = { ...p1 };
  let point2 = { ...p2 };
  
  // 计算端点的区域编码
  let code1 = computeCode(point1.x, point1.y, clipWindow);
  let code2 = computeCode(point2.x, point2.y, clipWindow);
  
  let isAccepted = false;
  
  // 主循环
  while (true) {
    // 情况1: 两端点都在裁剪窗口内
    if ((code1 | code2) === 0) {
      isAccepted = true;
      break;
    }
    
    // 情况2: 两端点都在裁剪窗口外的同一区域
    else if ((code1 & code2) !== 0) {
      break;
    }
    
    // 情况3: 线段部分在裁剪窗口内，需要裁剪
    else {
      // 选择一个在窗口外的端点
      const outCode = code1 !== 0 ? code1 : code2;
      
      // 计算交点
      const intersection = computeIntersection(
        outCode, 
        point1, 
        point2, 
        clipWindow
      );
      
      // 更新端点和区域编码
      if (outCode === code1) {
        point1 = intersection;
        code1 = computeCode(point1.x, point1.y, clipWindow);
      } else {
        point2 = intersection;
        code2 = computeCode(point2.x, point2.y, clipWindow);
      }
    }
  }
  
  // 返回裁剪结果
  return isAccepted ? {
    x1: point1.x,
    y1: point1.y,
    x2: point2.x,
    y2: point2.y
  } : null;
}

/**
 * 绘制裁剪窗口
 * @param {CanvasRenderingContext2D} ctx - Canvas上下文
 * @param {Object} clipWindow - 裁剪窗口
 * @param {Object} style - 绘制样式
 */
function drawClipWindow(ctx, clipWindow, style = {}) {
  const { xmin, ymin, xmax, ymax } = clipWindow;
  const { 
    strokeStyle = 'blue', 
    lineWidth = 2,
    fillStyle = 'rgba(200, 220, 255, 0.1)'
  } = style;
  
  ctx.save();
  
  // 设置样式
  ctx.strokeStyle = strokeStyle;
  ctx.lineWidth = lineWidth;
  ctx.fillStyle = fillStyle;
  
  // 绘制填充矩形
  ctx.fillRect(xmin, ymin, xmax - xmin, ymax - ymin);
  
  // 绘制边框
  ctx.strokeRect(xmin, ymin, xmax - xmin, ymax - ymin);
  
  // 绘制区域标签
  ctx.font = '12px Arial';
  ctx.fillStyle = 'rgba(0, 0, 100, 0.7)';
  ctx.textAlign = 'center';
  
  // 标记窗口四角的区域编码
  const padding = 15;
  ctx.fillText('1001', xmin - padding, ymin - padding);  // 左上
  ctx.fillText('1010', xmax + padding, ymin - padding);  // 右上
  ctx.fillText('0101', xmin - padding, ymax + padding);  // 左下
  ctx.fillText('0110', xmax + padding, ymax + padding);  // 右下
  
  ctx.restore();
}

/**
 * 绘制线段
 * @param {CanvasRenderingContext2D} ctx - Canvas上下文
 * @param {Object} line - 线段数据
 * @param {Object} style - 绘制样式
 */
function drawLine(ctx, line, style = {}) {
  const { x1, y1, x2, y2 } = line;
  const { 
    strokeStyle = 'red', 
    lineWidth = 1.5,
    drawEndpoints = false,
    endpointRadius = 4,
    dashPattern = []
  } = style;
  
  ctx.save();
  
  // 设置样式
  ctx.strokeStyle = strokeStyle;
  ctx.lineWidth = lineWidth;
  
  if (dashPattern.length > 0) {
    ctx.setLineDash(dashPattern);
  }
  
  // 绘制线段
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  
  // 绘制端点
  if (drawEndpoints) {
    ctx.fillStyle = strokeStyle;
    
    // 起点
    ctx.beginPath();
    ctx.arc(x1, y1, endpointRadius, 0, Math.PI * 2);
    ctx.fill();
    
    // 终点
    ctx.beginPath();
    ctx.arc(x2, y2, endpointRadius, 0, Math.PI * 2);
    ctx.fill();
  }
  
  ctx.restore();
}

/**
 * 获取线段区域编码的文本描述
 * @param {number} code - 区域编码
 * @returns {string} - 编码的二进制表示
 */
function getRegionCodeText(code) {
  // 将编码转换为4位二进制字符串
  return (code | 0).toString(2).padStart(4, '0');
}

// 导出所有函数和常量
export {
  RegionCode,
  computeCode,
  cohenSutherlandClip,
  drawClipWindow,
  drawLine,
  getRegionCodeText
};

2.服务器配置

const http = require('http');
const fs = require('fs');
const path = require('path');

const PORT = 3000;

// MIME类型映射
const mimeTypes = {
  '.html': 'text/html',
  '.js': 'text/javascript',
  '.css': 'text/css',
  '.json': 'application/json',
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.gif': 'image/gif',
  '.svg': 'image/svg+xml',
  '.ico': 'image/x-icon'
};

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  console.log(`请求: ${req.url}`);
  
  // 处理主页请求
  let filePath = '.' + req.url;
  if (filePath === './') {
    filePath = './cohenSutherlandDemo.html';
  }
  
  // 获取文件扩展名
  const extname = path.extname(filePath);
  
  // 设置默认的MIME类型
  let contentType = mimeTypes[extname] || 'application/octet-stream';
  
  // 读取文件
  fs.readFile(filePath, (err, content) => {
    if (err) {
      if (err.code === 'ENOENT') {
        // 文件未找到
        res.writeHead(404);
        res.end('404 Not Found');
      } else {
        // 服务器错误
        res.writeHead(500);
        res.end(`Server Error: ${err.code}`);
      }
    } else {
      // 成功响应
      // 添加正确的CORS头部，以允许ES模块加载
      res.writeHead(200, { 
        'Content-Type': contentType,
        'Access-Control-Allow-Origin': '*'
      });
      res.end(content, 'utf-8');
    }
  });
});

// 启动服务器
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}/`);
  console.log('请使用浏览器访问上述地址查看Cohen-Sutherland算法演示');
});

3.HTML前端页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cohen-Sutherland直线裁剪算法演示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        :root {
            --primary-color: #3f51b5;
            --secondary-color: #f50057;
            --success-color: #4caf50;
            --bg-color: #f8f9fa;
            --canvas-bg: #ffffff;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            background-color: var(--bg-color);
            margin: 0;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 20px;
            font-weight: bold;
            font-size: 2rem;
        }
        
        .canvas-container {
            position: relative;
            margin: 20px 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        #canvas {
            display: block;
            background-color: var(--canvas-bg);
            width: 100%;
            height: 500px;
            cursor: default;
        }
        
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-danger {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
        }
        
        .legend {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }
        
        .legend-color {
            width: 20px;
            height: 3px;
            margin-right: 8px;
            border-radius: 2px;
        }
        
        .legend-point {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .blue {
            background-color: var(--primary-color);
        }
        
        .red {
            background-color: var(--secondary-color);
        }
        
        .green {
            background-color: var(--success-color);
        }
        
        .status-bar {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: #f5f5f5;
            font-family: monospace;
            min-height: 40px;
        }
        
        .point-info {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        
        .info-card {
            background-color: #f5f5f5;
            border-radius: 5px;
            padding: 10px;
            width: 48%;
            margin-bottom: 10px;
        }
        
        .code-display {
            font-family: monospace;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.8rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Cohen-Sutherland直线裁剪算法演示</h1>
        
        <div class="controls">
            <button id="drawLineBtn" class="btn btn-primary">
                <i class="bi bi-pencil"></i> 绘制新线段
            </button>
            <button id="clipBtn" class="btn btn-success">
                <i class="bi bi-scissors"></i> 裁剪线段
            </button>
            <button id="resetBtn" class="btn btn-danger">
                <i class="bi bi-trash"></i> 重置
            </button>
            <button id="toggleCodeBtn" class="btn btn-secondary">
                <i class="bi bi-code-slash"></i> 显示/隐藏区域编码
            </button>
        </div>
        
        <div class="canvas-container">
            <canvas id="canvas"></canvas>
        </div>
        
        <div class="status-bar" id="statusBar">准备就绪。点击"绘制新线段"按钮开始。</div>
        
        <div class="point-info">
            <div class="info-card" id="point1Info">
                <h5>起点：</h5>
                <p>坐标：<span id="p1Coords">-</span></p>
                <p>区域编码：<span class="code-display" id="p1Code">-</span></p>
            </div>
            <div class="info-card" id="point2Info">
                <h5>终点：</h5>
                <p>坐标：<span id="p2Coords">-</span></p>
                <p>区域编码：<span class="code-display" id="p2Code">-</span></p>
            </div>
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color blue"></div>
                <span>裁剪窗口</span>
            </div>
            <div class="legend-item">
                <div class="legend-color red"></div>
                <span>原始线段</span>
            </div>
            <div class="legend-item">
                <div class="legend-color green"></div>
                <span>裁剪后的线段</span>
            </div>
            <div class="legend-item">
                <div class="legend-point red"></div>
                <span>线段端点</span>
            </div>
        </div>
        
        <footer>
            Cohen-Sutherland直线裁剪算法 &copy; 2023
        </footer>
    </div>
    
    <script type="module">
        // 导入优化后的Cohen-Sutherland模块
        import { 
            RegionCode, 
            computeCode, 
            cohenSutherlandClip,
            drawClipWindow,
            drawLine,
            getRegionCodeText
        } from './cohenSutherland.js';
        
        // DOM元素
        const canvas = document.getElementById('canvas');
        const statusBar = document.getElementById('statusBar');
        const p1CoordsElem = document.getElementById('p1Coords');
        const p2CoordsElem = document.getElementById('p2Coords');
        const p1CodeElem = document.getElementById('p1Code');
        const p2CodeElem = document.getElementById('p2Code');
        
        // 调整Canvas以适应容器大小
        function setupCanvas() {
            // 获取容器的宽度，高度固定为500px
            const containerWidth = canvas.parentElement.clientWidth;
            canvas.width = containerWidth;
            canvas.height = 500;
        }
        
        // 调用初始化
        setupCanvas();
        
        // 监听窗口大小变化，调整Canvas
        window.addEventListener('resize', setupCanvas);
        
        // 获取Canvas上下文
        const ctx = canvas.getContext('2d');
        
        // 裁剪窗口定义
        const clipWindow = {
            xmin: Math.round(canvas.width * 0.25),
            ymin: Math.round(canvas.height * 0.25),
            xmax: Math.round(canvas.width * 0.75),
            ymax: Math.round(canvas.height * 0.75)
        };
        
        // 状态变量
        let lines = [];
        let isDrawing = false;
        let startPoint = null;
        let selectedLine = null;
        let showRegionCodes = false;
        
        // 更新状态栏
        function updateStatus(message) {
            statusBar.textContent = message;
        }
        
        // 更新点信息
        function updatePointInfo(p1, p2) {
            if (p1) {
                p1CoordsElem.textContent = `(${Math.round(p1.x)}, ${Math.round(p1.y)})`;
                const code = computeCode(p1.x, p1.y, clipWindow);
                p1CodeElem.textContent = getRegionCodeText(code);
            } else {
                p1CoordsElem.textContent = '-';
                p1CodeElem.textContent = '-';
            }
            
            if (p2) {
                p2CoordsElem.textContent = `(${Math.round(p2.x)}, ${Math.round(p2.y)})`;
                const code = computeCode(p2.x, p2.y, clipWindow);
                p2CodeElem.textContent = getRegionCodeText(code);
            } else {
                p2CoordsElem.textContent = '-';
                p2CodeElem.textContent = '-';
            }
        }
        
        // 绘制所有元素
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制裁剪窗口
            drawClipWindow(ctx, clipWindow, {
                strokeStyle: '#3f51b5',
                lineWidth: 2,
                fillStyle: 'rgba(63, 81, 181, 0.05)'
            });
            
            // 绘制区域编码标记
            if (showRegionCodes) {
                // 绘制中心区域标记
                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                ctx.font = '12px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                
                // 中心区域
                ctx.fillText('0000', (clipWindow.xmin + clipWindow.xmax) / 2, (clipWindow.ymin + clipWindow.ymax) / 2);
                
                // 上方区域
                ctx.fillText('1000', (clipWindow.xmin + clipWindow.xmax) / 2, clipWindow.ymin / 2);
                
                // 下方区域
                ctx.fillText('0100', (clipWindow.xmin + clipWindow.xmax) / 2, (clipWindow.ymax + canvas.height) / 2);
                
                // 左方区域
                ctx.fillText('0001', clipWindow.xmin / 2, (clipWindow.ymin + clipWindow.ymax) / 2);
                
                // 右方区域
                ctx.fillText('0010', (clipWindow.xmax + canvas.width) / 2, (clipWindow.ymin + clipWindow.ymax) / 2);
            }
            
            // 绘制所有线段
            for (const line of lines) {
                // 原始线段
                drawLine(ctx, line, {
                    strokeStyle: '#f50057',
                    lineWidth: 1.5,
                    drawEndpoints: true,
                    endpointRadius: 4
                });
                
                // 如果有裁剪结果，绘制裁剪后的线段
                if (line.clipped) {
                    drawLine(ctx, line.clipped, {
                        strokeStyle: '#4caf50',
                        lineWidth: 2.5,
                        dashPattern: [],
                        drawEndpoints: true,
                        endpointRadius: 4
                    });
                }
            }
            
            // 如果正在绘制，显示预览线段
            if (isDrawing && startPoint) {
                const mousePos = canvas.mousePosition || { x: 0, y: 0 };
                drawLine(ctx, {
                    x1: startPoint.x,
                    y1: startPoint.y,
                    x2: mousePos.x,
                    y2: mousePos.y
                }, {
                    strokeStyle: 'rgba(245, 0, 87, 0.5)',
                    lineWidth: 1.5,
                    dashPattern: [5, 3],
                    drawEndpoints: true
                });
            }
        }
        
        // 为所有线段应用裁剪算法
        function clipAllLines() {
            if (lines.length === 0) {
                updateStatus('没有线段可裁剪！');
                return;
            }
            
            for (const line of lines) {
                // 使用优化后的接口调用裁剪算法
                line.clipped = cohenSutherlandClip(
                    { x: line.x1, y: line.y1 },
                    { x: line.x2, y: line.y2 },
                    clipWindow
                );
            }
            
            redraw();
            updateStatus(`已完成${lines.length}条线段的裁剪。`);
        }
        
        // 绑定按钮事件
        document.getElementById('drawLineBtn').addEventListener('click', function() {
            if (isDrawing) {
                isDrawing = false;
                startPoint = null;
                canvas.style.cursor = 'default';
                updateStatus('取消绘制线段。');
            } else {
                isDrawing = true;
                startPoint = null;
                canvas.style.cursor = 'crosshair';
                updateStatus('请点击绘制线段的起点...');
            }
        });
        
        document.getElementById('clipBtn').addEventListener('click', function() {
            clipAllLines();
        });
        
        document.getElementById('resetBtn').addEventListener('click', function() {
            lines = [];
            isDrawing = false;
            startPoint = null;
            selectedLine = null;
            canvas.style.cursor = 'default';
            updatePointInfo(null, null);
            updateStatus('已重置。点击"绘制新线段"按钮开始。');
            redraw();
        });
        
        document.getElementById('toggleCodeBtn').addEventListener('click', function() {
            showRegionCodes = !showRegionCodes;
            redraw();
            updateStatus(showRegionCodes ? '显示区域编码。' : '隐藏区域编码。');
        });
        
        // 跟踪鼠标位置
        canvas.addEventListener('mousemove', function(e) {
            const rect = canvas.getBoundingClientRect();
            canvas.mousePosition = {
                x: e.clientX - rect.left,
                y: e.clientY - rect.top
            };
            
            // 如果正在绘制，更新预览
            if (isDrawing && startPoint) {
                redraw();
            }
        });
        
        // 处理鼠标点击
        canvas.addEventListener('mousedown', function(e) {
            if (!isDrawing) return;
            
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            if (!startPoint) {
                // 设置起点
                startPoint = { x, y };
                updateStatus('请点击绘制线段的终点...');
                updatePointInfo({ x, y }, null);
            } else {
                // 设置终点，创建线段
                const endPoint = { x, y };
                
                // 创建新线段
                const newLine = {
                    x1: startPoint.x,
                    y1: startPoint.y,
                    x2: x,
                    y2: y,
                    clipped: null
                };
                
                lines.push(newLine);
                
                // 更新点信息
                updatePointInfo(startPoint, endPoint);
                
                // 重置绘制状态
                startPoint = null;
                isDrawing = false;
                canvas.style.cursor = 'default';
                
                updateStatus(`已添加线段 #${lines.length}。点击"裁剪线段"查看结果。`);
                redraw();
            }
        });
        
        // 初始绘制
        redraw();
        
        // 添加键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                // ESC键取消绘制
                if (isDrawing) {
                    isDrawing = false;
                    startPoint = null;
                    canvas.style.cursor = 'default';
                    updateStatus('取消绘制线段。');
                    redraw();
                }
            }
        });
    </script>
    
    <!-- 添加Bootstrap图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
</body>
</html>

3.运行结果

4.详细介绍

# Cohen-Sutherland直线裁剪算法演示

这是一个交互式的Cohen-Sutherland直线裁剪算法演示项目，使用现代JavaScript和Canvas技术实现。

## 项目介绍

Cohen-Sutherland算法是一种经典的二维直线裁剪算法，用于确定一条线段是否与给定的矩形窗口相交，并计算交点。该算法使用区域编码（Region Code）来快速判断线段是否需要裁剪。

### 主要特点

- 交互式线段绘制和裁剪

- 美观的用户界面

- 实时显示区域编码

- 详细的算法步骤可视化

- 响应式设计，适应不同屏幕大小

## 文件结构

- `cohenSutherland.js` - 算法核心实现，使用现代ES模块

- `cohenSutherlandDemo.html` - 交互式演示界面

- `server.js` - 用于本地运行的简易HTTP服务器

- `README.md` - 项目说明文档

## 使用方法

1. 启动本地服务器：

```bash

node server.js

```

2. 打开浏览器访问 `http://localhost:3000`

3. 使用界面功能：

- 点击"绘制新线段"按钮，然后在画布上点击两次定义一条线段

- 点击"裁剪线段"按钮对绘制的线段进行裁剪

- 点击"显示/隐藏区域编码"按钮查看区域编码

- 点击"重置"按钮清除所有线段

## 区域编码说明

Cohen-Sutherland算法将二维平面划分为9个区域，使用4位二进制编码表示点所在的区域：

```

1001 | 1000 | 1010

----------------------

0001 | 0000 | 0010

----------------------

0101 | 0100 | 0110

```

每一位的含义：

- 第1位（LEFT）：点在窗口左侧 (0001)

- 第2位（RIGHT）：点在窗口右侧 (0010)

- 第3位（BOTTOM）：点在窗口下方 (0100)

- 第4位（TOP）：点在窗口上方 (1000)

中间区域（0000）表示点在窗口内部。

## 算法步骤

1. 计算线段两个端点P1(x1,y1)和P2(x2,y2)的区域编码code1和code2

2. 如果(code1 | code2) == 0，说明两点都在窗口内，直接接受该线段

3. 如果(code1 & code2) != 0，说明线段完全在窗口外的同一侧，直接拒绝该线段

4. 否则，线段部分在窗口内，需要裁剪：

- 选择一个在窗口外的端点

- 根据区域编码确定端点与窗口边界的交点

- 用交点替换原来的端点

- 重新计算新端点的区域编码

- 重复上述步骤，直到两点都在窗口内或线段被拒绝

## 技术栈

- 原生JavaScript (ES6+)

- HTML5 Canvas

- CSS3

- Bootstrap 5 (样式)

- Node.js (本地服务器)