css कैसे तय चौड़ाई और ऊंचाई के साथ छवि के हिस्से को दर्पण और आकार




image reactjs (2)

मैं "फोटो से टैगिंग" कार्यक्षमता का निर्माण कर रहा हूं

  1. जब उपयोगकर्ता छवि पर स्क्वायर को स्थानांतरित या चुटकी लेता है,
  2. PanResponder एक्स-निर्देशांक (बाएं) की स्थिति, y- समन्वय (शीर्ष), वर्ग (thumbSize) की लंबाई बदलता है
  3. डेटा के साथ, मैं वास्तविक समय के वर्ग का हिस्सा दिखाना चाहता हूं

तो नीचे दी गई छवि ए के बाईं ओर स्थित होनी चाहिए, सब से ऊपर की छवि से।

यहाँ "क्रॉप" चित्र दिखा रेंडर का हिस्सा है

console.log(left) // 80
console.log(top) // 200
console.log(thumbSize) // 150
<Image
      source={{uri: image}}
      style={{height:70, width: 70, bottom: (-top), right: (-left)
      }} <- style is not complete. I'm putting some example code
/>

यह लगातार समस्या है: छवि का एकमात्र हिस्सा कैसे दिखाया जाए

यह काम करता है लेकिन समाधान मेरी अपेक्षाओं को पूरा नहीं करता है

  • यह चौड़ाई और ऊंचाई नहीं बदल रहा है (मैं छवि को चौड़ाई और चौड़ाई के लिए 'चौड़ाई की चौड़ाई' से '70' में बदलना चाहता हूं)
  • यह पूरी शैली को तोड़ता है (ए, सब, सब कुछ गायब हो जाता है)

मैं इस विचार को दिनों के लिए हल करने की कोशिश कर रहा था लेकिन सटीक तरीके से नहीं मिल सका।

अद्यतन: मैंने इसे लगभग हल किया लेकिन मामलों को फिर से आकार देना

मैंने Image को CroppedImage Image बदल दिया (नया घटक)

<CroppedImage
      source={{uri: image}}
      cropTop={top}
      cropLeft={left}
      cropWidth={thumbSize}
      cropHeight={thumbSize}
      width={width(100)}
      height={width(100)}
      resizeMode="contain" />

यहां CroppedImage

return (
  <View style={[{
    overflow: 'hidden',
    height: this.props.cropHeight,
    width: this.props.cropWidth,
    backgroundColor: 'transparent'
    }, this.props.style]}>
    <Image style={{
      position: 'absolute',
      top: this.props.cropTop * -1,
      left: this.props.cropLeft * -1,
      width: this.props.width,
      height: this.props.height
    }}
      source={this.props.source}
      resizeMode={this.props.resizeMode}>
      {this.props.children}
    </Image>
  </View>
);

यह काम करना लगता है लेकिन यह (चौड़ाई चौड़ाई x ऊंचाई से 70x70 तक) का आकार बदल नहीं सकता है


खैर, आखिरकार मैं काम करने वाले एक रिएक्ट नेटिव कोड (कभी भी इसका इस्तेमाल नहीं कर पा रहा था, खेद है अगर यह नोओबिश कोड है) बनाने में कामयाब रहे तो मेरे दूसरे उत्तर में ऐसा ही किया गया।

यहां कोड है:

import React, { Component } from 'react';
import { TouchableWithoutFeedback, ImageBackground, Image, View, StyleSheet } from 'react-native';

const IMAGEURI = 'http://fakeimg.pl/300x300/';
const SIZERATIO = .6;
const IMAGEWIDTH = 300;
const IMAGEHEIGHT = 300;
const CROPIMAGEWIDTH = 100;
const CROPIMAGEHEIGHT = 100;

export default class App extends Component {
  state = {
    style: {
      marginLeft: 0,
      marginTop: 0,
    },
    uri: ''
  };

  repositionImage(event) {
    this.setState({
      style: {
        marginLeft: CROPIMAGEWIDTH/2 - event.nativeEvent.locationX*SIZERATIO,
        marginTop: CROPIMAGEHEIGHT/2 - event.nativeEvent.locationY*SIZERATIO
      },
      uri: IMAGEURI
    });
  }

  render() {
    return (
      <View>
        <TouchableWithoutFeedback onPress={(event) => this.repositionImage(event)}>
          <View>
            <Image
              style={styles.image}
              source={{ uri: IMAGEURI }}
            />
          </View>
        </TouchableWithoutFeedback>
        <View style={styles.tag}>
          <ImageBackground style={[styles.cropped,this.state.style]} source={{uri: this.state.uri }} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    width: IMAGEWIDTH,
    height: IMAGEHEIGHT,
  },

  tag: {
    borderWidth: 1,
    borderColor: '#000',
    width: CROPIMAGEWIDTH,
    height: CROPIMAGEHEIGHT,
    overflow: 'hidden'
  },

  cropped: {
    width: IMAGEWIDTH*SIZERATIO,
    height: IMAGEHEIGHT*SIZERATIO
  }
});

