qml学习--------------图形的变换

qml也能像qt 中的QPainter一样，支持多种图形变换，比如：tranlsate() , rotate() , scale() , shear()等。

要注意的就是translate使用的原点是当前的原点，所以在使用后最后把它平移到以前的原点去。

下面就通过一个具体的例子学习：

import QtQuick 2.2

Canvas{

width: 480;
height: 640;
contextType: "2d";
property var comicRole:"icon1.jpg";

onPaint: {

context.lineWidth =  2;
context.strokeStyle = "blue";
context.fillStyle = Qt.rgba(0.3 , 0.5  , 0.7 , 0.5);

context.save();
context.translate(width/2 , height/2);
context.drawImage(comicRole , -100 , -100 , 200 , 200);
context.restore();

context.save();
context.translate(width/2 , 0 );
context.drawImage(comicRole  , 0 ,0 , 200 , 200)
context.restore();

context.save();
context.translate(width/2 , 0);
context.shear(- 0.6 , 0);
context.drawImage(comicRole , - 100 , 0 , 200 , 200);
context.restore();

context.save();
context.translate(0 , height/2);
context.shear(0.3  ,0);
context.rotate(Math.PI /3);
context.drawImage(comicRole , 0 , -100 , 200 , 200);
context.restore();

context.save();
context.translate(width/2 , height/2);
context.rotate(Math.PI /2);
context.drawImage(comicRole , 100 , -100 , 200 ,200);
context.restore();

context.save();
context.setTransform(1.2, 0.5 ,  0 , 0.7 , width - 100 , height - 120);
context.drawImage(comicRole , 0,0, 68, 100);
context.restore();

}

Component.onCompleted: loadImage(comicRole);

onImageLoaded: requestPaint();

}