SVG Path Editor

Vue 3とTypeScriptで構築されたインタラクティブなSVGパスエディターです。ベジェ曲線を直感的に編集し、リアルタイムでSVGパスを生成できます。

機能

🎨 パス編集

• ペンツール: クリックでアンカーポイントを追加
• ベジェ曲線: ハンドルをドラッグして曲線を調整
• ミラー編集: Ctrl/Cmdキーを押しながらハンドルを動かすと対称的に調整
• パス閉じ: 最初のポイントをクリックしてパスを閉じる

📝 レイヤー管理

• 複数のパスを同時に編集
• レイヤーパネルでパスを切り替え
• 新しいパスの追加

📋 SVG出力

• リアルタイムでSVGパスデータを生成
• ワンクリックでクリップボードにコピー
• 編集したパスをそのままSVGとして使用可能

技術スタック

• Vue 3 - Composition API
• TypeScript - 型安全性
• Vite - 高速ビルドツール
• SVG - ベクターグラフィックス

セットアップ

前提条件

• Node.js 16以上
• pnpm（推奨）またはnpm

インストール

# 依存関係をインストール
pnpm install

# 開発サーバーを起動
pnpm dev

# プロダクションビルド
pnpm build

# プレビュー
pnpm preview

使用方法

基本的な操作

1. パスの作成

   • ペンツールが有効な状態でキャンバスをクリック
   • アンカーポイントが追加されます

2. 曲線の調整

   • アンカーポイントから伸びるハンドルをドラッグ
   • 曲線の形状を調整できます

3. パスの閉じ

   • 最初のアンカーポイントをクリックしてパスを閉じます

4. 複数パスの管理

   • サイドバーの「Add Path」ボタンで新しいパスを追加
   • レイヤーリストでパスを切り替え

キーボードショートカット

• Ctrl/Cmd + ハンドルドラッグ: ミラー編集モード
• Z + ハンドルドラッグ: ミラー編集モード（代替）

プロジェクト構造

src/
├── App.vue              # メインアプリケーション
├── components/
│   └── Editor.vue       # パスエディターコンポーネント
├── assets/              # 静的アセット
└── main.ts              # エントリーポイント

開発

コードの特徴

• 型安全: TypeScriptで完全に型付け
• リアクティブ: Vue 3のリアクティブシステムを活用
• モジュラー: コンポーネントベースの設計
• パフォーマンス: Viteによる高速開発体験

カスタマイズ

エディターの外観や動作をカスタマイズするには、src/components/Editor.vueのスタイルセクションを編集してください。

ライセンス

MIT License

貢献

プルリクエストやイシューの報告を歓迎します。

---

注意: このプロジェクトは学習目的で作成されたものです。本格的なデザインツールとして使用する場合は、追加の機能や最適化が必要になる場合があります。