Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to set the stars vertically instead of horizontally? #167

Open
lsamaria opened this issue Jul 1, 2020 · 4 comments
Open

How to set the stars vertically instead of horizontally? #167

lsamaria opened this issue Jul 1, 2020 · 4 comments

Comments

@lsamaria
Copy link

lsamaria commented Jul 1, 2020

Please consider submitting the following information (if relevant):

  • Library setup method: CocoaPods
  • Version of the library. pod 'Cosmos', '~> 22.1'
  • Xcode version. 11.5
  • OS version. Example: iOS 13.5

How can I set the stars vertically, with the bottom star being 0 and the top star being 5 (in other words swiping up instead of from left to right)?

lazy var starRating: CosmosView = {
    let cosmosView = CosmosView()
    cosmosView.translatesAutoresizingMaskIntoConstraints = false
    cosmosView.rating = 0.0
    cosmosView.settings.starSize = 22.5
    cosmosView.settings.fillMode = .precise
    cosmosView.settings.minTouchRating = 0.0
    return cosmosView
}()

view.addSubview(starRating)
starRating.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
starRating.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

@evgenyneu
Copy link
Owner

Hi @lsamaria, this is not possible with Cosmos library, unfortunately. Sorry

@lsamaria
Copy link
Author

lsamaria commented Jul 2, 2020

@evgenyneu thanks. I was able to find a workaround using a CGAffineTransform:

cosmosView.frame.size = cosmosView.intrinsicContentSize
cosmosView.transform = CGAffineTransform(rotationAngle: -.pi * 0.5)

or

cosmosView.transform = CGAffineTransform(rotationAngle: -90 * .pi/180)

The two drawbacks are the stars get misaligned, they rotate clockwise a bit. I had to play with the image rotation to get them back but they are still a tad bit off. It's a good enough work around for now. The other draw back is the stars shrink from the original size. I had to play with the size and spacing to get them to realign again.

lazy var cosmosView: CosmosView = {

    let cosmosView = CosmosView()
    cosmosView.translatesAutoresizingMaskIntoConstraints = false

    cosmosView.settings.starSize = 27.5 // before I set the CGAffineTransform above, this was originally 22.5
    cosmosView.settings.fillMode = .precise
    cosmosView.settings.starMargin = 11.5 // before I set the CGAffineTransform above, this was originally 16
    cosmosView.settings.totalStars = 10

    let starFilledIcon = UIImage(named: "starFilledIcon")
    let rotatedImageFilledStar = starFilledIcon!.rotate(radians: .pi / 1.115)

    let starEmptyIcon = UIImage(named: "starEmptyIcon")
    let rotatedImageEmptyStar = starEmptyIcon!.rotate(radians: .pi / 1.115)

    cosmosView.settings.filledImage = rotatedImageFilledStar
    cosmosView.settings.emptyImage = rotatedImageEmptyStar

    return cosmosView
}()

extension UIImage {
    
    func rotate(radians: CGFloat) -> UIImage {
        let rotatedSize = CGRect(origin: .zero, size: size)
            .applying(CGAffineTransform(rotationAngle: CGFloat(radians)))
            .integral.size
        UIGraphicsBeginImageContext(rotatedSize)
        if let context = UIGraphicsGetCurrentContext() {
            let origin = CGPoint(x: rotatedSize.width / 2.0,
                                 y: rotatedSize.height / 2.0)
            context.translateBy(x: origin.x, y: origin.y)
            context.rotate(by: radians)
            draw(in: CGRect(x: -origin.y, y: -origin.x,
                            width: size.width, height: size.height))
            let rotatedImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()

            return rotatedImage ?? self
        }

        return self
    }
}

Hopefully it helps someone else.

@evgenyneu
Copy link
Owner

Wow very cool, thanks for sharing!

@lsamaria
Copy link
Author

lsamaria commented Jul 2, 2020

np, thanks for the great library!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants