在 TVML (tvOS) 中创建分层图像答案

【问题标题】：Create Layered Image in TVML (tvOS)在 TVML (tvOS) 中创建分层图像
【发布时间】：2015-10-08 06:24:57
【问题描述】：

我想使用 TVML 标记创建分层图像以在 tvOS 9.0 上使用。

这似乎应该是一个相对常见的问题，但似乎没有任何方法可以做到这一点（从 tvOS Beta 3 开始）。在 Apple TVML 演示应用中，它通过使用pre-compiled into a single .lsr file 的多层图像来实现这一点，而不是在标记中单独注明每一层。

可以使用layerutil CLI 程序编写 .lsr 文件的创建脚本，但这对于我正在尝试构建的应用程序将是一个巨大的麻烦，其中图像将是用户生成的内容。

相反，能够做这样的事情会很棒（注意src-layer1 属性，用于在基础src 之上添加额外的层）：

<lockup>
  <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" src-layer1="https://server.com/path/to/overlay.png" height="180" width="320"/>
  <title>Rick Astley - Never Gonna Give You Up</title>
</lockup>

除了在服务器上来回编写大量脚本以生成 .lsr 文件之外，还有其他有效的方法吗？

更新 - 2015 年 10 月 21 日： 在 bottom of this documentation page，Apple 提供了一个非常适合此用途的复选标记叠加图像，称为 resource://button-play。但是似乎仍然没有办法在 TVML 中使用这个图标覆盖。 :-/

【问题讨论】：

明确地说，我认为没有办法做到这一点（至少从 tvOS 9.0 Beta 3 开始），但我想知道将来是否会改变。请不要回答“无法完成”。等
同意 - 这似乎最终会在代码中得到支持

标签： tvos tvml

【解决方案1】：

您可以使用overlay 在锁定中分层图像。

https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/CoumpoundDisplayElements.html#//apple_ref/doc/uid/TP40015064-CH18-SW3

<lockup>
  <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" height="180" width="320"/>
  <title>Rick Astley - Never Gonna Give You Up</title>
  <overlay style="padding:0;">
    <badge src="resource://overlay-checkmark" />
  </overlay>
</lockup>

【讨论】：

谢谢 CEM！我阅读了链接的文档，似乎没有任何方法可以控制位置，所以我的叠加复选标记最终指向图像的中间。是否有我遗漏的位置信息？
我还尝试创建自己的过度徽章图像，其大小与锁定背景 img 完全相同，然后将 src 设置为指向我的网络服务器上的完整覆盖，但它不会显示任何图像.尝试了一些变化，但没有运气。也许这里不允许？
这是一张图片，说明它在上面的 overlay 和 badge 示例之后是如何放置的：i.stack.imgur.com/Vemd7.png
让我们尝试将padding:0; 赋予style 属性为overlay
所以添加 padding:0 确实移动了复选标记，但它仍然没有到达角落：i.stack.imgur.com/nzRlx.png Weird。不过感谢您的所有帮助！

【解决方案2】：

如果您在定位复选标记叠加层时仍然遇到问题，请尝试用透明度填充它，使其与视频缩略图的纵横比相同。

【讨论】：

感谢您的建议。这样做是完全合理的，所以我实际上是 tried that a while ago，但 TVML 不会为覆盖加载 HTTPS 提供的图像。