React-Native：如何標記圖片的一部分，使用坐標和圖像縮放？

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+100聲望賞金。 theUltimateKafka想引起更多人對這個問題的關注。

剛開始學習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;

Answer 1

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;

演示： https://snack.expo.dev/HcBcDZjwWP

[如果您在第 1 部分附近單擊，該框將突出顯示，否則它將被隱藏...您也可以修改可接受的單擊區域]

我也留下了一些評論。 示例代碼僅適用於 1 個部分。對於多個部分，請修改checkIfClickLiesInAnyPart以檢查所有部分以及其他一些修改。