電気回路図エディタ

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電気回路図エディタ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #canvas-container {
            margin: 20px 0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        .toolbar {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
        button {
            padding: 8px 12px;
            margin-right: 5px;
            cursor: pointer;
        }
        .component-options {
            margin-top: 10px;
            padding: 10px;
            background-color: #e9e9e9;
            border-radius: 5px;
        }
        .presets {
            margin: 15px 0;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>電気回路図エディタ</h1>
    
    <div class="toolbar">
        <button id="select-btn">選択モード</button>
        <button id="wire-btn">配線</button>
        <button id="resistor-btn">抵抗</button>
        <button id="capacitor-btn">コンデンサ</button>
        <button id="inductor-btn">コイル</button>
        <button id="transistor-btn">トランジスタ</button>
        <button id="ground-btn">接地</button>
        <button id="power-btn">電源</button>
        <button id="clear-btn">クリア</button>
        
        <div class="component-options" id="component-options" style="display: none;">
            <label for="component-value">値: </label>
            <input type="text" id="component-value" placeholder="例: 100Ω, 10μF">
            <button id="confirm-btn">確定</button>
            <button id="cancel-btn">キャンセル</button>
        </div>
    </div>
    
    <div class="presets">
        <h3>プリセット回路:</h3>
        <button id="rlc-parallel-btn">RLC並列回路</button>
        <button id="common-base-btn">ベース接地回路</button>
    </div>
    
    <div id="canvas-container">
        <canvas id="circuit-canvas" width="800" height="500"></canvas>
    </div>

if (value) {
                            ctx.font = '12px Arial';
                            ctx.textAlign = 'center';
                            ctx.fillText(value, x, y - 40); // 値のテキスト位置を調整
                            ctx.textAlign = 'left';
                        }
                    },
                    width: 30,
                    height: 40
                },
                ground: {
                    draw: function(ctx, x, y) {
                        ctx.beginPath();
                        ctx.moveTo(x, y);
                        ctx.lineTo(x, y + 10);
                        ctx.moveTo(x - 10, y + 10);
                        ctx.lineTo(x + 10, y + 10);
                        ctx.moveTo(x - 7, y + 15);
                        ctx.lineTo(x + 7, y + 15);
                        ctx.moveTo(x - 4, y + 20);
                        ctx.lineTo(x + 4, y + 20);
                        ctx.stroke();
                    },
                    width: 20,
                    height: 20
                },
                power: {
                    draw: function(ctx, x, y, value) {
                        ctx.beginPath();
                        ctx.moveTo(x, y - 5);
                        ctx.lineTo(x, y + 5);
                        ctx.moveTo(x - 5, y);
                        ctx.lineTo(x + 5, y);
                        
                        ctx.moveTo(x, y + 5);
                        ctx.lineTo(x, y + 20);
                        
                        ctx.moveTo(x - 10, y + 20);
                        ctx.lineTo(x + 10, y + 20);
                        
                        ctx.stroke();
                        
                        if (value) {
                            ctx.font = '12px Arial';
                            ctx.textAlign = 'center';
                            ctx.fillText(value, x, y - 10);
                            ctx.textAlign = 'left';
                        }
                    },
                    width: 20,
                    height: 20
                }
            };
            
            // イベントリスナーの設定
            function setupEventListeners() {
                console.log("イベントリスナーを設定中...");
                
                document.getElementById('select-btn').addEventListener('click', () => {
                    console.log("選択モード");
                    currentMode = 'select';
                    cancelComponentPlacement();
                });
                
                document.getElementById('wire-btn').addEventListener('click', () => {
                    console.log("配線モード");
                    currentMode = 'wire';
                    cancelComponentPlacement();
                });
                
                document.getElementById('resistor-btn').addEventListener('click', () => {
                    console.log("抵抗配置モード");
                    currentMode = 'place';
                    currentComponentType = 'resistor';
                    prepareComponentPlacement();
                });
                
                document.getElementById('capacitor-btn').addEventListener('click', () => {
                    console.log("コンデンサ配置モード");
                    currentMode = 'place';
                    currentComponentType = 'capacitor';
                    prepareComponentPlacement();
                });
                
                document.getElementById('inductor-btn').addEventListener('click', () => {
                    console.log("コイル配置モード");
                    currentMode = 'place';
                    currentComponentType = 'inductor';
                    prepareComponentPlacement();
                });
                
                document.getElementById('transistor-btn').addEventListener('click', () => {
                    console.log("トランジスタ配置モード");
                    currentMode = 'place';
                    currentComponentType = 'transistor';
                    prepareComponentPlacement();
                });
                
                document.getElementById('ground-btn').addEventListener('click', () => {
                    console.log("接地配置モード");
                    currentMode = 'place';
                    currentComponentType = 'ground';
                    prepareComponentPlacement();
                });
                
                document.getElementById('power-btn').addEventListener('click', () => {
                    console.log("電源配置モード");
                    currentMode = 'place';
                    currentComponentType = 'power';
                    prepareComponentPlacement();
                });
                
                document.getElementById('clear-btn').addEventListener('click', clearCanvas);
                
                document.getElementById('rlc-parallel-btn').addEventListener('click', drawRLCParallelCircuit);
                document.getElementById('common-base-btn').addEventListener('click', drawCommonBaseCircuit);
                
                document.getElementById('confirm-btn').addEventListener('click', confirmComponent);
                document.getElementById('cancel-btn').addEventListener('click', cancelComponentPlacement);
                
                canvas.addEventListener('mousedown', handleMouseDown);
                canvas.addEventListener('mousemove', handleMouseMove);
                canvas.addEventListener('mouseup', handleMouseUp);
                
                console.log("イベントリスナーの設定完了");
            }
            
            // 描画関数
            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // ワイヤーを描画
                wires.forEach(wire => {
                    ctx.beginPath();
                    ctx.moveTo(wire.start.x, wire.start.y);
                    ctx.lineTo(wire.end.x, wire.end.y);
                    ctx.stroke();
                });
                
                // 現在描画中のワイヤーを描画
                if (isDrawingWire && currentWire) {
                    ctx.beginPath();
                    ctx.moveTo(currentWire.start.x, currentWire.start.y);
                    ctx.lineTo(currentWire.end.x, currentWire.end.y);
                    ctx.strokeStyle = 'blue';
                    ctx.stroke();
                    ctx.strokeStyle = 'black';
                }
                
                // コンポーネントを描画
                components.forEach(component => {
                    if (component === selectedComponent) {
                        ctx.strokeStyle = 'blue';
                        ctx.fillStyle = 'rgba(0, 0, 255, 0.1)';
                        
                        ctx.beginPath();
                        const compType = componentTypes[component.type];
                        // 既にcomponents配列にwidthとheightが格納されているのでそれを使う
                        const displayWidth = component.width; 
                        const displayHeight = component.height;
                        
                        ctx.rect(
                            component.x - displayWidth/2 - 5,
                            component.y - displayHeight/2 - 5,
                            displayWidth + 10,
                            displayHeight + 10
                        );
                        ctx.stroke();
                        ctx.fill();
                    }
                    
                    componentTypes[component.type].draw(ctx, component.x, component.y, component.value);
                    
                    ctx.strokeStyle = 'black';
                    ctx.fillStyle = 'black';
                });
                
                // 配置中のコンポーネントをプレビュー
                if (isPlacingComponent && startPos && currentComponentType) {
                    ctx.strokeStyle = 'blue';
                    componentTypes[currentComponentType].draw(ctx, startPos.x, startPos.y, document.getElementById('component-value').value);
                    ctx.strokeStyle = 'black';
                }
            }
            
            // イベントハンドラ
            function handleMouseDown(e) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                console.log(`マウスダウン: (${x}, ${y}), モード: ${currentMode}`);
                
                if (currentMode === 'select') {
                    selectedComponent = null;
                    
                    for (let i = components.length - 1; i >= 0; i--) {
                        const component = components[i];
                        const halfWidth = component.width / 2;
                        const halfHeight = component.height / 2;
                        
                        if (x >= component.x - halfWidth && x <= component.x + halfWidth &&
                            y >= component.y - halfHeight && y <= component.y + halfHeight) {
                            selectedComponent = component;
                            console.log("コンポーネントを選択:", component);
                            break;
                        }
                    }
                    
                    draw();
                } else if (currentMode === 'wire') {
                    isDrawingWire = true;
                    currentWire = {
                        start: { x: x, y: y },
                        end: { x: x, y: y }
                    };
                    console.log("配線開始");
                } else if (currentMode === 'place') {
                    startPos = { x: x, y: y };
                    isPlacingComponent = true;
                    document.getElementById('component-options').style.display = 'block'; // マウスダウンで表示
                    console.log("コンポーネント配置位置確定待ち:", currentComponentType);
                    draw(); // 配置中のコンポーネントをプレビュー
                }
            }
            
            function handleMouseMove(e) {
                if (isDrawingWire && currentWire) {
                    const rect = canvas.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    currentWire.end = { x: x, y: y };
                    draw();
                } else if (isPlacingComponent && startPos) {
                    const rect = canvas.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    // startPosをマウスの位置に追従させることで、プレビューを動かす
                    startPos = { x: x, y: y }; 
                    draw();
                }
            }
            
            function handleMouseUp(e) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                console.log(`マウスアップ: (${x}, ${y})`);
                
                if (isDrawingWire && currentWire) {
                    currentWire.end = { x: x, y: y };
                    wires.push(currentWire);
                    isDrawingWire = false;
                    currentWire = null;
                    console.log("配線完了");
                    draw();
                }
                // isPlacingComponent && startPos の場合は、confirmComponent または cancelComponentPlacement で処理されるため、ここでは特別な処理は不要
            }
            
            function prepareComponentPlacement() {
                // コンポーネントの種類が選択されたら、オプション表示をリセット
                document.getElementById('component-options').style.display = 'none';
                document.getElementById('component-value').value = '';
                isPlacingComponent = false; // まだ配置は始まっていない
                startPos = null; // 開始位置をリセット
            }
            
            function confirmComponent() {
                if (!startPos || !currentComponentType) {
                    console.warn("配置するコンポーネントまたは位置がありません。");
                    cancelComponentPlacement();
                    return;
                }
                const value = document.getElementById('component-value').value;
                console.log(`コンポーネント確定: ${currentComponentType}, 値: ${value}`);
                
                // コンポーネントの種類から幅と高さを取得
                const compDef = componentTypes[currentComponentType];

components.push({
                    type: currentComponentType,
                    x: startPos.x,
                    y: startPos.y,
                    value: value,
                    width: compDef.width,
                    height: compDef.height
                });
                
                cancelComponentPlacement();
                draw();
            }
            
            function cancelComponentPlacement() {
                document.getElementById('component-options').style.display = 'none';
                document.getElementById('component-value').value = '';
                isPlacingComponent = false;
                startPos = null;
                currentMode = 'select'; // 配置モードから選択モードに戻る
                console.log("コンポーネント配置キャンセル");
                draw();
            }
            
            function clearCanvas() {
                components = [];
                wires = [];
                selectedComponent = null;
                console.log("キャンバスクリア");
                draw();
            }
            
            function drawRLCParallelCircuit() {
                clearCanvas();
                console.log("RLC並列回路を描画");
                
                const centerX = canvas.width / 2;
                const centerY = canvas.height / 2;
                const compSpacing = 60; // コンポーネント間の間隔
                const yOffset = 80; // 回路全体の上端Y座標

// コンポーネントを配置
                components.push({
                    type: 'power',
                    x: centerX - compSpacing * 3, // 電源の位置調整
                    y: centerY - yOffset,
                    value: '5V',
                    width: componentTypes.power.width,
                    height: componentTypes.power.height
                });
                
                components.push({
                    type: 'resistor',
                    x: centerX - compSpacing,
                    y: centerY - yOffset,
                    value: '100Ω',
                    width: componentTypes.resistor.width,
                    height: componentTypes.resistor.height
                });
                
                components.push({
                    type: 'capacitor',
                    x: centerX,
                    y: centerY - yOffset,
                    value: '10μF',
                    width: componentTypes.capacitor.width,
                    height: componentTypes.capacitor.height
                });
                
                components.push({
                    type: 'inductor',
                    x: centerX + compSpacing,
                    y: centerY - yOffset,
                    value: '1mH',
                    width: componentTypes.inductor.width,
                    height: componentTypes.inductor.height
                });
                
                components.push({
                    type: 'ground',
                    x: centerX + compSpacing, // RLCの下に接地
                    y: centerY + yOffset,
                    width: componentTypes.ground.width,
                    height: componentTypes.ground.height
                });
                
                // 配線
                const topY = centerY - yOffset;
                const bottomY = centerY + yOffset;
                const powerLeftX = centerX - compSpacing * 3 - componentTypes.power.width / 2;
                const powerRightX = centerX - compSpacing * 3 + componentTypes.power.width / 2;
                const topRailStart = powerRightX + 20; // 電源の右から少し離れて上部レール開始
                const bottomRailStart = powerRightX + 20; // 電源の右から少し離れて下部レール開始

// 電源から上部レール
                wires.push({ start: { x: powerRightX, y: topY - 15 }, end: { x: topRailStart, y: topY - 15 } }); // 電源V+から
                // 電源から下部レール
                wires.push({ start: { x: powerRightX, y: topY + 15 }, end: { x: bottomRailStart, y: topY + 15 } }); // 電源GNDから

// 上部レール
                wires.push({ start: { x: topRailStart, y: topY - 15 }, end: { x: centerX + compSpacing + componentTypes.inductor.width / 2 + 20, y: topY - 15 } });
                // 下部レール
                wires.push({ start: { x: bottomRailStart, y: topY + 15 }, end: { x: centerX + compSpacing + componentTypes.inductor.width / 2 + 20, y: topY + 15 } });

// 各コンポーネントとレールを接続
                // 抵抗
                wires.push({ start: { x: centerX - compSpacing, y: topY - 15 }, end: { x: centerX - compSpacing, y: topY - componentTypes.resistor.height / 2 } });
                wires.push({ start: { x: centerX - compSpacing, y: topY + componentTypes.resistor.height / 2 }, end: { x: centerX - compSpacing, y: topY + 15 } });
                // コンデンサ
                wires.push({ start: { x: centerX, y: topY - 15 }, end: { x: centerX, y: topY - componentTypes.capacitor.height / 2 } });
                wires.push({ start: { x: centerX, y: topY + componentTypes.capacitor.height / 2 }, end: { x: centerX, y: topY + 15 } });
                // コイル
                wires.push({ start: { x: centerX + compSpacing, y: topY - 15 }, end: { x: centerX + compSpacing, y: topY - componentTypes.inductor.height / 2 } });
                wires.push({ start: { x: centerX + compSpacing, y: topY + componentTypes.inductor.height / 2 }, end: { x: centerX + compSpacing, y: topY + 15 } });

// 接地への接続
                wires.push({ start: { x: centerX + compSpacing, y: topY + 15 }, end: { x: centerX + compSpacing, y: bottomY - componentTypes.ground.height / 2 } });
                
                draw();
            }
            
            function drawCommonBaseCircuit() {
                clearCanvas();
                console.log("ベース接地回路を描画");
                
                const centerX = canvas.width / 2;
                const centerY = canvas.height / 2;
                
                components.push({
                    type: 'transistor',
                    x: centerX,
                    y: centerY,
                    value: '2N3904',
                    width: componentTypes.transistor.width,
                    height: componentTypes.transistor.height
                });
                
                components.push({
                    type: 'power',
                    x: centerX - 100,
                    y: centerY - 150,
                    value: 'VCC',
                    width: componentTypes.power.width,
                    height: componentTypes.power.height
                });
                
                components.push({
                    type: 'resistor',
                    x: centerX,
                    y: centerY - 100, // コレクタ抵抗
                    value: '1kΩ',
                    width: componentTypes.resistor.width,
                    height: componentTypes.resistor.height
                });
                
                components.push({
                    type: 'resistor',
                    x: centerX,
                    y: centerY + 100, // エミッタ抵抗
                    value: '100Ω',
                    width: componentTypes.resistor.width,
                    height: componentTypes.resistor.height
                });
                
                components.push({
                    type: 'ground',
                    x: centerX - 50,
                    y: centerY, // ベースの接地
                    width: componentTypes.ground.width,
                    height: componentTypes.ground.height
                });
                
                components.push({
                    type: 'ground',
                    x: centerX,
                    y: centerY + 150, // エミッタ抵抗の接地
                    width: componentTypes.ground.width,
                    height: componentTypes.ground.height
                });

// 配線
                // 電源VCCからコレクタ抵抗
                wires.push({ start: { x: centerX - 100, y: centerY - 130 }, end: { x: centerX, y: centerY - 130 } }); // VCCから上部レール
                wires.push({ start: { x: centerX, y: centerY - 130 }, end: { x: centerX, y: centerY - 100 - componentTypes.resistor.height/2 } });
                
                // コレクタ抵抗からトランジスタのコレクタへ
                wires.push({ start: { x: centerX, y: centerY - 100 + componentTypes.resistor.height/2 }, end: { x: centerX, y: centerY - 20 } });
                
                // トランジスタのベースを接地
                wires.push({ start: { x: centerX - 15, y: centerY }, end: { x: centerX - 50, y: centerY } });
                wires.push({ start: { x: centerX - 50, y: centerY }, end: { x: centerX - 50, y: centerY + 10 } }); // 接地へ

// トランジスタのエミッタからエミッタ抵抗へ
                wires.push({ start: { x: centerX, y: centerY + 20 }, end: { x: centerX, y: centerY + 100 - componentTypes.resistor.height/2 } });
                
                // エミッタ抵抗から接地へ
                wires.push({ start: { x: centerX, y: centerY + 100 + componentTypes.resistor.height/2 }, end: { x: centerX, y: centerY + 150 - componentTypes.ground.height/2 } });
                
                draw();
            }
            
            // 初期化
            setupEventListeners();
            draw();
            console.log("アプリケーションの初期化が完了しました");
        });
    </script>
</body>
</html>
```

このブログを検索

Cyber-Chaos

電気回路図エディタ

コメント

コメントを投稿

このブログの人気の投稿

Pydroid用ピアノアプリ＋ラフマニノフピアノ協奏曲第2番1楽章デモ音源付き

訴えの変更(追加的変更)申立

Gmailの本文にマークダウン記法でソースコードが書けるアドオンをいれたい。