Introduction to Media and Art Assets

出自OpenFace

Prev　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Next　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　第七章　媒体和资源介绍

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　第二部分　教程介绍

　　

　　这里只对如何在OpenFace应用中使用媒体，如图像,做一个总的介绍。这些将在17章 媒体资源 中作更深入的介绍。

　　有一种方式可以在应用中引入图片：

　　作为媒体资源附在视图中；

　　在本章我们将探讨在视图中使用资源，这种机制更为常用。

　　能带进艺术要素集中的不只是图片，还可以是你自己创建的视图系统。

目录 1 资源 2 包含资源的方法 2.1 编译时载入资源 2.2 运行时载入资源 3 文件类型 4 多帧资源

资源

　　OpenFace应用程序中，<view>是基本的可视化实体和资源，它能在外形上产生媒体，使之整合进应用程序。资源可以通过附在视图中而使用。所以在OpenFace应用程序中，您不用往视图中插入图像，而是插入一个资源是图像的视图。

来看一个包含艺术要素集合（资源）的最简单的例子。在本例中，是一个GIF图像：

Example 7.1. Using 'resource'

<canvas width="500" height="80">
   <view resource="smiley.gif"/>
</canvas>

这个小OpenFace应用程序载入了一个叫”smiley.gif”的图像（它位于resources中—包含应用程序的文件目录的一个子目录）。

还可以设置包含图像的视图的位置：

Example 7.2. positioning images'

 <canvas width="500" height="100">
    <view resource="smiley.gif"/>
    <view x="50" y="50" resource="smiley.gif"/>
 </canvas>

我们可以在之后改变图片的大小。

包含资源的方法

　　在上面的例子中，当应用程序在服务器上编译时，我们从当前本地目录中包含了一幅图像进来。然而在某些特殊的应用程序中，这样可能就不正确了，所以LZX提供了四种方法来载入图像：

编译时载入资源

　　当应用程序在服务器上进行编译时，资源将同其余的应用被打成包，所以最初会有较大数据的下载，但图像会立即显示。

　　四种方法最终在屏幕上的显示结果是一致的：

Example 7.3.　本地路径

<canvas width="500" height="100">
 <view resource="smiley.gif"/>
</canvas>

Example 7.4.使用资源的统一标识符

<canvas width="500" height="100">
 <resource name="smileyFaceImg" src="smiley.gif"/>
 <view resource="smileyFaceImg"/>
</canvas>

运行时载入资源

　　直到视图初始化后资源才被载入，这样应用程序将载入余下的部分，可能造成一定的显示延迟。因为图像没有打成包，初始的下载量就较小。服务器编译请求的图像（如果它处在不同的服务器上），然后将它发送给已经在客户端上运行的应用程序。

Example 7.5.绝对引用

<canvas>
 <view resource=""/>
</canvas>

Example 7.6.本地引用

<canvas>
 <view resource=""/>
</canvas>

　　包含资源的最好办法通常是使用统一的标示符(使用<resource>标签)。这样，所以的资源都在一个地方被包含进来，而且，如果你需要改变一个资源的路径或资源本身，你只需要改变它一次（使用其他方式的理由将在以后章节中叙述）。

文件类型

Example 7.7. 资源伸缩

<canvas width="500" height="200">
 <resource name="sourFace" src="cg.gif"/>
 <resource name="smileyFace" src="app.gif"/>  
 <view resource="smileyFace" x="10" y="10"/>
 <view resource="sourFace" x="110" y="10"/>
 <view x="10" y="50" width="363" height="242" stretches="both" resource="bg.jpg"/>
</canvas>

OpenFace支持GIF，JPEG和PNG格式。可以通过设置视图的stretches属性（可以是both，width，或者height）来调整图片的大小。

多帧资源

　　资源也可以是多帧的，也就是说一个资源实际上是由多个不同的资源构成，而且每次只显示一个资源。

　　该中写法的格式是这样的：

Example 7.8.多帧资源

<canvas width="500" height="100">
 <resource name="face">
   <frame src="cg.gif"/>
   <frame src="error.gif"/>
 </resource>  
 <view x="150" y="50" resource="face">
    <handler name="onkeydown" reference="LzKeys" >
        this.setResourceNumber(2);
    </handler>
</view>
</canvas>

　　资源嵌套在<resource>标签中，从1开始标记。

　　正如您所看到的，OpenFace支持GIF，JPEG和PNG格式。可以通过视图的stretches属性调整图片的大小，包含资源的双向拉伸，宽或高的调整。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Home　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Prev　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Next