I am using antd imgCrop for cropping image. I want to make the image not cropped when zoom below 1.
The example is below:
When i zoom out like that i want the image have a white space like the screenshot with red border.
original image
but the result my image get cropped
is there a way so my image not getting cropped when zoom below 1? so the output is image with whitespace.
https://codesandbox.io/s/antd-img-crop-forked-x8j16z?file=/src/index.js
Thank you before
I have found the solution by Adding Cropperprops and set restric position to false
<ImgCrop
cropperProps={{ restrictPosition: false }}
>
Related
I have a horizontal list of large images. I want to have an animation set that when a user clicks on an image this image jumps out and moved to the top of the screen using the full width so I can open a bottom drawer to fill the rest. How could I achieve this?
Look at the picture, CheckBox in a RowLayout, set the indicator width a Image,
but with diffrent height setting in CheckBox, it show diffrent
height: 20 (the image top show one more pixel)
Layout.fillHeight:true (Image show correct)
But if checkBox not in RowLayout, use height:20 will show correct image
Anyone know why? thank you
I'm trying to clip image with clipPath object using fabricjs in Reactjs . It works fine except there is a white line (about 1 pixel) showing on top and left border. Code can be checked at this codesandbox
By default, fabric objects have a transparent stroke of 1px. Setting a strokeWidth value of 0 on your clipPath object will get rid of this.
See http://fabricjs.com/fabric-gotchas
This question is related to my other question at Carousel with thumbnail images at the bottom
I'm trying to implement a similar carousel but only of Images, using ImageViewer and DefaultListModel. When I select a thumbnail image from the bottom carousel, I show corresponding image in the ImageViewer. But what I noticed is that; the list in the ImageViewer doesn't get scrolled to the selected image but the currently displayed image gets replaced with the selected one. The So when I swipe to left or right; the images are different than the original sequence. Following is my code to show the selected image in Imageviewer
imageviewer.setImage(imageviewer.getImageList().getItemAt(selectedImgIndx));
Is there any way to make it behave like a Tab.setSelectedIndex?
Sure, use:
imageviewer.getImageList().setSelectedIndex(idx);
I am making a preview in extjs and I need to float images above an image in a DataView based on an image clicked in another DataView. image layering. How does one do that?
i think you can achieve that by manipulating the zIndex of the individual images... That is a CSS solution... The images you want above should have zIndex higher than the one below and at first hide all images except the lowermost image and then as required show the other images one after another... Hope it helps...