Sprite工具包中的裁剪/遮罩圆形图像节点会产生锯齿状边缘
是否可以在没有锯齿边缘的情况下将圆形遮罩/裁剪提供给图像节点?Sprite工具包中的裁剪/遮罩圆形图像节点会产生锯齿状边缘
继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)
更新:
好吧,所以这里有一个解决方案,我想出了。不是超理想,但它完美的作品。从本质上讲,我有一个尺寸/比例尺,并按照它在SKSpriteNode上的方式完全切割图像,因此我不必使用SKCropNode或SKShapeNode的一些变体。
-
我使用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 }
-
最终的代码如下所示:
//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)
所以,如果你有一个完美的缩放资产/图像,那么你可能不需要做所有这些工作,但我从后端获取可能以任何尺寸显示的图像。
您正在向UIGraphicsBeginImageContextWithOptions传递“scale”,但它从未事先设置。 – CodyMace
有两种不同的技术可以结合使用,以减少裁剪产生的边缘的混叠。
创建比您需要更大的图像,然后缩小它们。目标(被裁剪)和面具。执行裁剪操作,然后缩小到所需的大小。
使用非常微妙的裁剪形状模糊,以软化其边缘。这是最好的完成在Photoshop或类似的编辑程序,品尝和需要。
当这两种技术相结合,结果可以非常好。
啊,哟!我最终选择了#1,因为我们必须从服务器获取图片,我们并不知道它的大小。 –
很酷。我只记得,在完成了尺寸调整后,你可以在Core Image上应用非常柔和的模糊效果,在面具图像上以极低的数字尝试此操作:https://developer.apple.com/library/content/documentation/GraphicsImaging/Reference/CoreImageFilterReference /#// apple_ref/doc/filter/ci/CIGaussianBlur – Confused
不错!这会给它更亲的样子。 ;) –
你可以添加锯齿的截图吗? – Confused
点击我上面提供的链接。 :) https://developer.apple.com/reference/spritekit/skcropnode –
整体解决方案:https://*.com/a/46894665/294884 – Fattie