momoi-layer

タイルベースのレイヤー合成エンジン（ラスター、ベクター、グループ対応）

インストール

npm install momoi-layer

クイックスタート

import {
  LayerStack, RasterLayer, GroupLayer, Compositor
} from 'momoi-layer'

// レイヤースタックを作成
const stack = new LayerStack()

// ラスターレイヤーを追加
const bg = new RasterLayer('背景')
bg.setPixel(10, 20, 255, 0, 0, 255)  // 赤いピクセル
stack.addLayer(bg)

const fg = new RasterLayer('前景')
fg.blendMode = 'multiply'
fg.opacity = 0.8
fg.setPixel(10, 20, 0, 255, 0, 255)  // 緑のピクセル
stack.addLayer(fg)

// 合成
const compositor = new Compositor(stack)
compositor.compositeAll()

// 結果を取得
const projection = compositor.getProjection()

API リファレンス

Tile / TileMap

64x64 RGBA タイルによるスパースピクセルストレージ。描画済みタイルのみメモリ確保。

| エクスポート | 説明 | |---|---| | Tile | 64x64 RGBA タイル (getPixel, setPixel, clone, isEmpty) | | TileMap | タイルのスパースマップ + ダーティフラグ管理 | | TILE_SIZE | タイル1辺のサイズ (64) | | TILE_BYTES | タイル1枚のバイト数 (16,384) |

レイヤー

| エクスポート | 説明 | |---|---| | Layer | レイヤー基底クラス (opacity, visible, blendMode, locked, alphaLock, clipping) | | RasterLayer | TileMap ベースのピクセルレイヤー (setPixel, getPixel) | | VectorLayer | パスデータ + ラスタライズキャッシュ | | VectorPath | ベクターパス（制御点 + 筆圧） | | GroupLayer | 子レイヤーを持つフォルダ型レイヤー (passThrough 切替可能) |

合成

| エクスポート | 説明 | |---|---| | LayerStack | レイヤーツリー管理 (addLayer, removeLayer, findById) | | Compositor | タイルベース合成エンジン (compositeAll, compositeDirty) | | blendPixel | ピクセル単位のブレンド関数 |

型

| エクスポート | 説明 | |---|---| | BlendMode | 16 ブレンドモード ('normal', 'multiply', 'screen', 'overlay', 'add' 等) | | LayerType | 'raster' \| 'vector' \| 'group' | | PathPoint | ベクターパスの制御点 (x, y, pressure) |

サンプル

Canvas Demo

ブラウザ上でレイヤー合成の結果をリアルタイムにプレビューできるデモアプリです。

• グラデーション背景 + チェッカーパターン（Overlay）
• RGB 3色の円を GroupLayer でグループ合成
• VectorLayer による波線描画
• ブレンドモード・不透明度・表示切替の UI 操作

cd examples/canvas-demo
npm install
npm run dev

ブラウザで http://localhost:5173 を開くとデモが表示されます。

コマンド

npm run build       # tsup で ESM/CJS/型定義をビルド
npm run typecheck   # TypeScript 型チェック
npm test            # vitest でテスト実行
npm run test:watch  # vitest ウォッチモード

ライセンス

MIT