翻转 NSButton 的图像倒置

Question

我有一个非常简单的 macOS 应用程序（使用 Xcode 8.2.1 在 Swift 中编写）。在我的主要 UI 中有一个带有自定义图像的 NSButton（它代表一张扑克牌 - 就像在扑克牌中一样）。当我单击该按钮时，我希望它的图像被旋转 180 度（上下颠倒）。

我是仿射变换的新手，但我认为这可能行得通（但行不通）。

@IBAction func buttonClicked(_ sender: NSButton) {
  var transform = sender.layer?.affineTransform()
  transform = transform?.rotated(by:  180.0 * (CGFloat.pi / 180))
  sender.layer?.setAffineTransform(transform!)
}

卡片正确旋转，但绘制在新位置。

将按钮的图像旋转 180 度同时保持其在父项中的位置不变的正确方法是什么？

Answer 1

您必须使用平移变换将中心平移到 0,0，然后旋转，然后再平移回来，这样中心就在您想要的位置。类似于：

 transform = transform?
     .translatedBy(x: -self.center.x, y: -self.center.y)
     .rotated(by:  180.0 * (CGFloat.pi / 180))
     .translatedBy(x: self.center.x, y: self.center.y)

Answer 2

为了旋转 NSImage 或 NSButton 图片，我使用 Swift 为 NSImage 写了一个扩展 3.

您可以传递给函数：

旋转角度假设为 180 度。
要旋转的图像。

调用方法如下：

@IBAction func button(_ sender: NSButton) {

     sender.image = NSImage().imageRotatedByDegrees(rotationDegree: 180,
forImage: sender.image!)

}

你的分机：

extension NSImage {

     func imageRotatedByDegrees(rotationDegree degrees:CGFloat,forImage
image:NSImage) -> NSImage {

         // calculate the bounds for the rotated image
         var imageBounds = NSRect(origin: NSZeroPoint, size: image.size)

         let boundsPath : NSBezierPath = NSBezierPath(rect: imageBounds)

         var transform : NSAffineTransform = NSAffineTransform()

         transform.rotate(byDegrees: degrees)
         boundsPath.transform(using: transform as AffineTransform)

         let rotatedBounds : NSRect = NSRect(origin: NSZeroPoint, size:
boundsPath.bounds.size)

         let rotatedImage = NSImage(size: rotatedBounds.size)

         // center the image within the rotated bounds

         imageBounds.origin.x = NSMidX(rotatedBounds) - (NSWidth
(imageBounds) / 2); imageBounds.origin.y = NSMidY(rotatedBounds) -
(NSHeight (imageBounds) / 2)

         // set up the rotation transform
         transform = NSAffineTransform()

         transform.translateX(by: +(NSWidth(rotatedBounds) / 2), yBy:
+(NSHeight(rotatedBounds) / 2))

         transform.rotate(byDegrees: degrees)

         transform.translateX(by: -(NSWidth(rotatedBounds) / 2), yBy:
-(NSHeight(rotatedBounds) / 2))

         // draw the original image, rotated, into the new image
         rotatedImage.lockFocus()
         transform.concat()

         image.draw(in: imageBounds, from: NSZeroRect, operation:
NSCompositeCopy, fraction: 1.0)

         rotatedImage.unlockFocus()

         return rotatedImage

     }

}

翻转 NSButton 的图像倒置

Flip NSButton's image upside down

cocoa

transform

cgaffinetransform

swift

swift3