【译】Fuse入门（四）

*** 上接入门（三），本节还是属于UI组件一章，讲的是视频和图形标记。***
官网链接：https://www.fusetools.com/learn/fuse#video

视频 Video

显示一个视频：

<Video File="fuse_video.mp4" />

Video 标记通过File属性指定一个视频文件，通过Url属性指定视频流，用起来和Image标记差不多，当然也有StretchMode、StretchDirection和ContentAlignment这些属性，都是一样的用法。

视频属性

除了和Image同样的属性外，Video标记还有自己的一套配置和控制属性，如下所示：

Volume - 范围从0.0到1.0，缺省为1.0
Duration - 以秒为单位的视频时长
Position - 视频播放到的位置，精确到秒。
Islooping - 布尔值，指定该视频是否循环播放，缺省为false。

视频相关的触发器（Triggers）

<Video>
    <WhilePlaying />    <!-- Active while the video is playing -->
    <WhilePaused />     <!-- Active while the video is paused -->
    <WhileCompleted />  <!-- Active while the video is done playing -->
    <WhileLoading />    <!-- Active while the video is loading -->
    <WhileFailed />     <!-- Active if the video failed to load or an error occured -->
</Video>

控制视频的相关动作（Actions）

Fuse有现成的一套控制视频的“Actions”，它们都有共同的Target属性指向所要控制的视频元素。

<Pause />      <!-- Pauses playback, leaving the current position as-is -->
<Stop />       <!-- Stops playback and returns to the beginning of the video -->
<Resume />     <!-- Resumes playback from the current position -->

支持格式

视频的播放需要视频解码器，是由App输出到的目标平台所提供的。需要注意的是，windows、OS X、安卓和iOS不一定支持同种格式。

视频示例

<App Theme="Basic">
    <DockPanel>
        <Video ux:Name="video" Dock="Fill" File="fuse_video.mp4" IsLooping="true" StretchMode="UniformToFill">
            <ProgressAnimation>
                <Change progressBar.Width="100" />
            </ProgressAnimation>
        </Video>
        <Rectangle ux:Name="progressBar" Dock="Bottom" Fill="#f00" Width="0%" Height="10" />
        <Grid Dock="Bottom" ColumnCount="2" RowCount="1">
            <Button Text="Play">
                <Clicked>
                    <Resume Target="video" />
                </Clicked>
            </Button>
            <Button>
                <Clicked>
                    <Pause Target="video" />
                </Clicked>
            </Button>
        </Grid>
    </DockPanel>
</App>

图形 Shapes

Fuse可以渲染矩形和圆形，这些图形可有多重填充和描边，而且可以层叠在一起。

矩形 Rectangle

这样画个矩形：

<Rectangle Fill="#f00" />

上面的例子里, Rectangle会最大化地占用父元素可用的空间，画上纯红色的矩形。

如果你想限制矩形的宽高，可以用Width和Height属性。

<Rectangle Fill="#f00" Width="50" Height="50" CornerRadius="5" />

上例就是显示一个50 X 50 点的圆角红色矩形，注意是“点”，不是“像素”，这样可以在大多数设备上显示成一样的大小，而不用理会各设备不同的像素密度和屏幕大小。

圆形 Circle

画个圆很简单：

<Circle Fill="#f00" Width="50" Height="50">
    <Stroke Width="5" Brush="#ff0" />
</Circle>

上面的例子，我们不但画了一个圆，还给它加了黄色的描边。

起始角/终止角 StartAngle/EndAngle

StartAngle和EndAngle是用来画一个圆的扇形的，它们有6种用不同方式来控制扇形的属性。

StartAngle - 扇形顺时针开始边与X轴的弧度
EndAngle - 扇形顺时针结束边与X轴的弧度
StartAngleDegrees - 起始角度数
EndAngleDegrees - 终止角度数
LengthAngle - 从起始角开始的位移弧度，有些情况可以用开代替EndAngle。
LengthAngleDegrees - 位移角度数，代替EndAngleDegrees。

在同一个圆形同时使用StartAngle和StartAngleDegrees(同时用了弧度和角度)，会发生"undefined"的情况。

填充 Fills

和上面一样，先来个简单使用填充Fill属性的例子：

<Rectangle Fill="#f00" />

然后看看其他种类型的填充，如：

<StackPanel>
    <Circle Width="150" Height="150">
        <ImageFill File="Pictures/Picture1.jpg" />
    </Circle>
    <Rectangle Height="150">
        <LinearGradient StartPoint="0,0" EndPoint="1,0.75">
            <GradientStop Offset="0" Color="#FC3C47" />
            <GradientStop Offset="1" Color="#B73070" />
        </LinearGradient>
    </Rectangle>
</StackPanel>

上例中，我们先用图片当笔刷填充了一个圆形，在社交类App里是常见好效果的用户头像图标的形式，然后又画了一个漂亮矩形，填充是谈谈的渐变色。

描边 Strokes

和上面的填充一样，描边也可以用笔刷, 如下所示：

<StackPanel>
    <Circle Width="150" Height="150">
        <Stroke Width="10">
            <ImageFill File="Pictures/Picture1.jpg" />
        </Stroke>
    </Circle>
    <Rectangle Height="150">
        <Stroke Width="15">
            <LinearGradient StartPoint="0,0" EndPoint="1,0.75">
                <GradientStop Offset="0" Color="#FC3C47" />
                <GradientStop Offset="1" Color="#B73070" />
            </LinearGradient>
        </Stroke>
    </Rectangle>
</StackPanel>

当然用Brush属性指定一个纯色的描边也没问题：

<Rectangle Fill="#f00" Width="50" Height="50">
    <Stroke Width="5" Brush="#ff0" />
</Rectangle>

描边的位置 StrokeAlignment

描边也有Alignment属性，就是描边相对图形的位置。

<Stroke StrokeAlignment="Center" />

StrokeAlignment的有效值为Center、Inside和Outside。（居中、内置、外置）

Stroke.Offset 描边的位移

一个图形的描边可以设定位移值：

<Stroke Width="10" Offset="10">
    <ImageFill File="Pictures/Picture1.jpg" />
</Stroke>

“正位移”是使描边在图形外位移，“负位移”则是使描边在图形内位移。