Chenyuwen/react-native-mask-segment-canvas

a1518 3a3f07628d

Deploy Docs to GitHub Pages / deploy (push) Has been cancelled

Details

Publish to npm / publish (push) Has been cancelled

Details

feat: add manual lasso wall splitting with magnetic edge-snapping and active contour refinement

- 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>

2026-07-06 20:23:57 -07:00

3.3 KiB

Raw Permalink Blame History

🇨🇳 中文文档

🎨 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

3.3 KiB Raw Permalink Blame History