0.0.1 • Published 7 years ago
react-mapping v0.0.1
React-mapping
Video projection mapping library in React.
Contain the following component:
- Layer: Allow you to transform the children element as you wish (3d tranform and translate)
- Grid: Add a background grid to help with accuracy while you are mapping in edit mode
This is a work in progress library.
Documentation
Layer
Allow you to transform the children element as you wish (3d tranform and translate)
How to use
<Layer isEditMode={true}>
<video src="A_VIDEO_SOURCE" style={{ width: 640, height: 390 }}/>
</Layer>
Properties
- style :
React.CSSProperties
Style applied to the container of the children element - anchorStyle :
React.CSSProperties
Style applied to the anchor component - className :
string
Classes applied to the container of the children element - anchorClassName :
string
Classes applied to the anchor component - isEditMode :
boolean
if true, switch to edit mode and make anchors visible, if false, switch to view mode and anchor are not visible. - x :
number
Initial x position of the child element - y :
number
Initial y position of the child element
Grid
How to use
<Grid/>
Properties
- rows :
number
number of rows to display - columns :
number
number of columns to display
TODO
Layer
- Add layer grid
Add magnet
Add reset functionality
- Add more key controls
- Add save to localstorage
- Add layer container style when selecting a layer
- Add the library to http://tangiblejs.com/
Thanks
This library has been inspired from the following blog posts / library:
0.0.1
7 years ago