PGM地图编辑器

[V0_FILE]html:file="pgm-editor.html" isMerged="true" PGM地图编辑器

灰度值: 0

请选择一个PGM文件开始编辑

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Upload, Download, Square, Eraser, Info, FileText } from "lucide-react" interface PGMData { width: number height: number maxVal: number data: Uint8Array originalData: Uint8Array } interface DrawingElement { type: "rectangle" x: number y: number width: number height: number grayValue: number id: string } export default function PGMEditor() { const [pgmData, setPgmData] = useState(null) const [currentTool, setCurrentTool] = useState<"rectangle" | "eraser">("rectangle") const [grayValue, setGrayValue] = useState([128]) const [isDrawing, setIsDrawing] = useState(false) const [startPos, setStartPos] = useState<{ x: number; y: number } | null>(null) const [fileName, setFileName] = useState("") const [drawingElements, setDrawingElements] = useState([]) const canvasRef = useRef(null) const fileInputRef = useRef(null) const xmlFileInputRef = useRef(null) // Parse PGM P5 binary format const parsePGM = useCallback((buffer: ArrayBuffer): PGMData | null => { const view = new Uint8Array(buffer) let offset = 0 const readNextToken = (): string | null => { let token = "" let inComment = false while (offset < view.length) { const char = String.fromCharCode(view[offset]) offset++ if (char === "#") { inComment = true continue } if (char === "\n" || char === "\r") { inComment = false if (token.length > 0) { return token } continue } if (inComment) { continue } if (char === " " || char === "\t") { if (token.length > 0) { return token } continue } token += char } return token.length > 0 ? token : null } // Read magic number const magic = readNextToken() if (magic !== "P5") { alert("Only P5 (binary) PGM format is supported") return null } // Read width const widthStr = readNextToken() if (!widthStr) { alert("Invalid PGM header: missing width") return null } const width = Number.parseInt(widthStr) // Read height const heightStr = readNextToken() if (!heightStr) { alert("Invalid PGM header: missing height") return null } const height = Number.parseInt(heightStr) // Read max value const maxValStr = readNextToken() if (!maxValStr) { alert("Invalid PGM header: missing max value") return null } const maxVal = Number.parseInt(maxValStr) if (!width || !height || !maxVal || width <= 0 || height <= 0 || maxVal <= 0) { alert("Invalid PGM header values") return null } // Read pixel data const expectedSize = width * height const remainingBytes = view.length - offset if (remainingBytes < expectedSize) { alert(`Invalid PGM data size: expected ${expectedSize} bytes, got ${remainingBytes} bytes`) return null } const pixelData = view.slice(offset, offset + expectedSize) return { width, height, maxVal, data: new Uint8Array(pixelData), originalData: new Uint8Array(pixelData), } }, []) const applyDrawingElements = useCallback((baseData: PGMData, elements: DrawingElement[]): Uint8Array => { const newData = new Uint8Array(baseData.data) elements.forEach((element) => { if (element.type === "rectangle") { const value = Math.round((element.grayValue / 255) * baseData.maxVal) for (let y = element.y; y < element.y + element.height; y++) { for (let x = element.x; x < element.x + element.width; x++) { if (x >= 0 && x < baseData.width && y >= 0 && y < baseData.height) { const index = y * baseData.width + x newData[index] = value } } } } }) return newData }, []) // Draw PGM data to canvas const drawToCanvas = useCallback( (data: PGMData, elements: DrawingElement[] = []) => { const canvas = canvasRef.current if (!canvas) return canvas.width = data.width canvas.height = data.height const ctx = canvas.getContext("2d") if (!ctx) return const finalData = applyDrawingElements(data, elements) const imageData = ctx.createImageData(data.width, data.height) for (let i = 0; i < finalData.length; i++) { const pixelIndex = i * 4 const grayValue = (finalData[i] / data.maxVal) * 255 imageData.data[pixelIndex] = grayValue // R imageData.data[pixelIndex + 1] = grayValue // G imageData.data[pixelIndex + 2] = grayValue // B imageData.data[pixelIndex + 3] = 255 // A } ctx.putImageData(imageData, 0, 0) }, [applyDrawingElements], ) // Handle file upload const handleFileUpload = useCallback( (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return setFileName(file.name) const reader = new FileReader() reader.onload = (e) => { const buffer = e.target?.result as ArrayBuffer const parsed = parsePGM(buffer) if (parsed) { setPgmData(parsed) drawToCanvas(parsed, drawingElements) } } reader.readAsArrayBuffer(file) }, [parsePGM, drawToCanvas, drawingElements], ) const saveXML = useCallback(() => { if (drawingElements.length === 0) { alert("No drawing elements to save") return } const xmlContent = ` ${drawingElements .map( (element) => ` `, ) .join("\n")} ` const blob = new Blob([xmlContent], { type: "application/xml" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = fileName.replace(".pgm", "_elements.xml") || "drawing_elements.xml" document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) }, [drawingElements, fileName]) const handleXMLUpload = useCallback( (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return const reader = new FileReader() reader.onload = (e) => { const xmlContent = e.target?.result as string try { const parser = new DOMParser() const xmlDoc = parser.parseFromString(xmlContent, "application/xml") const rectangles = xmlDoc.getElementsByTagName("rectangle") const elements: DrawingElement[] = [] for (let i = 0; i < rectangles.length; i++) { const rect = rectangles[i] elements.push({ type: "rectangle", id: rect.getAttribute("id") || `rect_${Date.now()}_${i}`, x: Number.parseInt(rect.getAttribute("x") || "0"), y: Number.parseInt(rect.getAttribute("y") || "0"), width: Number.parseInt(rect.getAttribute("width") || "0"), height: Number.parseInt(rect.getAttribute("height") || "0"), grayValue: Number.parseInt(rect.getAttribute("grayValue") || "128"), }) } setDrawingElements(elements) if (pgmData) { drawToCanvas(pgmData, elements) } } catch (error) { alert("Error parsing XML file") } } reader.readAsText(file) }, [pgmData, drawToCanvas], ) // Get canvas coordinates from mouse event const getCanvasCoords = useCallback((event: React.MouseEvent) => { const canvas = canvasRef.current if (!canvas) return { x: 0, y: 0 } const rect = canvas.getBoundingClientRect() const scaleX = canvas.width / rect.width const scaleY = canvas.height / rect.height return { x: Math.floor((event.clientX - rect.left) * scaleX), y: Math.floor((event.clientY - rect.top) * scaleY), } }, []) // Handle mouse down const handleMouseDown = useCallback( (event: React.MouseEvent) => { if (!pgmData) return const coords = getCanvasCoords(event) setIsDrawing(true) setStartPos(coords) }, [pgmData, getCanvasCoords], ) // Handle mouse up const handleMouseUp = useCallback( (event: React.MouseEvent) => { if (!pgmData || !isDrawing || !startPos) return const coords = getCanvasCoords(event) if (currentTool === "rectangle") { const minX = Math.min(startPos.x, coords.x) const maxX = Math.max(startPos.x, coords.x) const minY = Math.min(startPos.y, coords.y) const maxY = Math.max(startPos.y, coords.y) const newElement: DrawingElement = { type: "rectangle", id: `rect_${Date.now()}`, x: minX, y: minY, width: maxX - minX + 1, height: maxY - minY + 1, grayValue: grayValue[0], } const newElements = [...drawingElements, newElement] setDrawingElements(newElements) drawToCanvas(pgmData, newElements) } else if (currentTool === "eraser") { const minX = Math.min(startPos.x, coords.x) const maxX = Math.max(startPos.x, coords.x) const minY = Math.min(startPos.y, coords.y) const maxY = Math.max(startPos.y, coords.y) const filteredElements = drawingElements.filter((element) => { const elementMaxX = element.x + element.width - 1 const elementMaxY = element.y + element.height - 1 // Check if rectangles intersect return !(minX <= elementMaxX && maxX >= element.x && minY <= elementMaxY && maxY >= element.y) }) setDrawingElements(filteredElements) drawToCanvas(pgmData, filteredElements) } setIsDrawing(false) setStartPos(null) }, [pgmData, isDrawing, startPos, currentTool, grayValue, getCanvasCoords, drawToCanvas, drawingElements], ) // Save PGM file const savePGM = useCallback(() => { if (!pgmData) return const finalData = applyDrawingElements(pgmData, drawingElements) // Create PGM header const header = `P5\n${pgmData.width} ${pgmData.height}\n${pgmData.maxVal}\n` const headerBytes = new TextEncoder().encode(header) // Combine header and data const totalSize = headerBytes.length + finalData.length const buffer = new Uint8Array(totalSize) buffer.set(headerBytes, 0) buffer.set(finalData, headerBytes.length) // Create download const blob = new Blob([buffer], { type: "application/octet-stream" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = fileName || "edited_map.pgm" document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) }, [pgmData, fileName, drawingElements, applyDrawingElements]) return (

{/* Header */} PGM Map Editor

Open, edit, and save PGM (Portable Gray Map) files. Supports P5 binary format with rectangle drawing tools and XML element storage.

{/* Canvas Area */} Map Canvas {pgmData ? (

) : (

Click "Open PGM File" to load a map for editing

)} {/* Tools Panel */} Tools {/* File Operations */}

PGM Files

XML Elements

{/* Drawing Tools */}

Drawing Tools

{/* Gray Value */}

Gray Value: {grayValue[0]}

0 (Black) 255 (White)

{drawingElements.length > 0 && ( <>

Drawing Elements {drawingElements.length} rectangles

)} {/* File Info */} {pgmData && ( <>

File Info

Size: {pgmData.width} × {pgmData.height}

Max Value: {pgmData.maxVal}

)}

{/* Hidden file inputs */}

) }