精灵套件中的裁剪/蒙版圆形图像节点会产生锯齿状边缘 [英] Crop/Mask circular image node in sprite kit gives jagged edges

问题描述

是否可以为没有锯齿边缘的图像节点提供圆形遮罩/裁剪?

Is it possible give a circular mask/crop to an image node without jagged edges?

按照 Apple 的这个示例 (https://developer.apple.com/reference/spritekit/skcropnode)，结果并不理想.可以点击链接查看.

Following this example from Apple (https://developer.apple.com/reference/spritekit/skcropnode), the result is not ideal. You can click on the link to see.

    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)

推荐答案

更新:

好的，这是我想出的一个解决方案.不是超级理想，但效果很好.从本质上讲，我有一个大小/比例，并完全按照 SKSpriteNode 上的方式剪切图像，因此我不必使用 SKCropNode 或 SKShapeNode 的某些变体.

Ok, so here's one solution I came up. Not super ideal but it works perfectly. Essentially, I have a to size/scale, and cut the image exactly the way it would go on the SKSpriteNode so I would not have to use SKCropNode or some variation of SKShapeNode.

1. 我使用 Leo Dabus 的这些 UIImage 扩展来完全根据需要调整图像的大小/形状.将 UIImage 剪成圆形 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
}

最终的代码如下所示:

The final codes look like this:

//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)

因此，如果您有一个完美缩放的资产/图像，那么您可能不需要完成所有这些工作，但我从后端获取的图像可以是任何尺寸.

So if you have a perfectly scaled asset/image, then you probably dont need to do all this work, but I'm getting images from the backend that could come in any sizes.

这篇关于精灵套件中的裁剪/蒙版圆形图像节点会产生锯齿状边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！