使用 Shadow Effect 2D 效果

使用 Shadow Effect 2D 效果为 2D 节点的内容应用阴影。

../../_images/shadow-effect-2d-large.png

为二维节点创建阴影效果

要为 2D 节点创建阴影效果:

  1. 在 Library 按 Alt 并右键单击 Effects 中选择 Shadow Effect 2D。

    ../../_images/create-shadow-effect-2d.png
  2. 在 Node Tree 或 Prefabs 中创建一个要应用阴影效果的 2D 节点。

    ../../_images/image-in-node-tree.png ../../_images/image-in-preview1.png
  3. 从 Library > Effects > 2D Effects 拖动 Shadow Effect 2D 效果到 Node Tree 或 Prefabs,并将其放在要应用阴影效果的 2D 节点上。

    通过这种方式,您可以在该 2D 节点中将 Effect Prefab 属性设置为 Shadow Effect 2D 效果。

    Kanzi 适用于 2D 节点中内容的视觉形状,该节点的部分透明黑色阴影相对于正 x 轴以 45 度角定向。

    ../../_images/drag-effect-to-node.png ../../_images/effect-prefab-property-set.png ../../_images/image-in-preview-w-shadow.png
  4. 要调整阴影的外观,在 Library 中选择 Shadow Effect 2D 效果,并在 Properties 中添加和设置 Shadow Effect 2D 属性。

    ../../_images/shadow-effect-2d-properties.png ../../_images/shadow-effect-in-preview.png

    Shadow Blend Mode 设置 Kanzi 用于渲染阴影的混合模式。

    默认情况下是 Alpha: Premultiplied。

    例如,使用 Multiply (advanced khr) 混合模式来创建更真实的阴影。

    请参阅 混合和合成2D节点。



    Shadow Blur Radius 通过定义阴影模糊从阴影的每个边缘向外扩展的像素距离来设置阴影的柔和度。值越高,阴影越模糊。默认半径为 8 像素。

    ../../_images/shadow-blur-radius.gif

    Shadow Type 设置阴影的类型:

    • Drop Shadow 出现在对象的后面或下面。这是默认设置。

    • Inner Shadow 出现在一个对象内。

    ../../_images/shadow-type.gif

    Shadow Distance 设置阴影从物体落下的距离。默认距离为10像素。

    ../../_images/shadow-distance.gif

    Shadow Angle 将阴影的方向设置为相对于正 x 轴顺时针方向的角度。默认角度为 45 度。

    ../../_images/shadow-angle.gif

    Override Shadow Offset 设置阴影相对于对象在 x 和 y 轴上的偏移量。默认情况下,沿两个轴的偏移量为 7 像素。

    当您设置此属性时,Shadow Distance 和 Shadow Angle 属性无效。

    ../../_images/shadow-offset.gif

    Shadow Color 设置阴影的颜色。

    ../../_images/shadow-color.gif

    Shadow Only 设置是否仅渲染阴影而不渲染节点的视觉内容。

    ../../_images/shadow-only.gif

    Shadow Quality 设置阴影的视觉质量。较低的质量使用较少的计算和内存资源。

    ../../_images/shadow-quality.gif

自定义阴影效果的实例

当您在 Library > Effects 中编辑效果的属性时,您会更改使用该效果的所有节点的外观。您可以通过覆盖效果属性值来自定义每个效果实例。例如:

  • 当您创建 Shadow Effect 2D 效果时,您可以在该效果的不同实例中改变阴影的柔和度。

  • 当您创建 Mask Effect 2D 效果时,您可以在该效果的不同实例中改变遮罩的大小。

  • 当您创建 Blur Effect 2D 效果时,您可以在该效果的不同实例中改变模糊的程度。

  • 当您创建 Outline Effect 2D 效果时,可以在该效果的不同实例中改变轮廓的颜色。

要自定义效果的实例:

  1. 创建一个效果并设置一个节点来使用它。

    例如,创建一个 Shadow Effect 2D 效果,并设置一个 Image 节点来使用它。请参阅 为二维节点创建阴影效果。

    ../../_images/effect-prefab-property-set.png ../../_images/image-in-preview-w-shadow.png
  2. 在效果中自定义属性:

    1. 在 Library 中,选择您创建的效果。在 Properties 中,在您要自定义的属性旁边,单击 image-publish-property。

      Kanzi Studio 从该属性创建一个自定义属性,将其添加到效果预设的根,并在2D效果中创建一个到该属性的 ##Template 绑定。

      例如,单击 image-publish-property,旁边是 Shadow Blur Radius 属性。Kanzi Studio 创建一个自定义 Shadow Blur Radius 属性,将其添加到根效果预设,并在 Shadow Effect 2D 效果预设中创建一个 ##Template 绑定到自定义 Shadow Blur Radius 属性。

      ../../_images/properties-publish-shadow-blur-radius.png ../../_images/properties-shadow-blur-radius-template-binding.png
    2. 在 Node Tree 或 Prefabs 中,选择使用您创建的效果的 2D 节点。在 Properties 中,点击您自定义的属性旁边的 image-add-property,并设置该属性的值。

      Kanzi Studio 向 2D 节点添加了一个 To Source 绑定,该绑定将该属性的值推送到通过节点的 Node2D.Effect 属性提供的效果实例。

      您可以设置多个 2D 节点以使用相同的效果,并且在每个 2D 节点中,您可以添加和设置属性以具有不同的值。

      例如:在 Properties 中,添加 Shadow Effect 2D Properties > ShadowEffect2D.BlurRadius 属性,并使用它仅在 Image 节点中调整阴影的柔和度。

      ../../_images/properties-shadow-effect-2d-blur-radius.png ../../_images/preview-shadow-effect-2d-blur-radius.png
  3. (可选) 对您要自定义的每个效果属性重复上一步。

    小技巧

    当您想从节点中移除属性及其 To Source 绑定时,右键单击该属性并选择 Remove Property And Binding。

使用 Shadow Effect 2D 效果在 API 中。

要创建阴影效果:

// Create an effect template.
NodeEffectTemplate2DSharedPtr shadowEffectTemplate =
    NodeEffectTemplate2D::create(ShadowEffect2D::getStaticMetaclass()->getName(), "DropShadow");

// Set the value of the AngleProperty in the template. This value serves as the default value
// of the property in instances of the effect prefab.
shadowEffectTemplate->addPropertyValue(ShadowEffect2D::AngleProperty, Variant(35.f));

// Create an effect prefab.
NodeEffectPrefab2DSharedPtr shadowEffectPrefab =
    NodeEffectPrefab2D::create(getDomain(), "DropShadow prefab", shadowEffectTemplate);

// Assign the effect to a 2D node.
node2d->setEffectPrefab(shadowEffectPrefab);

// Get the node-specific effect instance created from the assigned prefab.
ShadowEffect2DSharedPtr shadowEffect = dynamic_pointer_cast<ShadowEffect2D>(node2d->getEffect());

// Set the shadow distance to 15 pixels for this node only. This overrides
// the property default value defined by the ShadowEffect2D metaclass.
shadowEffect->setDistance(15.f);

// Set the direction of the shadow to 55 degrees relative to the positive x axis.
// This overrides the default value of 35 degrees set in the shadow effect template.
shadowEffect->setAngle(55.f);

有关详细信息,请参阅 ShadowEffect2D 类。

另请参阅

2D 节点的效果

使用 Blur Effect 2D 效果

使用 Mask Effect 2D 效果

使用 Outline Effect 2D 效果

使用多个效果

调整 2D 节点的外观

使用刷子

渲染 (Rendering)