[
{
"path": "README.md",
"content": "This is an unofficial documentation for react-native ART module.\n\n* [DOC HERE](./doc.md)\n \nAnimation part is really important,isn't it.\n"
},
{
"path": "doc.md",
"content": "#### Elements\n\n```js\nconst {\n Surface,\n Shape,\n Group,\n Text,\n Path,\n ClippingRectangle,\n LinearGradient,\n RadialGradient,\n Pattern,\n Transform\n} = React.ART\n```\n\n##### Surface\nContainer for all other ART components.\n\n```js\nrender(){\n return (\n \n {/* all other components */}\n \n )\n}\n```\nProperty | Type | Required | Description\n:-:|:-:|:-:|:-:\nwidth| string | No | width of target surface\nheight|string| No |height of target surface\nvisible |boolean| No |visible or invisible\n\n> Tip: element has default background color.\n>\n> make it transparent with `style={{ backgroundColor:'transparent' }}` and things below it can be seen.\n\n##### Group\nTo combine shapes or other groups into hierarchies that can be transformed as a set.\n\n```js\nrender(){\n return (\n \n { this.getContainer() }\n \n \n )\n}\n\ngetContainer = () => {\n return (\n \n \n \n )\n}\n```\n\n##### Shape\nUsed to draw arbitrary vector shapes from Path.\nShape implements Transform as a mixin which means it has all transform methods available for moving, scaling and rotating a shape.\n\n```js\nrender(){\n return (\n \n \n \n )\n}\n```\n\nProperty | Type | Required | Description\n:-:|:-:|:-:|:-:\nwidth | Number | No | width of Shape\nheight | Number | No | height of Shape\nd| String | No | container of path\nfill|String| No |fill style of Shape.Any color object module will be support\nstroke | String | No |stroke color of paths it contains\nstrokeWidth | String or Number | No |stroke width of paths it contains\nstrokeDash | Object | No | demo followed.\nstrokeCap | String | No | cap style of path end. oneOf([\"butt\", \"round\"(default), \"square\"])\nstrokeJoin | String | No | path join point style. oneOf([\"miter\", \"round\"(default), \"bevel\"])\n\n```js\nrender(){\n return (\n \n \n \n )\n}\n```\n\n\n##### Text\nText component creates a shape based on text content using native text rendering.\n\n```js\nrender(){\n return (\n \n \n Hello World\n \n \n )\n}\n```\n\n`ART module` in React Native supplies Text component different from sebmarkbage's `art` repo that that mix `Text` and `Font` up. So `font` property is necessary, or your app will crash. And in fact, ART makes `Text` with `Path`, so just try methods what `Shape` has.\n\nProperty | Type | Required | Description\n:-:|:-:|:-:|:-:\nfont | String or Object | Yes | font name and font size for text content\nfill | String | No | fill color\nx | Number | No | x position \ny | Number | No | y position\nalignment | String | No | oneOf([\"right\", \"left\", \"center\"])\n\n\n#### APIs\n\n```js\nrender(){\n return (\n \n \n \n )\n}\n```\n\n##### Path\n###### Path.move\n\n```js\ngetPaths = () => {\n return (\n new Path()\n .move(10, 20)\n \n // This means move ctx form current point to relative right 10px bottom 20px\n // for example ctx now at (20, 20) point\n // after move(10, 20) the point will change to (30, 40)\n )\n}\n```\n\n###### Path.moveTo\n\n```js\ngetPaths = () => {\n return (\n new Path()\n .moveTo(10, 20)\n \n // This means move ctx to absolute coordinate (10, 20)\n // for example ctx now at (20, 20) point\n // after moveTo(10, 20) the point will change to (10, 20)\n )\n}\n```\n\n###### Path.line\n\n```js\ngetPaths = () => {\n return (\n new Path()\n .line(10, 20)\n \n // This means draw a line from current position to relative right 10px bottom 20px\n // for example ctx now at (20, 20) point\n // after line(10, 20) you will get a line from (20, 20) to (30, 40)\n )\n}\n```\n\n###### Path.lineTo\n\n```js\ngetPaths = () => {\n return (\n new Path()\n .lineTo(10, 20)\n \n // This means draw a line from current position to absolute coordinate (10, 20)\n // for example ctx now at (20, 20) point\n // after lineTo(10, 20) you will get a line from (20, 20) to (10, 20)\n )\n}\n```\n###### Path.arc\nDraw an arc with specific arguments.\n\n```\narc(xPosition, xPosition, xRadius, yRadius[,outer,counterClockWise,rotation])\n```\n\n```js\npath.arc(10, 10, 30, 40, true, false, 1)\n```\n\n###### Path.arcTo\nJust like arc, instead of passing relative position, `arcTo` accept an absolute point coorid to be the arc end.\n```\narcTo(xPosition, xPosition, xRadius, yRadius[,outer,counterClockWise,rotation])\n```\n\n```js\npath.arcTo(60, 90, 30, 40, true, false, 1)\n```\n\n###### Path.counterArc\n\nSame as arc, opposite clockwise.\n\n###### Path.counterArcTo\n\nSame as arcTo, opposite clockwise.\n\n###### Path.curve\nDraw a cubic bezier curve to relative position.\n\n```\ncurve(ControlPoint1.x, ControlPoint1.y, ControlPoint2.x, ControlPoint2.y, deltaX, deltaY)\n```\n\n```js\npath.curve(10, 20, 30, 40, 12, 32);\n\n// If now we are at (10, 10), it draw a cubic bezier curve from (10, 10) to (22, 42)\n// and use (10, 20) as first control point and (30, 40) the second one\n```\n###### Path.curveTo\nDraw a bezier curve to absolute position.\n\n```\ncurve(ControlPoint1.x, ControlPoint1.y, ControlPoint2.x, ControlPoint2.y, endPoint.x, endPoint.y)\n```\n\n```js\npath.curve(10, 20, 30, 40, 12, 32);\n\n// if now we are at (10, 10), it draw a cubic bezier curve from (10, 10) to (12, 32)\n// and use (10, 20) as first control point and (30, 40) the second one\n```\n\n\n###### Path.reset\nReset the current path. Just like `beginPath` in canvasRenderingContext2d.\n```js\n// path.points = [...]\npath.reset();\n// path.points = [];\n```\n\n###### Path.close\nDraws a line to the first point in the current sub-path and begins a new sub-path.\n\n```js\nPath.close();\n// It returns the current Path instance.\n```\n\n###### Path.toJson\nReturn the current path points, which can be used on Shape `d` attribute.\n\n```js\nvar d = new Path(path);\n...\nreturn (\n \n)\n```\n\n##### LinearGradient\n```jsx\n\n/* Crate linear gradient\n * @param stops Object linear gradient stops\n * @demo {'0.1':'green', '1':'blue'}\n * @param x1 Number x-axis coordinate of start point\n * @param y1 Number y-axis coordinate of start point\n * @param x2 Number x-axis coordinate of end point\n * @param y2 Number y-axis coordinate of end point\n */\n\nvar linearGradient = new LinearGradient({\n '.1': 'blue', {/* blue in 1% position */}\n '1': 'rgba(255, 255, 255, 0)' {/* opacity white in 100% position */}\n },\n \"0\", \"0\", \"0\", \"400\"\n)\n\n\n```\n##### RadialGradient\n```jsx\n/* Create radial gradient\n * @param stops Object linear gradient stops\n * @demo {'0.1':'green', '1':'blue'}\n * @param fx Number x-axis coordinate of the focal point\n * @param fy Number y-axis coordinate of the focal point\n * @param rx Number x-axis coordinate direction radius length\n * @param ry Number y-axis coordinate direction radius length\n * @param cx Number x-axis coordinate of the origin point\n * @param cy Number y-axis coordinate of the origin point\n */\n \n var radialGradient = new RadialGradient({\n '.1': 'blue', {/* blue in 1% position */}\n '1': 'rgba(255, 255, 255, 0)' {/* opacity white in 100% position */}\n },\n \"200\", \"200\", \"0\", \"0\", \"0\", \"400\"\n)\n\n\n```\n##### Pattern\n```jsx\n/* Create Pattern fill\n * @param image source that be resolved by resolveAssetSource\n * @param width width of every repeat unit\n * @param height height if every repeat unit\n * @param top position to top\n * @param left position to left\n */\n\nimport resolveAssetSource from 'resolveAssetSource'\nimport localImage from './path/to/image.jpg'\n\nconst pattern = new Pattern(resolveAssetSource(localImage),100,100,100,100)\n\n\n```\n\n##### Transform\n\n###### move\nMove target shape, each time you call this method the translate position will superposition.\n```\nnew Transform().move(deltaX[,deltaY])\n```\n```js\nnew Transform().move(20, 20)\n// or you can only move x\nnew Transform().move(20)\n```\n\n###### moveTo\nMove the shape to absolute coordinate position.\n\n```\nnew Transform().moveTo(x[,y])\n```\n```js\nnew Transform().moveTo(120, 120)\n// or you can only move to x\nnew Transform().moveTo(120)\n```\n\n###### scale\nScale the shape, each time you call this method the scale value will superposition.\n```\nnew Transform().scale(scale[X,scaleY]);\n```\n```js\nnew Transform().scale(2, 3);\n// or pass only one param to scale both x and y axis value\nnew Transform().scale(3)\n```\n###### scaleTo\nScale the shape to a fixed multiple to origin graphic.\n```\nnew Transform().scaleTo(scale[X,scaleY]);\n```\n```js\nnew Transform().scaleTo(1, 1);\n// or you can use only one param to set both x and y axis value\nnew Transform().scaleTo(1);\n```\n\n###### rotate\nRotate the shape, each time you call this method the angle will superposition. Pass transformed origin x and y axis coordinate as the second and third param, relative to left top corner of outer Surface.\n```\nnew Transform().rotate(deg[,transformOriginX,transformOriginY])\n```\n```js\nnew Transform().rotate(180);\n// attention, the angel is in angel system inestead of radian system.\n// or you can specify transform origin with extra params\nnew Transform().rotate(180, 100, 200)\n```\n###### rotateTo\nRotate the shape to an absolute angle. Pass the transformed origin x and y axis coordinate as the second and third param, relative to left top corner of outer Surface.\n```\nnew Transform.rotateTo(deg[,transformOriginX,transformOriginY])\n```\n```js\nnew Transform().rotateTo(72);\n// attention, the angel is in angel system inestead of radian system.\n// or you can specify transform origin with extra params\nnew Transform().rotateTo(72, 100, 200)\n```\n###### resizeTo\n\n###### transform\nUse this to make transform with a matrix-like method.[`Reference`](http://sebmarkbage.github.io/art/docs/ART/ART.Transform.html). Each time you call this method the transformed value will superposition.\n```\nnew Transform.transform(scaleX, skewX, skewY, scaleY, translateX, translateY);\n// change target's position and shape with six arguments。\n```\n```js\nnew Transform.transform(2, 0, 1, 1, 0, 0)\n```\n###### transformTo\nUse this to make transform with a matrix-like method.[`Reference`](http://sebmarkbage.github.io/art/docs/ART/ART.Transform.html). Each time you call this method the transformed value will be reset to the arguments.\n```\nnew Transform.transformTo(scaleX, skewX, skewY, scaleY, translateX, translateY);\n// change target's position and shape with six arguments。\n```\n```js\nnew Transform.transformTo(1, 0, 0, 1, 0, 0)\n```\n\n###### inversePoint\n\n##### ClippingRectangle\nControl display area of graphic.\n\n```js\nrender(){\n return (\n \n \n \n \n \n )\n}\n```\nLacking anyone of width and height the `` won't work,but will not cause crash.\n\nProperty | Type | Required | Description\n:-:|:-:|:-:|:-:\nwidth | Number | Yes | width of clipping area,work with height.\nheight | Number | Yes | height of clipping area,work with width.\nx | Number | No | left distance from parent position,default is 0.\ny | Number | No | top distance from parent position, default is 0.\n\n\n#### Morph\nThis can create transition between two paths.\n> To use morph method, you have to import morph first\n\n```js\nimport Morph from 'art/morph/path';\n```\n\n##### Tween\n```js\nMorph.Tween(from, to)\n```\n\n```js\nMorph.Tween(\n \"M 256, 213 C 245, 181 206, 187 234, 262Z\",\n \"M 212, 220 C 197, 171 156, 153 123, 221Z\"\n);\n```\n##### Path\nExtends from Path.[`Reference`](https://github.com/sebmarkbage/art/blob/master/morph/path.js#L6-L29);\n\nAlternate Events\n"
},
{
"path": "doc.zh-cn.md",
"content": "### ART模块中文文档\n"
}
]