HTML5画布移植（Porting from HTML5 Canvas）

移植一个HTML5画布图像到QML画布非常简单。在成百上千的例子中，我们选择了一个来移植。

螺旋图形（Spiro Graph）

我们使用一个来自Mozila项目的螺旋图形例子来作为我们的基础示例。原始的HTML5代码被作为画布教程发布。

下面是我们需要修改的代码：

  • Qt Quick要求定义变量使用，所以我们需要添加var的定义：

    1. for (var i=0;i<3;i++) {
    2.   ...
    3. }

  • 修改绘制方法接收Context2D对象：

    1. function draw(ctx) {
    2.   ...
    3. }

  • 由于不同的大小，我们需要对每个螺旋适配转换：

    1. ctx.translate(20+j*50,20+i*50);

最后我们实现onPaint操作。在onPaint中我们请求一个context，并且调用我们的绘制方法。

  1.     onPaint: {
  2.         var ctx = getContext("2d");
  3.         draw(ctx);
  4.     }

下面这个结果就是我们使用QML画布移植的螺旋图形。

HTML5画布移植（Porting from HTML5 Canvas） - 图1

发光线（Glowing Lines）

下面有一个更加复杂的移植来自W3C组织。原始的发光线有些很不错的地方，这使得移植更加具有挑战性。

HTML5画布移植（Porting from HTML5 Canvas） - 图2

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <title>Pretty Glowing Lines</title>
  5. </head>
  6. <body>
  8. <canvas width="800" height="450"></canvas>
  9. <script>
  10. var context = document.getElementsByTagName('canvas')[0].getContext('2d');
  12. // initial start position
  13. var lastX = context.canvas.width * Math.random();
  14. var lastY = context.canvas.height * Math.random();
  15. var hue = 0;
  17. // closure function to draw
  18. // a random bezier curve with random color with a glow effect
  19. function line() {
  21.     context.save();
  23.     // scale with factor 0.9 around the center of canvas
  24.     context.translate(context.canvas.width/2, context.canvas.height/2);
  25.     context.scale(0.9, 0.9);
  26.     context.translate(-context.canvas.width/2, -context.canvas.height/2);
  28.     context.beginPath();
  29.     context.lineWidth = 5 + Math.random() * 10;
  31.     // our start position
  32.     context.moveTo(lastX, lastY);
  34.     // our new end position
  35.     lastX = context.canvas.width * Math.random();
  36.     lastY = context.canvas.height * Math.random();
  38.     // random bezier curve, which ends on lastX, lastY
  39.     context.bezierCurveTo(context.canvas.width * Math.random(),
  40.     context.canvas.height * Math.random(),
  41.     context.canvas.width * Math.random(),
  42.     context.canvas.height * Math.random(),
  43.     lastX, lastY);
  45.     // glow effect
  46.     hue = hue + 10 * Math.random();
  47.     context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
  48.     context.shadowColor = 'white';
  49.     context.shadowBlur = 10;
  50.     // stroke the curve
  51.     context.stroke();
  52.     context.restore();
  53. }
  55. // call line function every 50msecs
  56. setInterval(line, 50);
  58. function blank() {
  59.     // makes the background 10% darker on each call
  60.     context.fillStyle = 'rgba(0,0,0,0.1)';
  61.     context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  62. }
  64. // call blank function every 50msecs
  65. setInterval(blank, 40);
  67. </script>
  68. </body>
  69. </html>

在HTML5中，context2D对象可以随意在画布上绘制。在QML中，只能在onPaint操作中绘制。在HTML5中，通常调用setInterval使用计时器触发线段的绘制或者清屏。由于QML中不同的操作方法，仅仅只是调用这些函数不能实现我们想要的结果，因为我们需要通过onPaint操作来实现。我们也需要修改颜色的格式。让我们看看需要改变哪些东西。

修改从画布元素开始。为了简单，我们使用画布元素（Canvas）作为我们QML文件的根元素。

  1. import QtQuick 2.0
  3. Canvas {
  4.    id: canvas
  5.    width: 800; height: 450
  7.    ...
  8. }

代替直接调用的setInterval函数，我们使用两个计时器来请求重新绘制。一个计时器触发间隔较短，允许我们可以执行一些代码。我们无法告诉绘制函数哪个操作是我想触发的，我们为每个操作定义一个布尔标识，当重新绘制请求时，我们请求一个操作并且触发它。

下面是线段绘制的代码，清屏操作类似。

  1. ...
  2. property bool requestLine: false
  4. Timer {
  5.     id: lineTimer
  6.     interval: 40
  7.     repeat: true
  8.     triggeredOnStart: true
  9.     onTriggered: {
  10.         canvas.requestLine = true
  11.         canvas.requestPaint()
  12.     }
  13. }
  15. Component.onCompleted: {
  16.     lineTimer.start()
  17. }
  18. ...

现在我们已经有了告诉onPaint操作中我们需要执行哪个操作的指示。当我们进入onPaint处理每个绘制请求时，我们需要提取画布元素中的初始化变量。

  1. Canvas {
  2.     ...
  3.     property real hue: 0
  4.     property real lastX: width * Math.random();
  5.     property real lastY: height * Math.random();
  6.     ...
  7. }

现在我们的绘制函数应该像这样：

  1. onPaint: {
  2.     var context = getContext('2d')
  3.     if(requestLine) {
  4.         line(context)
  5.         requestLine = false
  6.     }
  7.     if(requestBlank) {
  8.         blank(context)
  9.         requestBlank = false
  10.     }
  11. }

线段绘制函数提取画布作为一个参数。

  1. function line(context) {
  2.     context.save();
  3.     context.translate(canvas.width/2, canvas.height/2);
  4.     context.scale(0.9, 0.9);
  5.     context.translate(-canvas.width/2, -canvas.height/2);
  6.     context.beginPath();
  7.     context.lineWidth = 5 + Math.random() * 10;
  8.     context.moveTo(lastX, lastY);
  9.     lastX = canvas.width * Math.random();
  10.     lastY = canvas.height * Math.random();
  11.     context.bezierCurveTo(canvas.width * Math.random(),
  12.         canvas.height * Math.random(),
  13.         canvas.width * Math.random(),
  14.         canvas.height * Math.random(),
  15.         lastX, lastY);
  17.     hue += Math.random()*0.1
  18.     if(hue > 1.0) {
  19.         hue -= 1
  20.     }
  21.     context.strokeStyle = Qt.hsla(hue, 0.5, 0.5, 1.0);
  22.     // context.shadowColor = 'white';
  23.     // context.shadowBlur = 10;
  24.     context.stroke();
  25.     context.restore();
  26. }

最大的变化是使用QML的Qt.rgba()和Qt.hsla()。在QML中需要把变量值适配在0.0到1.0之间。

同样应用在清屏函数中。

  1. function blank(context) {
  2.     context.fillStyle = Qt.rgba(0,0,0,0.1)
  3.     context.fillRect(0, 0, canvas.width, canvas.height);
  4. }

下面是最终结果（目前没有阴影）类似下面这样。

HTML5画布移植（Porting from HTML5 Canvas） - 图3

查看下面的链接获得更多的信息：