一个简单的QML自定义渲染的示例:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 400
Rectangle {
width: 200
height: 200
// 使用Canvas元素进行自定义渲染
Canvas {
id: canvas
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制一个红色矩形
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = "red";
ctx.fill();
}
}
}
}
在上述代码中,我们创建了一个窗口并在窗口内部创建了一个矩形。内部的Canvas元素用于自定义渲染。通过监听Canvas元素的onPaint事件,我们可以在其中使用2D绘图上下文(context)进行自定义绘制。
在onPaint事件的处理函数中,我们首先获取2D绘图上下文ctx,然后使用ctx.clearRect方法清除画布。接下来,我们使用ctx.rect方法绘制一个红色矩形,设置其位置和尺寸,并使用ctx.fillStyle属性设置填充颜色。最后,我们使用ctx.fill方法填充矩形。