我刚开始学习React Native，我在当前的项目中遇到了这样的问题。我从API收到了汽车零件图像，该图像为png格式，每个零件编号都在图中编号，我还得到了每个编号的坐标(坐标(x，y(、宽度、高度(。我的目标是为零件图片中的每个数字提供边框和边框颜色问题是，这些坐标是在全尺寸图像上计算的，与移动设备上的图像不匹配。当放大图像时也会出现问题，现有的坐标几乎是无用的。我会接受任何能给我正确观点的报价，谢谢
我想达到同样的结果，但我不知道他们是如何将这个问题解决到现有项目中的：链接这里
复制链接：此处链接
import React from "react";
import { Animated, Dimensions, View, Image, Text} from "react-native";
import ImageZoom from 'react-native-image-pan-zoom';
import {useState} from "react";
const PinchableBox = () => {
const [scale, setScale] = useState('')
/* Part number, coordinates(x,y, width,height) */
let partPosition = {number:1,coordinates:[327,18,12,22]}
let calculated = partPosition.coordinates[0] / scale
console.log(calculated)
return (
<View>
<View style={{position:'relative'}}>
<ImageZoom
cropWidth={350}
cropHeight={290}
panToMove={true}
minScale={1}
maxScale={4}
imageHeight={300}
onMove={(e)=>setScale(e.scale)}
imageWidth={300}
style={{marginTop:0}}
>
<Image style={{ width: '100%', height: 300}}
source={{ uri: `https://img.parts-catalogs.com/bmw_2020_01/data/JPG/209412.png` }}
resizeMode="contain"
/>
</ImageZoom>
<Text
style={{
color:'red',
borderWidth:2,
height:partPosition.coordinates[3],
width:partPosition.coordinates[2],
position:'absolute',
transform:[{translateX:327 * (scale / 2 )},{translateY:18 * scale}]
}}
>{partPosition.number}
</Text>
</View>
</View>
);
};
export default PinchableBox;import React from 'react';
import { Animated, Dimensions, View, Image, Text } from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
import { useState } from 'react';
const PinchableBox = () => {
const [scale, setScale] = useState('');
const transformScale = { width: 300/800, height: 300/500 };
// 800 is the actual image width and 300 is width shown in screen. Same for height.
/* Part number, coordinates(x,y, width,height) */
const [textPosition, setTextPosition] = useState({
x: 315*transformScale.width,
y: 80*transformScale.height,
});
const [showText, setShowText] = useState(false);
let partPosition = {
number: 1,
coordinates: [315, 80, 20, 20],
};
const checkIfClickLiesInAnyPart = ({ x, y }) => {
const tX = x/transformScale.width;
const tY =y/transformScale.height;
let c=partPosition.coordinates;
if(tX<=c[0]+2*c[2] && tX>=c[0]-2*c[2] && tY<=c[1]+c[3] && tY>=c[1]-c[3]) return {matchedWith:1};
return {matchedWith:false};
};
const handleClick = (e) => {
console.log('clicked', e);
const {matchedWith}=checkIfClickLiesInAnyPart({ x: e.locationX, y: e.locationY })
if (matchedWith) {
setShowText(true);
setTextPosition({ x: partPosition.coordinates[0]*transformScale.width, y: partPosition.coordinates[1]*transformScale.height });
} else {
setShowText(false);
}
};
return (
<View>
<View style={{ position: 'relative' }}>
<ImageZoom
cropWidth={300}
cropHeight={300}
panToMove={true}
minScale={1}
maxScale={4}
imageHeight={300}
onMove={(e) => setScale(e.scale)}
imageWidth={300}
style={{ marginTop: 0 }}
onClick={handleClick}>
<Image
style={{ width: '300px', height: '300px' }}
source={{
uri: `https://img.parts-catalogs.com/bmw_2020_01/data/JPG/209412.png`,
}}
resizeMode="contain"
/>
// put textbox inside ImageZoom so that it also zooms / moves with image
{showText && (
<Text
style={{
color: 'red',
borderWidth: 2,
height: '20px',
width: '20px',
position: 'absolute',
left: textPosition.x + 'px',
top: textPosition.y + 'px',
}}>
1
</Text>
)}
</ImageZoom>
</View>
</View>
);
};
export default PinchableBox;
更新的演示：snack.expo.dev/i5IPPbFu4[如果你在第1部分附近点击，框将被突出显示，否则它将被隐藏…你也可以修改可接受的点击区域]
我也留下了一些评论。示例代码仅适用于1部分。。对于多个部件，修改CCD_ 2以检查所有部件以及一些其他修改。