और यहाँ स्नैक है

मैं वास्तव में उम्मीद है कि यह मदद की !! सौभाग्य!!

संपादित करें: ठीक है, मैं थोड़ा समझाऊँगा कि मैं यहाँ क्या कर रहा हूं।

सबसे पहले, मैंने एक राज्य को पैरामीटर के साथ सेट किया है जो कुछ घटना के आधार पर बदल जाएगा:

 state = {
    style: {
      marginLeft: 0,
      marginTop: 0,
    },
    uri: ''
  };

उसके बाद, मैं घटक को उस स्थिति से अपनी संपत्ति प्राप्त करने के लिए बना देता हूं:

<छवि पृष्ठभूमि शैली = {[styles.cropped, this.state.style ]} स्रोत = {{उड़ी: this.state.uri }} />

अंत में, मैं एक समारोह कॉल करने के लिए ऑनप्रेस ईवेंट तैयार करता हूं जो राज्य को अद्यतन करेगा:

< TouchableWithoutFeedback onPress = { (event) => यह.repositionImage (event) }>

यहां मैं अपने फ़ंक्शन को ईवेंट ऑब्जेक्ट के साथ खिला रहा हूं इसलिए मैं उस निर्देशांक को प्राप्त करने के लिए उपलब्ध होगा जहां उपयोगकर्ता ने दबाया।

यह अंतिम कार्य घटना से डेटा लेता है और राज्य को अद्यतन करता है। दृश्य स्वत: नए राज्य डेटा के साथ ताज़ा होगा।

repositionImage(event) {
  this.setState({
    style: {
      marginLeft: CROPIMAGEWIDTH/2 - event.nativeEvent.locationX*SIZERATIO,
      marginTop: CROPIMAGEHEIGHT/2 - event.nativeEvent.locationY*SIZERATIO
    },
    uri: IMAGEURI
  });
}

छवि की स्थिति में, मैं बस एक गणित कार्य करता हूं:

क्रॉफिमाइग्थिथ मेरे टैग तत्व की चौड़ाई है इसलिए केंद्र को 2 से इसे विभाजित करने के लिए। तब, मैं छवि के स्थान को बाईं तरफ स्थानांतरित करने के लिए घटना के स्थान X को स्थानांतरित करता हूं ताकि locationX टैग के केंद्र में हो।

यह स्थिति के लिए ही है इसे स्केल करने के लिए केवल छवि के आकार और उसी स्थान से locationX गुणा करें। ध्यान दें मैंने फसल की शैली में छवि के चौड़ाई और ऊंचाई को SIZERATIO के साथ गुणा किया

cropped: {
  width: IMAGEWIDTH*SIZERATIO,
  height: IMAGEHEIGHT*SIZERATIO
}

इस स्केलिंग सामान का एक उदाहरण:

यदि आपकी छवि की 200 चौड़ाई है और आप इसे आधे से ढंढना चाहते हैं, तो आप उसे 0.5 से गुणा करेंगे। तो अगर आप पर क्लिक करते हैं, तो कहते हैं, पिक्सेल 180 बाईं ओर से शुरू करने पर, आपकी स्केल छवि के बराबर पिक्सेल को भी 0.5 से गुणा करना होगा और यह 90 होगा

अगर कुछ है जो स्पष्ट रूप से स्पष्टीकरण नहीं करता है तो बस मुझे फिर से पूछें I आपकी मदद करने में खुशी होगी।


मैंने आपको यह दिखाने के लिए एक बेला बना दिया है कि आपकी टैग छवि को ठीक से स्थानांतरित करने और उसका आकार बदलने के लिए आपको कौन से गणना करना है:

$('#image').click(function(event) {
  var size_ratio = .6;

  var img_src = $(this).attr('src');
  
  var tag = $('#tag-rectangle');
  
  var top_position = tag.height()/2 - event.offsetX*size_ratio;
  var left_position = tag.width()/2 - event.offsetY*size_ratio;
  $('#tag-rectangle').css({
  	'background-image': 'url('+img_src+')',
    'background-position': top_position +'px '+ left_position + 'px',
    'background-size': $(this).width()*size_ratio + 'px ' + $(this).height()*size_ratio + 'px'
    });
});
#tag-rectangle {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="image" src="http://fakeimg.pl/250x100/" alt="">

<div id="tag-rectangle"></div>





react-native