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的某些变体。

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

<TabControl x:Name="MainWindowTabControl" HorizontalAlignment="Left" 
Margin="0,10,0,0" VerticalAlignment="Top" Height="181" Width="247">
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5" Margin="0,-21,0,0" x:Name="gridChk">
                <CheckBox x:Name="testBox" Content="Check Box" 
        HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,0,0"/>
            </Grid>
        </TabItem>
    </TabControl>

最终代码如下：

    List<CheckBox> boxesList = new List<CheckBox>();
    //The named Grid, and not TabControl
    var children = LogicalTreeHelper.GetChildren(gridChk); 

    //Loop through each child
    foreach (var item in children)
    {
        var chkCast = item as CheckBox;
        //Check if the CheckBox object is checked
        if (chkCast.IsChecked == true)
        {
            boxesList.Add(chkCast);
        }
    }

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

Answer 2

可以组合两种不同的技术来减少裁剪所产生的边缘的混叠。

创建比您需要的更大的图像，然后缩小它们。目标（待裁剪）和面具。执行裁剪操作，然后缩小到所需的大小。
使用非常细微的裁剪形状模糊，以柔化其边缘。这最好在Photoshop或类似的编辑程序中完成，以品味和需要。

当这两种技术结合使用时，结果可能非常好。

Answer 3

让笔划颜色显示。另外，您可以将line width稍厚一些，并且锯齿状的边缘会消失。

 circleMaskNode.strokeColor = SKColor.whiteColor()

Answer 4

您所要做的就是将 SKShapeNode 的 lineWidth 属性更改为圆半径的两倍：

func circularCropNode(radius: CGFloat, add: SKNode) {
    let cropper = SKCropNode.init()
    cropper.addChild(add)
    addChild(cropper)
        
    let circleMask = SKShapeNode.init(circleOfRadius: radius/2)
    circleMask.lineWidth = radius
    cropper.maskNode = circleMask
}

精灵套件中的裁剪/遮罩圆形图像节点给出了锯齿状边缘

4 个答案: