<TransformView
style={{backgroundColor: Theme.pageColor, flex: 1, alignItems: 'center', justifyContent: 'center'}} minScale={0.5}
maxScale={2}
magnetic={true}
onisEidt = {(isEidt) => {
this.isEidt = isEidt;
}}>
<SvgMap
svgJson={svgJsonsCity[leftAreaCode]['svg']}
onChildrenPress={children => {this._onChildrenPress(children)}}
/>
</TransformView>
'use strict';
import React, {Component, PropTypes} from 'react';
import {StyleSheet, View, Dimensions} from 'react-native';
import {Svg, Path, Text} from 'react-native-svg';
export default class SvgMap extends Component {
static propTypes = {
...Svg.propTypes,
svgJson: PropTypes.object.isRequired,
onChildrenPress: PropTypes.func, //(children)
};
constructor(props) {
super(props);
this.pageWidth = Dimensions.get('window').width;
this.pageHeight = Dimensions.get('window').height - 400;
this.padding = 12 * 320/this.pageWidth;
}
getParams() {
let {svgJson} = this.props;
let clientWidth = this.pageWidth - this.padding * 2;
let clientHeight = this.pageHeight - this.padding * 2;
let {x, y, width, height} = svgJson.bounds;
let scaleX = clientWidth / width;
let scaleY = clientHeight / height;
let scale = Math.min(scaleX, scaleY);
let paddingX = this.padding + Math.round((clientWidth - width * scale) / 2) ;
let paddingY = this.padding + Math.round((clientHeight - height * scale) / 2);
return {
x: paddingX,
y: paddingY,
scale: scale,
};
}
renderMainMap(x, y, scale, strokeColor, strokeWidth, fill) {
let {svgJson} = this.props;
let elements = svgJson.paths.map((item, index) => (
<Path
key={svgJson.name + index}
x={x}
y={y}
scale={scale}
d={item}
fill={fill}
stroke={strokeColor}
strokeWidth={strokeWidth / scale}
strokeLinecap='round'
strokeLinejoin='round'
/>
));
return elements;
}
onTouchForChildren(children){
let { onChildrenPress} = this.props;
onChildrenPress(children);
}
renderSubMap(x, y, scale, strokeColor, strokeWidth) {
let {svgJson, onChildrenPress} = this.props;
let elements = [];
let {childrens} = svgJson;
let fillColors = ["#f9c62a", "#a6c2de", "#fc9ecc", "#7df84d", "#ffff00", "#f9c62a", "#a6c2de", "#fc9ecc", "#7df84d", "#ffff00"];
for (let i = 0; i < childrens.length; i++) {
if (svgJson.level === 'city') childrens[i].fillColor = fillColors[i % fillColors.length];
childrens[i].paths.map((item, index) => {
elements.push(
<Path
key={childrens[i].name + 'name' + index}
x={x}
y={y}
scale={scale}
d={item}
fill={childrens[i].fillColor}
stroke={strokeColor}
strokeWidth={strokeWidth / scale}
strokeLinecap='round'
strokeLinejoin='round'
onPressOut={() => this.onTouchForChildren(childrens[i])}
/>
);
});
}
for (let children of childrens) {
elements.push(
<Text
key={children.name + 'text'}
fontSize={5}
x={x + children.center.x * scale}
y={y + children.center.y * scale}
textAnchor="middle"
onPress={() => this.onTouchForChildren(childrens)}
>
{children.name}
</Text>
);
}
return elements;
}
render() {
let {x, y, scale} = this.getParams();
return (
<Svg width={this.pageWidth} height={this.pageHeight}>
{this.renderMainMap(x, y, scale, '#c9cacb', 10, 'none')}
{this.renderSubMap(x, y, scale, '#3ea5dc', 1)}
</Svg>
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent