电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 OpenLaszlo 创建 Web 富客户端（3） [打印本页]

作者: look_w 时间: 2018-7-16 12:34 标题: 使用 OpenLaszlo 创建 Web 富客户端（3）

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

1
2
3
4
5
6
7
8
9
10

通过使用这些技术，可以创建令人印象深刻的动画。您永远不必担心帧速率和其他计算，因为所有这些细节都已经为您抽象好了。此外，由于约束可能涉及多个组件，一个组件的动画可能改变其他组件的状态。
定制绘画 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">），在这个事件处理器中重画该元素。通过这种策略，几乎所有事情都可以实现。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)