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

要轮播NSImage或NSButton图片，我使用Swift 3为NSImage编写了一个扩展程序。

您可以传递给函数：

旋转度让我们说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

     }

}

Answer 2

您必须使用平移变换将中心转换为0,0然后旋转，然后平移回以使中心位于您想要的位置。类似的东西：

@Component
  selector: `tab`,
  template: 
    `<div [hidden]="!active">
      <div #viewport></div>
      <div class="nav-decor"></div>
    </div>`
})
export class Tab {
  @Input('tabTitle') title: string;
  @Input() active = false;
  @Input('tabIcon') icon: string;
  @Input() root: Type<Component> = DefaultTabComponent;

  componentRef: ComponentRef<Component>;
  @ViewChild('viewport', {read: ViewContainerRef}) target: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    let factory = this.componentFactoryResolver.resolveComponentFactory(this.root);
    this.componentRef = this.target.createComponent(factory);
  }
}

将NSButton的图像翻转过来

2 个答案: