我正在从服务器接收svg图像。 我使用网络视图显示svg，并在从文件中获取原始svg尺寸后设置尺寸。
我有两个主要特征： 1）捏放大 2）根据特定坐标缩放到svg上的特定位置
onPlaceHighlight方法使我可以放大某个点，并且在这里一切正常。
问题是当我用两根手指缩放时。 它将始终朝着svg图像的中心缩放，这几乎是我放置红色视图的位置，该视图曾经为我提供了一些参考。
class SvgMap extends Component {
static navigationOptions = ({ navigation: { dispatch } }) => ({
title: 'Maps',
headerRight: <HeaderRight onPress={() => dispatch(navigateTo('AddFavorite'))}/>,
// headerRight: <HeaderRight/>,
})
// document.getElementById('parsed').innerHTML= typeof dataJSON.scrollByX;
//scrollTo(dataJSON.scrollByX,dataJSON.scrollByY);
//
svgContent = undefined
scaleFactor = 1
constructor(props){
super(props)
this.state = {
pan: new Animated.ValueXY(),
scale: new Animated.Value(this.scaleFactor),
svgReady: false,
}
this.translateX = 0
this.translateY = 0
}
setScaleFactor = (scaleFactor) => {
this.scaleFactor = scaleFactor
this.state.scale.setValue(scaleFactor)
}
getScaleFactor = () => this.scaleFactor
setupPanResponder = () => {
// distance when pinch starts
let pinchDistance0 = undefined
// scale when pinch starts
let pinchScale0 = undefined
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: () => {},
onPanResponderMove: (evt, gestureState) => {
// scale.__getValue()
const scaleValue = this.getScaleFactor()
// pinch detected
if (gestureState.numberActiveTouches >= 2) {
const {
pageX: pageX0, pageY: pageY0
} = evt.nativeEvent.touches[0]
const {
pageX: pageX1, pageY: pageY1
} = evt.nativeEvent.touches[1]
const distance = Math.sqrt(
Math.pow(pageX0 - pageX1, 2) + Math.pow(pageY0 - pageY1, 2)
)
const distanceDelta = distance - pinchDistance0
// set distance0 if not set
if (pinchDistance0 === undefined) {
pinchDistance0 = distance
}
if (pinchScale0 === undefined) {
pinchScale0 = scaleValue
}
let scaleFactor = (distanceDelta * 1 / 500) + pinchScale0
if (scaleFactor < 1) {
scaleFactor = 1
} else
if (scaleFactor > 2) {
scaleFactor = 2
} else
if (!scaleFactor) {
scaleFactor = scaleValue
}
this.setScaleFactor(scaleFactor)
} else
if (gestureState.numberActiveTouches < 2) {
// reset pinch distance
pinchDistance0 = undefined
// reset pinch scale
pinchScale0 = undefined
}
const dxMax = (this.state.svgViewStyle.width * (scaleValue - 1)) / 2
const dxMin = (0 - dxMax) - (this.state.svgViewStyle.width - this.state.rootViewLayout.width)
const dyMax = (this.state.svgViewStyle.height * (scaleValue - 1)) / 2
const dyMin = (0 - dyMax) - (this.state.svgViewStyle.height - this.state.rootViewLayout.height)
let dx = this.translateX + gestureState.dx
if (dx > dxMax) {
dx = dxMax
}
if (dx < dxMin) {
dx = dxMin
}
let dy = this.translateY + gestureState.dy
if (dy > dyMax) {
dy = dyMax
}
if (dy < dyMin) {
dy = dyMin
}
console.log(dx,dy)
this.state.pan.setValue({
x: dx,
y: dy
})
},
onPanResponderRelease: (e, gestureState) => {
// reset pinch distance
pinchDistance0 = undefined
// reset pinch scale
pinchScale0 = undefined
// scale.__getValue()
const scaleValue = this.getScaleFactor()
const dxMax = (this.state.svgViewStyle.width * (scaleValue - 1)) / 2
const dxMin = (0 - dxMax) - (this.state.svgViewStyle.width - this.state.rootViewLayout.width)
const dyMax = (this.state.svgViewStyle.height * (scaleValue - 1)) / 2
const dyMin = (0 - dyMax) - (this.state.svgViewStyle.height - this.state.rootViewLayout.height)
this.translateX = this.translateX + gestureState.dx
if (this.translateX > dxMax) {
this.translateX = dxMax
}
if (this.translateX < dxMin) {
this.translateX = dxMin
}
this.translateY = this.translateY + gestureState.dy
if (this.translateY > dyMax) {
this.translateY = dyMax
}
if (this.translateY < dyMin) {
this.translateY = dyMin
}
}
})
}
onPlaceHiglight = (place) => {
console.log('onPlaceHiglight', place)
let { placeCoordinateX, placeCoordinateY } = place
if (
placeCoordinateX !== undefined && placeCoordinateX !== null &&
placeCoordinateY !== undefined && placeCoordinateY !== null
) {
if (placeCoordinateX === "") {
placeCoordinateX = 0
}
if (placeCoordinateY === "") {
placeCoordinateY = 0
}
const newScaleFactor = 1.6
Animated.timing(
this.state.scale, {
toValue: newScaleFactor,
useNativeDriver: true,
easing: Easing.linear,
duration: 300
}
).start(
() => {
this.setScaleFactor(newScaleFactor)
console.log(this.translateX,this.translateY)
const scaleValue = this.getScaleFactor()
const xMax = (this.state.svgViewStyle.width * (scaleValue - 1)) / 2
const xMin = (0 - xMax) - (this.state.svgViewStyle.width - this.state.rootViewLayout.width)
const yMax = (this.state.svgViewStyle.height * (scaleValue - 1)) / 2
const yMin = (0 - yMax) - (this.state.svgViewStyle.height - this.state.rootViewLayout.height)
// translateRatio assuming no scale
const translateRatio0 = (
this.state.svgViewStyle.width / this.state.svgViewBox.width
)
// xMax is x0
this.translateX = xMax - (
((parseInt(placeCoordinateX) * translateRatio0) * newScaleFactor)
- (this.state.rootViewLayout.width / 2)
)
// yMax is y0
this.translateY = yMax - (
((parseInt(placeCoordinateY) * translateRatio0) * newScaleFactor)
- (this.state.rootViewLayout.height / 2)
)
Animated.timing(
this.state.pan, {
toValue: {
x: this.translateX || 0,
y: this.translateY || 0
},
easing: Easing.elastic(1),
duration: 800,
useNativeDriver: true
}
).start()
}
)
}
}
componentWillMount() {
this.setupPanResponder()
axios.get(this.props.source.uri)
.then(result => {
this.svgContent = result.data
try {
const matches = String(result.data)
.match(/[.\n]*(<svg[^>]*>)[.\n]*/im)[1]
.replace("\n", "")
.match(/viewbox="([^"]*)"/i)[1].split(/\s/i)
console.log("matches",matches)
this.setState({
svgViewBox: {
x: parseInt(matches[0]),
y: parseInt(matches[1]),
width: parseInt(matches[2]),
height: parseInt(matches[3])
}
})
} catch (err) {
Alert.alert(
this.props.t('maps:error_cannot_render_correctly_title'),
this.props.t('maps:error_cannot_render_correctly'),
[
{text: 'OK', onPress: () => {}, style: 'cancel'},
],
{ cancelable: false }
)
console.error(err)
}
this.setState({
svgReady: true
})
this.props.onMapLoaded && this.props.onMapLoaded()
})
}
componentWillUpdate(nextProps, nextState) {
if (
// state changes
!_.isEqual(this.state, nextState) &&
(
// and rootViewLayout changes
!_.isEqual(
_.get(this.state, 'rootViewLayout'),
_.get(nextState, 'rootViewLayout')
) ||
// or svgViewBox changes
!_.isEqual(
_.get(this.state, 'svgViewBox'),
_.get(nextState, 'svgViewBox')
)
) &&
// and are objects both rootViewLayout and svgViewBox
_.isObject(nextState.rootViewLayout) &&
_.isObject(nextState.svgViewBox)
) {
const rootView = nextState.rootViewLayout
const svgViewBox = nextState.svgViewBox
this.setState({
svgViewStyle: {
height: rootView.height,
width: (svgViewBox.width * (rootView.height / svgViewBox.height))
}
})
}
if(
// placeHighlighted changes
_.get(this.props, 'placeHighlighted') !== _.get(nextProps, 'placeHighlighted') &&
// placeHighlighted exists and is an Object
_.isObject(_.get(nextProps, 'placeHighlighted'))
) {
this.onPlaceHiglight(_.get(nextProps, 'placeHighlighted'))
}
}
render() {
const {
styles,
source,
} = this.props
return (
<View style={[styles.root]}>
<View style={[styles.root, {
display: this.state.svgReady ? 'none' : undefined
}]}>
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<Image
style={{
resizeMode: 'contain',
width: 60,
height: 60
}}
source={require('../../assets/gif/loader_inpage.gif')}
/>
</View>
</View>
<View
ref={ref => this.rootViewRef = ref}
onLayout={(event) => {
const {x, y, width, height} = event.nativeEvent.layout
this.setState({
rootViewLayout: {x, y, width, height}
})
}}
style={[styles.root, {
display: this.state.svgReady ? undefined : 'none'
}]}
{...this._panResponder.panHandlers}
>
<Animated.View
style={{
transform: [
...this.state.pan.getTranslateTransform(),
{scale: this.state.scale || 2}
],
position: 'absolute',
top: 0,
left: 0
}}
>
<View style={{
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: 'red',
position: 'absolute',
zIndex:100,
top: 275,
left: 1000
}}/>
<WebView
ref={ref => this.webViewref = ref}
style={[{
height: '100%',
width: '100%'
}, this.state.svgViewStyle]}
source={this.props.source}
scalesPageToFit={true}
bounces={false}
javaScriptEnabled={false}
/>
</Animated.View>
</View>
</View>
)
}
}
根样式如下：
root: {
flex: 1,
//backgroundColor: new AttrReference('primaryBackground').value,
backgroundColor: '#fff',
width: '100%',
height: '100%'
},
有什么建议吗？我希望捏可以在两个触摸点之间缩放，而不总是在屏幕中心。
感谢任何反馈！