0

对于使用过上述两个库的任何人，我都在尝试完成以下功能：

用户将能够查看、旋转、缩放、平移图像，并且一旦在图像的所需位置上，就能够裁剪该区域。

我遇到的第一个问题是“ReactCrop”不允许我在“TransformComponent”内部进行裁剪，但将子元素传递给它的唯一方法是将其定位在组件之间。我可以看到要裁剪的十字准线，但是当我尝试拖动图像时，它只会移动图像（react-zoom-pan-pinch 行为）

                  const [isDisabled, toggleIsDisabled] = useState(true);

                  const onClickCrop = () => {
                  toggleIsDisabled(!isDisabled)
                  }      
                  const handleOnCropChange = () => {
                  // pick up crop changes 
                  } 
                  const handleOnCompleteCrop = () => {
                  // do something when done with crop
                  }            

                  return(
                   <TransformWrapper>
                   {({ zoomIn, zoomOut }) => (

                   // some code here to handle image zoom...

                   <Button onClick={onClickCrop}>
                      {isDisabled ? 'Crop: Off' : 'Crop: On'}
                    </Button>
                    <Box>
                      <TransformComponent>
                        <ReactCrop
                          crop={crop}
                          src={file}
                          onChange={handleOnCropChange}
                          onComplete={handleOnCompleteCrop}
                          disabled={isDisabled}
                        />
                      </TransformComponent>
                    </Box>
                   )}
                   </TransformWrapper>)

如果有人有任何其他想法来完成上述功能，我也会对探索它们非常感兴趣。谢谢！

4

0 回答 0