Question

我正在使用Expo并进行本机反应，以尝试创建图像裁剪界面，在该界面中我想要裁剪较大原始图像的正方形图像。并在原始图像中留下已经用红色方块切出的部分。（此标记必须在映像中，而不是在上面的接口层中，以便以后可以将映像上载到服务器。）示例：image

我尝试使用一些裁剪库，但是它们要么与expo不兼容和/或没有返回切割坐标，所以我可以尝试实现一种逻辑来标记切割位置。然后我开始尝试基于ScrollView进行开发，但是我已经遇到了一些问题。原始图像是高分辨率的，因此，我可以放大要裁剪的部分，但仍具有高质量的裁剪图像，只是滚动视图内部的图像缩小且质量较差，将其尺寸限制在设备尺寸上。并且也无法从滚动视图中的图像获取位置信息以进行裁剪。到目前为止，这是我要削减的：

<View style={{
      flex: 1,
      height: '50%',
      backgroundColor: '#666',
    }}>


      <ScrollView
        contentContainerStyle={{ 
          justifyContent: 'center',
          alignItems: 'center', 
        }} //flexbox styles
        centerContent //centers content when zoom is less than scroll view bounds 
        maximumZoomScale={this.props.maximumZoomScale}
        minimumZoomScale={this.props.minimumZoomScale}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        ref={this.setZoomRef} //helps us get a reference to this ScrollView instance
        style={{ overflow: 'hidden' }}
        onScroll={this.onScrollUpdate.bind(this)}
       >
         <Image
          style={{ width: width, height: height/2, resizeMode: 'contain' }}
          source={require('./assets/exemplo1.jpg')}
         />
       </ScrollView>


    </View>

要标记图像，到目前为止，我获得的最好成绩是使用了博览会的Svg，但是我遇到了两个问题，渲染矩形的坐标不是原始图像，而是视图中显示的图像。并且还使用svg无法生成带有标记的图像的png / jpg。

<Svg height={height/2} width={width}>
        <Svg.Image
          x="0"
          y="0"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          //opacity="0.5"
          href={require('./assets/exemplo1.jpg')}
          //clipPath="url(#clip)"
        />

        { this.state.vetor.map(mrc =>
          <Svg.Rect
            x=mrc.x//{200}
            y=mrc.y
            width={marc.w}
            height={mrc.h}
            strokeWidth={2}
            stroke="red"
            fill="transparent"
          />
        )}


      </Svg>

如何在React Native中

0 个答案: