使用 OpenLaszlo 创建 Web 富客户端（3）

look_w

能产生令人印象深刻的效果的约束和定制属性        看了前面的内容，您似乎会觉得动画过程看上去非常简单，作用有限。于是您可能想知道如何执行要求更复杂的计算的动画。通常，答案是利用定制属性和约束。例如，假设想要有一个在屏幕中沿着圆形轨迹运动的项。显然，您不能直接通过控制 x 和 y 属性来产生动画效果。但是可以约束x 和 y 的位置，使之成为某个定制属性的一个函数，这个定制属性沿着一个矩形来变化。如  所示，如果使用约束的话，产生一个沿着圆形轨迹移动的视图非常容易。
清单 5. 结合使用约束和动画

1 2 3 4 5 6 7 8 9 10

<canvas>    <view bgcolor="#ff0000" width="20" height="$once{width}"       x="${radius + (radius * Math.cos(animCnt))}"       y="${radius + (radius * Math.sin(animCnt))}">       <attribute name="animCnt"/>       <attribute name="radius" value="30"/>       <animator attribute="animCnt" from="0" to="$once{Math.PI * -2}"             duration="1000" motion="linear" repeat="Infinity"/>    </view> </canvas>

        通过使用这些技术，可以创建令人印象深刻的动画。您永远不必担心帧速率和其他计算，因为所有这些细节都已经为您抽象好了。此外，由于约束可能涉及多个组件，一个组件的动画可能改变其他组件的状态。
定制绘画        OpenLaszlo 的一个巨大的优势就是可以很容易地绘制定制的图形。这些图形可以是静态的，也可以是动态的，这样您便可以对用户交互作出响应，甚至可以创建图形应用程序。您可以在 <drawview> 组件上执行定制绘画，用该组件充当画布。即使绘画是说明性 的，但是它仍然具有过程的性质。一旦掌握了绘画，很容易知道如何将它应用到动态或静态场景中。
<drawview> 元素实际上只有 4 个定制属性。这些属性是全局的，可以控制被画到画布上的片段的默认属性，包括：fillStyle、 globalAlpha、lineWidth 和 strokeStyle。您可以通过 10 个专用于 <drawview> 的定制过程来修改所有这些属性。
绘画过程        绘画接口定义了 10 个过程。这些过程可以移动画笔（pen），最终创建路径（path），而路径可以被描边，可以用渐变方式和颜色进行填充（如果是封闭的）。
        画笔的初始位置为点 0,0。通过使用 moveTo(x, y) 方法，可以将画笔移动到一个新的位置。一条路径实际上就是一系列的点，路径可以被描边，也可以被填充。还可以使用 lineTo(x, y) 方法添加一个子路径到当前路径，并将画笔定位在一个指定的位置。还有一个类似的 quadraticCurveTo(cpx, cpy, x, y) 方法，该方法以一个坐标和一个曲线控制点坐标为参数，但是其行为类似于 lineTo()。
        建立好一条路径后，为了使之可见，必须对它进行描边或填充。通过调用 stroke() 方法，可以使用 strokeStyle （十六进制格式的颜色，例如 0x000000）和 lineWidth 的当前属性值来决定如何对该路径描边。fill() 方法使所有子路径封闭起来，然后逐个填充每个子路径，期间使用 fillStyle （一种颜色，或一个渐变对象）来决定如何绘制填充。 演示了一个简单的例子，这个例子用各种方式描边和填充一些正方形。
清单 6. 简单的绘画例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<canvas width="115" height="95">    <drawview width="200" height="200" x="5" y="5">       <method event="oninit">          // Draw a black square          this.strokeStyle = 0x000000;          this.moveTo(0, 0);          this.lineTo(25, 0);          this.lineTo(25, 25);          this.lineTo(0, 25);          this.closePath();          this.stroke();          // Reset the path and draw a square with red fill          // and a black outline          this.beginPath();          this.fillStyle = 0xff0000;          this.moveTo(40, 0);          this.lineTo(65, 0);          this.lineTo(65, 25);          this.lineTo(40, 25);          this.closePath();          this.fill();          // Draw a square with a square filled with a gradient          // from white to gray          this.beginPath();          // Create the gradient, adding color 'stops' (where          // the color shifts)          var gradient = this.createLinearGradient(80, 0, 105, 25);          gradient.addColorStop(0, 0xffffff);          gradient.addColorStop(1, 0x000000);          this.fillStyle = gradient;          this.moveTo(80, 0);          this.lineTo(105, 0);          this.lineTo(105, 25);          this.lineTo(80, 25);          this.closePath();          this.fill();          this.stroke();    </method>    </drawview> </canvas>

给出了  在浏览器窗口中的输出：
图 3. 清单 6 的输出         这个示例使用了 oninit() 方法，对于所有对象都可以使用该方法。它引入了用于路径管理的 beginPath() 和 closePath() 这两个方法。它还引入了渐变，渐变在 Laszlo 中有两种形式： linear 和 radial。每个渐变都被映射到一个矩形或圆形的坐标空间。为了设置颜色，可以使用 addColorStop() 方法，使颜色范围定在 0 到 1 之间。颜色 0 将成为渐变的起始颜色，而颜色 1 将成为渐变中最大的颜色值。在设置起止颜色之前，还可以通过修改 globalAlpha 属性来产生部分不透明的渐变颜色。
组合绘画和动画        前面介绍了 OpenLaszlo 提供的所有基本的绘画功能。您可能想知道如何使用 “” 小节中提到的动画功能和过程式的绘画 API。一种方法是添加定制属性到一个 <drawview>。例如，如果您想有一个动态绘制的圆形，并且半径的大小是以动画效果变化的，那么可以创建一个属性 radius，然后为这个属性产生动画效果（按照常用的方法），接着为半径的变化事件定义一个事件处理器（<method event="onradius">），在这个事件处理器中重画该元素。通过这种策略，几乎所有事情都可以实现。