huynguyencong / imagescrollview Goto Github PK
View Code? Open in Web Editor NEWScrollable and zoomable image view for iOS in Swift
License: MIT License
Scrollable and zoomable image view for iOS in Swift
License: MIT License
How can i load images from an URL ? any way to use it with SDWebImages ?
I want to use this library so that the user can select his profile image and centre it on himself. Unfortunately, the library doesn't allow to export the image with the current position and zoom level.
Could you make this available or help how I could implement it?
I tried this, but failed:
var zoomedImage: UIImage? {
guard let image = zoomView?.image else {
return nil
}
let x = contentOffset.x * zoomScale
let y = contentOffset.y * zoomScale
let wh = min(image.size.width, image.size.height) * zoomScale
let croppedImage1 = cropImage(image: image, rect: CGRect(x: x, y: y, width: wh, height: wh))
print(croppedImage1)
let scaleRect = zoomRectForScale(1 / zoomScale, center: zoomView!.center)
let croppedImage2 = cropImage(image: image, rect: scaleRect)
print(croppedImage2)
return croppedImage1
}
private func cropImage(image: UIImage, rect: CGRect) -> UIImage {
let cgImage = image.cgImage!
let croppedCGImage = cgImage.cropping(to: rect)
return UIImage(cgImage: croppedCGImage!)
}
Shouldn't we expect an update that addresses Xcode 10 and swift 4.2 in the near future?
Hi,
I would like to ask if it is possible to know when the user zooms on the image seen on the screen.
My problem is that every 5 seconds I change the image on the display and I would like this automatic transmission to stop if the user zooms on the image
Thank you
2 compile errs in swift 5 - can you fix ?
private func initialize() {
showsVerticalScrollIndicator = false
showsHorizontalScrollIndicator = false
bouncesZoom = true
decelerationRate = UIScrollView.DecelerationRate.hash
delegate = self
NotificationCenter.default.addObserver(self, selector: #selector(ImageScrollView.changeOrientationNotification), name: UIDevice.NSNotification.Name.UIDeviceOrientationDidChange, object: nil)
}
Hi, your library seems to be fine, but when I zoom in the image too much I no longer can zoom it out. I mean, I cannot pinch-zoom. The workaround is to double tap.
My view hierarchy is simple:
and here are constraints:
So, I have a view pinned to the sides and top with 1:1 aspect ratio and ImageScrollView inside pinned to all edges (no margin).
Code is also very simple:
override func viewDidLoad() {
super.viewDidLoad()
imageScrollView.setup()
if let myImage = UIImage(named: "test.png") {
imageScrollView.display(image: myImage)
}
}
What could be wrong?
Pod is added like this:
pod 'ImageScrollView', :git => 'https://github.com/huynguyencong/ImageScrollView.git'
because
pod 'ImageScrollView'
just didn't work for me. It was using some old version of the library, where I couldn't even find setup()
method.
Clarity of Image reduces after the image is set in Imagescrollview library. Please Provide a solution of how to display image without loosing image original quality.
Unless I am missing it, there is no way to grab onto these events as-is. It would seem I need to augment the repo for a new protocol and pass them out as needed. If this is incorrect, please let me know, thank you.
Hello,
I am implementing your class and I found it great and very easy to implement but I have the issue mentioned in the title that displays in the console twice each image that I load. Also only the first image gets render the others does not appear.
I am using the file because I have some issues with CocoaPods and I implemented it on a collectionView with custom cells in horizontal layout. Here is the code:
In the cell:
`var albumItem: AlbumItem? {
didSet{
let image = UIImage(named: (albumItem?.imageName)!)
imageView.display(image: image!)
if albumItem?.type == .video {
setUpPlayImage()
}
}
}
let imageView: ImageScrollView = {
let iv = ImageScrollView()
let image = UIImage(named: "chiron")
iv.display(image: image!)
iv.zoomView?.contentMode = .scaleAspectFill
iv.clipsToBounds = true
iv.translatesAutoresizingMaskIntoConstraints = false
return iv
}()`
In the CollectionViewcontroller:
`override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let singleTap = UITapGestureRecognizer()
singleTap.numberOfTapsRequired = 1
//singleTap.require(toFail: doubleTap)
singleTap.addTarget(self, action: #selector(self.handleTap(gesture:)))
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! AlbumItemFullCell
// Configure the cell
cell.albumItem = albumItems?[indexPath.item]
cell.playImage.contentMode = .center
cell.backgroundColor = UIColor.getDarkGray()
cell.addGestureRecognizer(singleTap)
return cell
}`
I noticed the part that the error gets called:
But I have no idea why, hope someone know whats happening.
If the user moves their device enough to make it change orientation the zoom size will reset, even when the application is locked to a particular orientation. Could this be turned off if the app is locked? If not maybe adding an option would be a good compromise?
Just starting to test this control.
Noticed when I was setting it up that when you edit the custom class for the ScrollView control you need to set both the Class and the Module to ImageScrollView. If you set only the Class the control crashes at runtime.
Note that the Readme file shows a graphic and only visually boxes the Class. Would be useful and more accurate to have the box highlight both the Class and the Module to avoid the above error.
Looking forward to playing with the control.
Hi,
I realized that DidChangeOrientation event is fired when I swipe down notification bar. Is it intentional? Can I somehow block that event?
If an image loaded into the ImageScrollView is smaller than the frame of the ImageScrollView, is it possible to use UIViewContentMode.center instead of stretching the image to always fill the ImageScrollView frame? I am using the ImageScrollView to display images that my users upload, which could be very small to very large depending on what the user selects. It would be nice is the ImageScrollView had the option to fill the frame if the image is large enough but otherwise not stretch it beyond its original size (at least until the user does a pinch to zoom).
For a regular UIView, I would try something like this:
imageView.contentMode = UIViewContentModeCenter;
if (imageView.bounds.size.width > myView.frame.size.width) && (imageView.bounds.size.height > myView.frame.size.height) {
imageView.contentMode = UIViewContentModeScaleAspectFit;
}
But this doesn't seem to have any effect on an ImageScrollView.
I am working on an application that displays images using ImageScrollView, I must say that it is a really good piece of code. I do have a problem however:
I am displaying images that are rectangular and taller than they are wide. On iPhone these start of at a perfect scale but on iPad they are zoomed in so you cannot se the top and bottom parts of the image. It seems like the initial scaling of the image is only considering the width of the ImageScrollView, not the height. I simply want the pictures initial zoom to be scaled to fit inside the ImageScrollView no matter what.
Is it true that only the width of the image is used when calculating the initial scale? If not, can the auto layout constraints be blamed for this. My auto layout constraints for the height of the ImageScrollView is quite a bit more complex.
hi there,
im using this library in my project. in order to get it run with xcode 8 and ios 10 i need to have at least swift 2.3 support. do you plan to upgrade this lib to 2.3?
cheers
emre
Position of an image is always reset when I tilt forward an iPhone. The problem disappeared when I commented this line:
Hi, do you plan to integrate this with swiftui
Hey, Thanks for making this library. This is what I was exactly looking for.
I have a query. After zooming to the part of image. I wanted to create another image with the zoomed part of the image within the boundaries of the screen. Like cropping the part that's visible on screen.
How can I get that? I want to save that in a image object and display that later.
When adding the ImageScrollView
programmatically using autolayout nothing shows in screen.
let imageScrollView = ImageScrollView()
self.view.addSubview(imageScrollView)
imageScrollView.translatesAutoresizingMaskIntoConstraints = false
imageScrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
imageScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
imageScrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
imageScrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
imageScrollView.imageContentMode = .aspectFit
imageScrollView.initialOffset = .center
let image = UIImage(named: "moto", in: Bundle(for: type(of: self)), compatibleWith: nil)
imageScrollView.display(image: image!)
The weird thing in that the sample uses Storyboard to add the ImageScrollView
and adds constraints to it.
Thank you for this useful library. It saves me countless of hour to implement a zoomable and swipeable image viewer.
However, I am very curious on the following line
https://github.com/huynguyencong/ImageScrollView/blob/master/Sources/ImageScrollView.swift#L248
It seems to me, without 0.999 technique, it will become problematic when this ImageScrollView
is placed within UIPageViewController
.
I try to implement such, by placing ImageScrollView
in UIPageViewController
https://gist.github.com/yccheok/b660cc09b404ae3bab3eb4a586c33cc8
However, I do not find any issue, when I try to change line 248
from
minimumZoomScale = minScale * 0.999
to
minimumZoomScale = minScale
May I know, what problem 0.999 is trying to solve?
Thank you very much
It seems too challenging to achieve a simple task: fire up a viewcontroller, set an imagescrollview with a preset zoom and offset.
I know i had it working before, but at present it doesn't seem to want to work.
thank you, drew..
Hey,
Nice work on this library. Your library used to work great for Objective-C but it seems to have been broken in one of the latest commits. This happened when you changed to Swift 4.
The displayWithImage method is no longer accessible in Objective-C in its current state. Luckily I was able to fix it just by adding @objc to that method in your code. You might want to add that yourself.
I would submit a pull request but I'm a little low on time :)
Thanks!
This is a very minor issue, but it would be nice when the scale is reset after zooming out too far (when the image is smaller than the frame), if the reset zoom could be pivoted from the centre of the screen rather than the top left - as it looks a bit odd at the moment.
how about Rotate ?
Are you planning to add a new version for swift 3?
When image width is smaller than screen width, it aligns to the left of the screen initially.
Can I use like this?
let imageScrollView = ImageScrollView()
self.view.addSubview(imageScrollView)
imageScrollView.setup()
imageScrollView.display(image: image)
I would like to use this library with Carthage.
But, this repo does not have a shared scheme in Xcode Project.
You can support Carthage with adding XcodeProject for Carthage and share build scheme.
/Pods/ImageScrollView/Sources/ImageScrollView.swift:77:28: Type 'UIScrollView.DecelerationRate' (aka 'CGFloat') has no member 'fast'; did you mean 'hash'?
/Pods/ImageScrollView/Sources/ImageScrollView.swift:80:137: 'orientationDidChangeNotification' has been renamed to 'NSNotification.Name.UIDeviceOrientationDidChange'
Can you fix these ( in initialize method ) ?
Hello,
I just want to offer you a bit better way to handle size changes. You right frames change not triggered if you change orientation or if autolayouts updated for example :) But bounds definitely got that events :)
You can easy to handle that by this code
override var bounds: CGRect {
didSet {
//Update UI if size of view changed
if (usedWidth != bounds.width) || (usedHeight != bounds.height) {
reloadUI()
}
}
}
private func reloadUI() {
usedWidth = bounds.width
usedHeight = bounds.height
}
Something like that. I can make real code for you if you want. Thanks for your small and good library :)
Just one more suggestion make imageSize public :) at least for read access :)
How to set image content mode?
I have tried to set image content mode to centre here:
open func display(image: UIImage) {
.
.
.
zoomView = UIImageView(image: image)
zoomView?.contentMode = .center
.
.
.
}
But image is not displaying center.
@objc public enum ScaleMode: Int {
case aspectFill
case aspectFit
case widthFill
case heightFill
}
Only these modes are supported, but how can I use something like "ContentMode.top" so it'll fit the image, but instead of centering it, it'd move the image to the top? I've tried limiting view's height by manually setting up aspect ratio constraint, but then it causes the other issue, which I've described here:
Hey, I was just trying to figure this out.
When the image is zoomed manually it wont stay in that location. The image for some reason
goes to any of the 4 corners.
Any idea why?
Thank you.
I am using the library in a tableview
Sometimes when a cell reused, image appears as dragged down by itself
Check it on screen recording
https://share.icloud.com/photos/0m_0t44qDcrKhPy8DPMusR-Rw
Hi there,
is there any way to restore the images zoomscale and contentoffset after re-setting the image, so that the user does not lose the zoomed image when re-opening the view?
I tried to save the zoomScale and contentOffset on viewDidDissappear and re-setting it after using your displayImage() with myScrollImageView.zoomScale = savedZoomScale and the same for contentoffset but it does not work.
Any ideas for that?
cheers and thanks for the nice library!
emre
There is a problem with overriding override init(frame: CGRect)
method when ImageScrollView added as separate target via CocoaPods. Only required public init?(coder aDecoder: NSCoder)
is accessible but it's not enough when adding control programatically.
Please add public
keyword to the second initializer.
I had some issues with centering inside a UIPageController inside a UINavigationController. When a page is rendered it does not always know about the navigationBar and the centering can be off.
I added the following to ImageScrollView to make it render ok. A bit of a hack but it is what I ended up doing so far.
override open func safeAreaInsetsDidChange() {
configureImageForSize(imageSize)
adjustFrameToCenter()
}
Hi, I want to change ImageScrollView to ZoomableScrollView for more general library.
@objc public private(set) var zoomView: UIImageView? = nil
// to
@objc public private(set) var zoomView: UIView? = nil
@objc open func display(image: UIImage) { ... }
// to
@objc open func display(view: UIView) { ... }
@objc open func display(image: UIImage) {
let myView = UIImageView(image: image)
myView!.isUserInteractionEnabled = true
addSubview(myView)
display(view: myView)
}
...
and with any other refactoring.
Do you have this kind of plan in this repository?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.