react-native/RNTester/js/ARTExample.js

91 lines
2.5 KiB
JavaScript

/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @providesModule ARTExample
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
ART,
Platform,
View,
} = ReactNative;
const {
Surface,
Path,
Group,
Transform,
Shape,
} = ART;
var scale = Platform.isTVOS ? 4 : 1;
class ARTExample extends React.Component<{}> {
render(){
const pathRect = new Path()
.moveTo(scale * 0,scale * 0)
.lineTo(scale * 0,scale * 110)
.lineTo(scale * 110,scale * 110)
.lineTo(scale * 110,scale * 0)
.close();
const pathCircle0 = new Path()
.moveTo(scale * 30,scale * 5)
.arc(scale * 0,scale * 50,scale * 25)
.arc(scale * 0,-scale * 50,scale * 25)
.close();
const pathCircle1 = new Path()
.moveTo(scale * 30,scale * 55)
.arc(scale * 0,scale * 50,scale * 25)
.arc(scale * 0,-scale * 50,scale * 25)
.close();
const pathCircle2 = new Path()
.moveTo(scale * 55,scale * 30)
.arc(scale * 50,scale * 0,scale * 25)
.arc(-scale * 50,scale * 0,scale * 25)
.close();
const pathCircle3 = new Path()
.moveTo(scale * 55,scale * 80)
.arc(scale * 50,scale * 0,scale * 25)
.arc(-scale * 50,scale * 0,scale * 25)
.close();
return (
<View>
<Surface width={scale * 200} height={scale * 200}>
<Group>
<Shape d={pathRect} stroke="#000080" fill="#000080" strokeWidth={scale}/>
<Shape d={pathCircle0} stroke="#FF0000" fill="#FF0000" strokeWidth={scale}/>
<Shape d={pathCircle1} stroke="#00FF00" fill="#00FF00" strokeWidth={scale}/>
<Shape d={pathCircle2} stroke="#00FFFF" fill="#00FFFF" strokeWidth={scale}/>
<Shape d={pathCircle3} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={scale}/>
</Group>
</Surface>
</View>
);
}
}
exports.title = '<ART>';
exports.displayName = 'ARTExample';
exports.description = 'ART input for numeric values';
exports.examples = [
{
title: 'ART Example',
render(): React.Element<any> {
return <ARTExample />;
}
},
];