Sprite工具包中的裁剪/遮罩圆形图像节点会产生锯齿状边缘

Question

是否可以在没有锯齿边缘的情况下将圆形遮罩/裁剪提供给图像节点？

继Apple的这个例子（https://developer.apple.com/reference/spritekit/skcropnode），结果并不理想。您可以点击链接查看。

let shapeNode = SKShapeNode() 
    shapeNode.physicsBody = SKPhysicsBody(circleOfRadius: radius) 
    shapeNode.physicsBody?.allowsRotation = false 
    shapeNode.strokeColor = SKColor.clearColor() 

    // Add a crop node to mask the profile image 
    // profile images (start off with place holder) 
    let scale = 1.0 
    let profileImageNode = SKSpriteNode(imageNamed: "PlaceholderUser") 
    profileImageNode.setScale(CGFloat(scale)) 

    let circlePath = CGPathCreateWithEllipseInRect(CGRectMake(-radius, -radius, radius*2, radius*2), nil) 

    let circleMaskNode = SKShapeNode() 
    circleMaskNode.path = circlePath 
    circleMaskNode.zPosition = 12 
    circleMaskNode.name = "connection_node" 
    circleMaskNode.fillColor = SKColor.whiteColor() 
    circleMaskNode.strokeColor = SKColor.clearColor() 

    let zoom = SKAction.fadeInWithDuration(0.25) 
    circleMaskNode.runAction(zoom) 

    let cropNode = SKCropNode() 
    cropNode.maskNode = circleMaskNode 
    cropNode.addChild(profileImageNode) 
    cropNode.position = shapeNode.position 

    shapeNode.addChild(cropNode) 
    self.addChild(shapeNode) 

Answer 1

更新：

好吧，所以这里有一个解决方案，我想出了。不是超理想，但它完美的作品。从本质上讲，我有一个尺寸/比例尺，并按照它在SKSpriteNode上的方式完全切割图像，因此我不必使用SKCropNode或SKShapeNode的一些变体。

1. 我使用Leo Dabus的这些UIImage扩展来根据需要调整图像大小。 Cut a UIImage into a circle Swift(iOS)

   var circle: UIImage? { 
       let square = CGSize(width: min(size.width, size.height), height: min(size.width, size.height)) 
       let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square)) 
       imageView.contentMode = .ScaleAspectFill 
       imageView.image = self 
       imageView.layer.cornerRadius = square.width/2 
       imageView.layer.masksToBounds = true 
       UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale) 
       guard let context = UIGraphicsGetCurrentContext() else { return nil } 
       imageView.layer.renderInContext(context) 
       let result = UIGraphicsGetImageFromCurrentImageContext() 
       UIGraphicsEndImageContext() 
       return result 
   } 
   
   func resizedImageWithinRect(rectSize: CGSize) -> UIImage { 
       let widthFactor = size.width/rectSize.width 
       let heightFactor = size.height/rectSize.height 
   
       var resizeFactor = widthFactor 
       if size.height > size.width { 
       resizeFactor = heightFactor 
       } 
   
       let newSize = CGSizeMake(size.width/resizeFactor, size.height/resizeFactor) 
       let resized = resizedImage(newSize) 
       return resized 
   } 
   

2. 最终的代码如下所示：

   //create/shape image 
   let image = UIImage(named: "TestImage") 
   let scaledImage = image?.resizedImageWithinRect(CGSize(width: 100, height: 100)) 
   let circleImage = scaledImage?.circle 
   
   //create sprite 
   let sprite = SKSpriteNode(texture: SKTexture(image: circleImage!)) 
   sprite.position = CGPoint(x: view.frame.width/2, y: view.frame.height/2) 
   
   //set texture/image 
   sprite.texture = SKTexture(image: circleImage!) 
   sprite.physicsBody = SKPhysicsBody(texture: SKTexture(image: circleImage!), size: CGSizeMake(100, 100)) 
   if let physics = sprite.physicsBody { 
       //add the physic properties 
   } 
   
   //scale node 
   sprite.setScale(1.0) 
   addChild(sprite) 
   

所以，如果你有一个完美的缩放资产/图像，那么你可能不需要做所有这些工作，但我从后端获取可能以任何尺寸显示的图像。

Answer 2

有两种不同的技术可以结合使用，以减少裁剪产生的边缘的混叠。

1. 创建比您需要更大的图像，然后缩小它们。目标（被裁剪）和面具。执行裁剪操作，然后缩小到所需的大小。

2. 使用非常微妙的裁剪形状模糊，以软化其边缘。这是最好的完成在Photoshop或类似的编辑程序，品尝和需要。

当这两种技术相结合，结果可以非常好。