qml学习--------------利用Canvas绘制图片

来源：互联网发布：java麻将游戏代码算法编辑：程序博客网时间：2024/04/30 03:31

Context2D中有三种不同的方式来绘制图片，其中的image可以是一个image元素，一个图片URL，或者是CanvasImageData。

import QtQuick 2.2Rectangle{    width: 480;    height: 400;    id: root;    //绘制一个随机像素的图片    Canvas{        id: randomImageData;        width: 120;        height: 100;        contextType: "2d";        property var imageData: null;        onPaint: {            if(imageData == null){                imageData = context.createImageData(120 , 100);                for(var i = 0 ; i < 48000 ; i += 4){                    imageData.data[i] = Math.floor(Math.random() *255);                    imageData.data[i + 1] = Math.floor(Math.random() *255);                    imageData.data[i + 2] = Math.floor(Math.random() *255);                    imageData.data[i + 3] = Math.floor(Math.random() *255);                }            }            context.drawImage(imageData , 0 , 0 );        }    }    //绘制一个和本地颜色相同的图片    Canvas{        id: imageCanvas;        property var poster: "icon.jpg";        anchors.left: parent.left;        anchors.top: randomImageData.bottom;        anchors.topMargin: 20;        width: 200;        height: 230;        onPaint: {            var ctx  = getContext("2d");            ctx.drawImage(poster , 0 ,0, width , height);        }        Component.onCompleted: loadImage(poster);        onImageLoaded: {            requestPaint();            negative.setImageData(getContext("2d").createImageData(poster));        }    }    //利用CanvasImageData绘图，并将图片颜色反转    Canvas{        id: negative;        anchors.left: imageCanvas.right;        anchors.leftMargin: 10;        anchors.top: imageCanvas.top;        width: 200;        height: 230;        contextType: "2d";        property var imageData: null;        onPaint: {            if(imageData != null){                context.drawImage(imageData , 0 ,0 , width , height);            }        }        function setImageData(data){            imageData = data;            var limit = data.width *data.height * 4;            for(var i = 0 ; i < limit ; i+= 4 ){                imageData.data[i] = 255 - data.data[i];                imageData.data[i + 1] = 255 - data.data[i + 1];                imageData.data[i + 2] = 255 - data.data[i + 2];                imageData.data[i + 3] = data.data[i + 3];            }            requestPaint();        }    }}

0 0