Как отметить часть изображения, используя координаты и масштабирование изображения?
Я только начал изучать React-Native, у меня в текущем проекте такая проблема. Я получаю изображение детали автомобиля из API, это изображение в формате png, каждый номер детали пронумерован на картинке, я также получаю координаты (координаты (x, y), ширину, высоту) каждого числа. Моя цель - задать границу и цвет границы для каждого числа внутри изображения детали. Проблема в том, что эти координаты вычисляются для полноразмерного изображения и не соответствуют изображению на мобильных устройствах. Также проблема возникает при увеличении изображения, существующие координаты практически бесполезны. Я приму любое предложение, которое поставит меня правильно, спасибо
Я хочу добиться того же результата, но понятия не имею, как они решают эту проблему в существующем проекте:link
demo:
import React from "react";
import { Animated, Dimensions, View, Image, Text} from "react-native";
import ImageZoom from 'react-native-image-pan-zoom';
const PinchableBox = () => {
/* Part number, coordinates(x,y, width,height) */
let partPosition = {number:1,coordinates:[327,18,12,22]}
return (
<View>
<View style={{position:'relative'}}>
<ImageZoom
cropWidth={350}
cropHeight={290}
panToMove={true}
minScale={1}
maxScale={4}
imageHeight={300}
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>
//coordinate border
<Text
style={{
color:'red',
borderWidth:2,
height:partPosition.coordinates[3],
width:partPosition.coordinates[2],
position:'absolute',
positionX:327,
positionY:18
}}
>{partPosition.number}
</Text>
</View>
</View>
);
};
export default PinchableBox;