React Native mask segmentation canvas library: OpenCV semantic segmentation + SkSL Shader coloring
3a3f07628d
- New magneticLasso module: Sobel energy map + Dijkstra shortest-path + Douglas-Peucker - New activeContour module: greedy snake + balloon force for polygon-to-edge refinement - wallTextureSplit: edge barrier mask, morphological mask hole closing, Moore boundary tracing, simplified polygon contours, manual pick map patching, gap absorption - MaskSegmentCanvas: full lasso gesture pipeline (tap vertices, drag, magnetic paths, close polygon, endLasso/cancelLasso/deleteLasso) - New maskConfig options: splitWallsEdgeBarrierThreshold, splitWallsCloseMaskRadius, manualSplitWalls, manualSplitWallsMaxCount, manualSplitWallsGapAbsorbDilatePx, magneticLasso, activeContourRefine - New ref methods: startLasso, endLasso, cancelLasso, getManualRegions, deleteLasso - New exported types: LassoPolygon, ManualWallPartition - RegionMaskData carries indexToName and wallSemanticIdx through downsample - Simplify README to point to documentation site - Update documentation site (EN + ZH-CN) with all new APIs and interaction guide - Example app: lasso mode toggles and operation buttons Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|---|---|---|
| __tests__ | ||
| .bundle | ||
| .github/workflows | ||
| android | ||
| assets/test | ||
| dist | ||
| docs | ||
| example | ||
| ios | ||
| patches | ||
| scripts | ||
| src | ||
| .eslintrc.js | ||
| .gitignore | ||
| .npmignore | ||
| .prettierrc.js | ||
| .watchmanconfig | ||
| app.json | ||
| App.tsx | ||
| babel.config.js | ||
| Gemfile | ||
| index.js | ||
| jest.config.js | ||
| metro.config.js | ||
| package-lock.json | ||
| package.json | ||
| react-native.config.js | ||
| README.md | ||
| README.zh-CN.md | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
🎨 react-native-mask-segment-canvas
A React Native 0.79 interactive mask segmentation library combining OpenCV semantic layout + Skia GPU-accelerated texture painting.
- 🧠 OpenCV (
react-native-fast-opencv): mask semantic layout, baseboard patching, region extraction - 🖌️ Skia RuntimeEffect (SkSL): single-pass LAB frequency-layer color blending
- ✂️ Skia Path: dashed outline highlights per region
- 🧲 Magnetic Lasso: manual wall partitioning with edge-snapping + Active Contour refinement
📖 Full Documentation
All API references, configuration guides, integration examples, and troubleshooting are maintained on the documentation site:
👉 https://tonychan-hub.github.io/react-native-mask-segment-canvas/
| Section | Description |
|---|---|
| Overview | Architecture & pipeline overview |
| Installation | Peer deps, postinstall, Metro config |
| Basic Usage | Minimal example, state variables, watchState |
| API Reference | Props, ref methods, types, storage convention |
| Performance | Benchmarks, optimization tips, pipeline config tuning |
| Troubleshooting | Common issues & fixes |
📦 Quick Install
npm install react-native-mask-segment-canvas
Required peer dependencies:
npm install @shopify/react-native-skia react-native-reanimated \
react-native-fast-opencv react-native-fs buffer upng-js
Your host package.json must include patch-package in postinstall:
{
"scripts": { "postinstall": "patch-package" },
"devDependencies": { "patch-package": "^8.0.1" }
}
See the Installation Guide for full Metro configuration and troubleshooting duplicate module errors.
🧪 Example Project
The example/ directory contains a complete consumer-side integration demo using only the public API — ideal as a template for your own project.
cd example
npm install
cd ios && pod install && cd ..
npm start
🏗️ Dev Demo
The root App.tsx is a self-test demo that imports directly from ./src:
npm install
cd ios && pod install && cd ..
npm run ios # or `npm run android`
📁 Project Structure
MaskSegmentApp/
├── src/ # Library source → published to npm
│ ├── index.ts
│ └── components/ / utils/
├── docs/ # Docusaurus documentation site
├── example/ # Consumer-side integration demo
├── App.tsx # Dev self-test (imports from ./src)
└── patches/ # patch-package patches for react-native-fast-opencv