examples/declarative/canvas/smile/smile.qml

   1 import QtQuick 2.0
   2 import "../contents"
   3 Item {
   4   id:container
   5   width:360
   6   height:600
   7
   8   Column {
   9     spacing:5
  10     anchors.fill:parent
  11     Text { font.pointSize:25; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter}
  12
  13     Canvas {
  14         id:canvas
  15         width:360
  16         height:360
  17         smooth:true
  18         renderTarget:Canvas.Image
  19         threadRendering:false
  20
  21         property string strokeStyle:"green"
  22         property string fillStyle:"yellow"
  23         property int lineWidth:lineWidthCtrl.value
  24         property bool fill:true
  25         property bool stroke:true
  26         property real alpha:alphaCtrl.value
  27         property real scaleX : scaleXCtrl.value
  28         property real scaleY : scaleYCtrl.value
  29         property real rotate : rotateCtrl.value
  30
  31         onLineWidthChanged:requestPaint();
  32         onFillChanged:requestPaint();
  33         onStrokeChanged:requestPaint();
  34         onAlphaChanged:requestPaint();
  35         onScaleXChanged:requestPaint();
  36         onScaleYChanged:requestPaint();
  37         onRotateChanged:requestPaint();
  38
  39         Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
  40         Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
  41         Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
  42
  43     onPaint: {
  44           var ctx = canvas.getContext('2d');
  45           ctx.reset();
  46           ctx.clearRect(0, 0, canvas.width, canvas.height);
  47           ctx.globalAlpha = canvas.alpha;
  48           ctx.strokeStyle = canvas.strokeStyle;
  49           ctx.fillStyle = canvas.fillStyle;
  50           ctx.lineWidth = canvas.lineWidth;
  51           ctx.scale(canvas.scaleX, canvas.scaleY);
  52           ctx.rotate(canvas.rotate);
  53           ctx.beginPath();
  54           ctx.moveTo(75 + 50  * Math.cos(0),
  55                      75 - 50  * Math.sin(Math.PI*2));
  56           ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
  57           ctx.moveTo(75,70);
  58           ctx.arc(75,70,35,0,Math.PI,false);   // Mouth (clockwise)
  59           ctx.moveTo(60,65);
  60           ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
  61           ctx.moveTo(90 + 5  * Math.cos(0),
  62                      65 - 5  * Math.sin(Math.PI*2));
  63           ctx.moveTo(90,65);
  64           ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
  65           ctx.closePath();
  66           if (canvas.fill)
  67              ctx.fill();
  68           if (canvas.stroke)
  69              ctx.stroke();
  70         }
  71     }
  72
  73     Rectangle {
  74         id:controls
  75         width:360
  76         height:160
  77         Column {
  78           spacing:3
  79           Slider {id:lineWidthCtrl; width:300; height:30; min:1; max:10; init:2; name:"Line width"}
  80           Slider {id:scaleXCtrl; width:300; height:30; min:0.1; max:10; init:1; name:"ScaleX"}
  81           Slider {id:scaleYCtrl; width:300; height:30; min:0.1; max:10; init:1; name:"ScaleY"}
  82           Slider {id:rotateCtrl; width:300; height:30; min:0; max:Math.PI*2; init:0; name:"Rotate"}
  83           Slider {id:alphaCtrl; width:300; height:30; min:0; max:1; init:1; name:"Alpha"}
  84         }
  85     }
  86   }
  87 }