├── README.md ├── doc.md └── doc.zh-cn.md /README.md: -------------------------------------------------------------------------------- 1 | This is an unofficial documentation for react-native ART module. 2 | 3 | * [DOC HERE](./doc.md) 4 | 5 | Animation part is really important,isn't it. 6 | -------------------------------------------------------------------------------- /doc.md: -------------------------------------------------------------------------------- 1 | #### Elements 2 | 3 | ```js 4 | const { 5 | Surface, 6 | Shape, 7 | Group, 8 | Text, 9 | Path, 10 | ClippingRectangle, 11 | LinearGradient, 12 | RadialGradient, 13 | Pattern, 14 | Transform 15 | } = React.ART 16 | ``` 17 | 18 | ##### Surface 19 | Container for all other ART components. 20 | 21 | ```js 22 | render(){ 23 | return ( 24 | 25 | {/* all other components */} 26 | 27 | ) 28 | } 29 | ``` 30 | Property | Type | Required | Description 31 | :-:|:-:|:-:|:-: 32 | width| string | No | width of target surface 33 | height|string| No |height of target surface 34 | visible |boolean| No |visible or invisible 35 | 36 | > Tip: element has default background color. 37 | > 38 | > make it transparent with `style={{ backgroundColor:'transparent' }}` and things below it can be seen. 39 | 40 | ##### Group 41 | To combine shapes or other groups into hierarchies that can be transformed as a set. 42 | 43 | ```js 44 | render(){ 45 | return ( 46 | 47 | { this.getContainer() } 48 | 49 | 50 | ) 51 | } 52 | 53 | getContainer = () => { 54 | return ( 55 | 56 | 57 | 58 | ) 59 | } 60 | ``` 61 | 62 | ##### Shape 63 | Used to draw arbitrary vector shapes from Path. 64 | Shape implements Transform as a mixin which means it has all transform methods available for moving, scaling and rotating a shape. 65 | 66 | ```js 67 | render(){ 68 | return ( 69 | 70 | 71 | 72 | ) 73 | } 74 | ``` 75 | 76 | Property | Type | Required | Description 77 | :-:|:-:|:-:|:-: 78 | width | Number | No | width of Shape 79 | height | Number | No | height of Shape 80 | d| String | No | container of path 81 | fill|String| No |fill style of Shape.Any color object module will be support 82 | stroke | String | No |stroke color of paths it contains 83 | strokeWidth | String or Number | No |stroke width of paths it contains 84 | strokeDash | Object | No | demo followed. 85 | strokeCap | String | No | cap style of path end. oneOf(["butt", "round"(default), "square"]) 86 | strokeJoin | String | No | path join point style. oneOf(["miter", "round"(default), "bevel"]) 87 | 88 | ```js 89 | render(){ 90 | return ( 91 | 92 | 102 | 103 | ) 104 | } 105 | ``` 106 | 107 | 108 | ##### Text 109 | Text component creates a shape based on text content using native text rendering. 110 | 111 | ```js 112 | render(){ 113 | return ( 114 | 115 | 131 | Hello World 132 | 133 | 134 | ) 135 | } 136 | ``` 137 | 138 | `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. 139 | 140 | Property | Type | Required | Description 141 | :-:|:-:|:-:|:-: 142 | font | String or Object | Yes | font name and font size for text content 143 | fill | String | No | fill color 144 | x | Number | No | x position 145 | y | Number | No | y position 146 | alignment | String | No | oneOf(["right", "left", "center"]) 147 | 148 | 149 | #### APIs 150 | 151 | ```js 152 | render(){ 153 | return ( 154 | 155 | 158 | 159 | ) 160 | } 161 | ``` 162 | 163 | ##### Path 164 | ###### Path.move 165 | 166 | ```js 167 | getPaths = () => { 168 | return ( 169 | new Path() 170 | .move(10, 20) 171 | 172 | // This means move ctx form current point to relative right 10px bottom 20px 173 | // for example ctx now at (20, 20) point 174 | // after move(10, 20) the point will change to (30, 40) 175 | ) 176 | } 177 | ``` 178 | 179 | ###### Path.moveTo 180 | 181 | ```js 182 | getPaths = () => { 183 | return ( 184 | new Path() 185 | .moveTo(10, 20) 186 | 187 | // This means move ctx to absolute coordinate (10, 20) 188 | // for example ctx now at (20, 20) point 189 | // after moveTo(10, 20) the point will change to (10, 20) 190 | ) 191 | } 192 | ``` 193 | 194 | ###### Path.line 195 | 196 | ```js 197 | getPaths = () => { 198 | return ( 199 | new Path() 200 | .line(10, 20) 201 | 202 | // This means draw a line from current position to relative right 10px bottom 20px 203 | // for example ctx now at (20, 20) point 204 | // after line(10, 20) you will get a line from (20, 20) to (30, 40) 205 | ) 206 | } 207 | ``` 208 | 209 | ###### Path.lineTo 210 | 211 | ```js 212 | getPaths = () => { 213 | return ( 214 | new Path() 215 | .lineTo(10, 20) 216 | 217 | // This means draw a line from current position to absolute coordinate (10, 20) 218 | // for example ctx now at (20, 20) point 219 | // after lineTo(10, 20) you will get a line from (20, 20) to (10, 20) 220 | ) 221 | } 222 | ``` 223 | ###### Path.arc 224 | Draw an arc with specific arguments. 225 | 226 | ``` 227 | arc(xPosition, xPosition, xRadius, yRadius[,outer,counterClockWise,rotation]) 228 | ``` 229 | 230 | ```js 231 | path.arc(10, 10, 30, 40, true, false, 1) 232 | ``` 233 | 234 | ###### Path.arcTo 235 | Just like arc, instead of passing relative position, `arcTo` accept an absolute point coorid to be the arc end. 236 | ``` 237 | arcTo(xPosition, xPosition, xRadius, yRadius[,outer,counterClockWise,rotation]) 238 | ``` 239 | 240 | ```js 241 | path.arcTo(60, 90, 30, 40, true, false, 1) 242 | ``` 243 | 244 | ###### Path.counterArc 245 | 246 | Same as arc, opposite clockwise. 247 | 248 | ###### Path.counterArcTo 249 | 250 | Same as arcTo, opposite clockwise. 251 | 252 | ###### Path.curve 253 | Draw a cubic bezier curve to relative position. 254 | 255 | ``` 256 | curve(ControlPoint1.x, ControlPoint1.y, ControlPoint2.x, ControlPoint2.y, deltaX, deltaY) 257 | ``` 258 | 259 | ```js 260 | path.curve(10, 20, 30, 40, 12, 32); 261 | 262 | // If now we are at (10, 10), it draw a cubic bezier curve from (10, 10) to (22, 42) 263 | // and use (10, 20) as first control point and (30, 40) the second one 264 | ``` 265 | ###### Path.curveTo 266 | Draw a bezier curve to absolute position. 267 | 268 | ``` 269 | curve(ControlPoint1.x, ControlPoint1.y, ControlPoint2.x, ControlPoint2.y, endPoint.x, endPoint.y) 270 | ``` 271 | 272 | ```js 273 | path.curve(10, 20, 30, 40, 12, 32); 274 | 275 | // if now we are at (10, 10), it draw a cubic bezier curve from (10, 10) to (12, 32) 276 | // and use (10, 20) as first control point and (30, 40) the second one 277 | ``` 278 | 279 | 280 | ###### Path.reset 281 | Reset the current path. Just like `beginPath` in canvasRenderingContext2d. 282 | ```js 283 | // path.points = [...] 284 | path.reset(); 285 | // path.points = []; 286 | ``` 287 | 288 | ###### Path.close 289 | Draws a line to the first point in the current sub-path and begins a new sub-path. 290 | 291 | ```js 292 | Path.close(); 293 | // It returns the current Path instance. 294 | ``` 295 | 296 | ###### Path.toJson 297 | Return the current path points, which can be used on Shape `d` attribute. 298 | 299 | ```js 300 | var d = new Path(path); 301 | ... 302 | return ( 303 | 304 | ) 305 | ``` 306 | 307 | ##### LinearGradient 308 | ```jsx 309 | 310 | /* Crate linear gradient 311 | * @param stops Object linear gradient stops 312 | * @demo {'0.1':'green', '1':'blue'} 313 | * @param x1 Number x-axis coordinate of start point 314 | * @param y1 Number y-axis coordinate of start point 315 | * @param x2 Number x-axis coordinate of end point 316 | * @param y2 Number y-axis coordinate of end point 317 | */ 318 | 319 | var linearGradient = new LinearGradient({ 320 | '.1': 'blue', {/* blue in 1% position */} 321 | '1': 'rgba(255, 255, 255, 0)' {/* opacity white in 100% position */} 322 | }, 323 | "0", "0", "0", "400" 324 | ) 325 | 326 | 327 | ``` 328 | ##### RadialGradient 329 | ```jsx 330 | /* Create radial gradient 331 | * @param stops Object linear gradient stops 332 | * @demo {'0.1':'green', '1':'blue'} 333 | * @param fx Number x-axis coordinate of the focal point 334 | * @param fy Number y-axis coordinate of the focal point 335 | * @param rx Number x-axis coordinate direction radius length 336 | * @param ry Number y-axis coordinate direction radius length 337 | * @param cx Number x-axis coordinate of the origin point 338 | * @param cy Number y-axis coordinate of the origin point 339 | */ 340 | 341 | var radialGradient = new RadialGradient({ 342 | '.1': 'blue', {/* blue in 1% position */} 343 | '1': 'rgba(255, 255, 255, 0)' {/* opacity white in 100% position */} 344 | }, 345 | "200", "200", "0", "0", "0", "400" 346 | ) 347 | 348 | 349 | ``` 350 | ##### Pattern 351 | ```jsx 352 | /* Create Pattern fill 353 | * @param image source that be resolved by resolveAssetSource 354 | * @param width width of every repeat unit 355 | * @param height height if every repeat unit 356 | * @param top position to top 357 | * @param left position to left 358 | */ 359 | 360 | import resolveAssetSource from 'resolveAssetSource' 361 | import localImage from './path/to/image.jpg' 362 | 363 | const pattern = new Pattern(resolveAssetSource(localImage),100,100,100,100) 364 | 365 | 366 | ``` 367 | 368 | ##### Transform 369 | 370 | ###### move 371 | Move target shape, each time you call this method the translate position will superposition. 372 | ``` 373 | new Transform().move(deltaX[,deltaY]) 374 | ``` 375 | ```js 376 | new Transform().move(20, 20) 377 | // or you can only move x 378 | new Transform().move(20) 379 | ``` 380 | 381 | ###### moveTo 382 | Move the shape to absolute coordinate position. 383 | 384 | ``` 385 | new Transform().moveTo(x[,y]) 386 | ``` 387 | ```js 388 | new Transform().moveTo(120, 120) 389 | // or you can only move to x 390 | new Transform().moveTo(120) 391 | ``` 392 | 393 | ###### scale 394 | Scale the shape, each time you call this method the scale value will superposition. 395 | ``` 396 | new Transform().scale(scale[X,scaleY]); 397 | ``` 398 | ```js 399 | new Transform().scale(2, 3); 400 | // or pass only one param to scale both x and y axis value 401 | new Transform().scale(3) 402 | ``` 403 | ###### scaleTo 404 | Scale the shape to a fixed multiple to origin graphic. 405 | ``` 406 | new Transform().scaleTo(scale[X,scaleY]); 407 | ``` 408 | ```js 409 | new Transform().scaleTo(1, 1); 410 | // or you can use only one param to set both x and y axis value 411 | new Transform().scaleTo(1); 412 | ``` 413 | 414 | ###### rotate 415 | Rotate 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. 416 | ``` 417 | new Transform().rotate(deg[,transformOriginX,transformOriginY]) 418 | ``` 419 | ```js 420 | new Transform().rotate(180); 421 | // attention, the angel is in angel system inestead of radian system. 422 | // or you can specify transform origin with extra params 423 | new Transform().rotate(180, 100, 200) 424 | ``` 425 | ###### rotateTo 426 | Rotate 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. 427 | ``` 428 | new Transform.rotateTo(deg[,transformOriginX,transformOriginY]) 429 | ``` 430 | ```js 431 | new Transform().rotateTo(72); 432 | // attention, the angel is in angel system inestead of radian system. 433 | // or you can specify transform origin with extra params 434 | new Transform().rotateTo(72, 100, 200) 435 | ``` 436 | ###### resizeTo 437 | 438 | ###### transform 439 | Use 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. 440 | ``` 441 | new Transform.transform(scaleX, skewX, skewY, scaleY, translateX, translateY); 442 | // change target's position and shape with six arguments。 443 | ``` 444 | ```js 445 | new Transform.transform(2, 0, 1, 1, 0, 0) 446 | ``` 447 | ###### transformTo 448 | Use 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. 449 | ``` 450 | new Transform.transformTo(scaleX, skewX, skewY, scaleY, translateX, translateY); 451 | // change target's position and shape with six arguments。 452 | ``` 453 | ```js 454 | new Transform.transformTo(1, 0, 0, 1, 0, 0) 455 | ``` 456 | 457 | ###### inversePoint 458 | 459 | ##### ClippingRectangle 460 | Control display area of graphic. 461 | 462 | ```js 463 | render(){ 464 | return ( 465 | 466 | 472 | 473 | 474 | 475 | ) 476 | } 477 | ``` 478 | Lacking anyone of width and height the `` won't work,but will not cause crash. 479 | 480 | Property | Type | Required | Description 481 | :-:|:-:|:-:|:-: 482 | width | Number | Yes | width of clipping area,work with height. 483 | height | Number | Yes | height of clipping area,work with width. 484 | x | Number | No | left distance from parent position,default is 0. 485 | y | Number | No | top distance from parent position, default is 0. 486 | 487 | 488 | #### Morph 489 | This can create transition between two paths. 490 | > To use morph method, you have to import morph first 491 | 492 | ```js 493 | import Morph from 'art/morph/path'; 494 | ``` 495 | 496 | ##### Tween 497 | ```js 498 | Morph.Tween(from, to) 499 | ``` 500 | 501 | ```js 502 | Morph.Tween( 503 | "M 256, 213 C 245, 181 206, 187 234, 262Z", 504 | "M 212, 220 C 197, 171 156, 153 123, 221Z" 505 | ); 506 | ``` 507 | ##### Path 508 | Extends from Path.[`Reference`](https://github.com/sebmarkbage/art/blob/master/morph/path.js#L6-L29); 509 | 510 | Alternate Events 511 | -------------------------------------------------------------------------------- /doc.zh-cn.md: -------------------------------------------------------------------------------- 1 | ### ART模块中文文档 2 | --------------------------------------------------------------------------------