qtdeclarative/examples/quick/canvas/roundedrect/roundedrect.qml

87 lines
3.1 KiB
QML
Raw Normal View History

// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import "../"
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
Item {
id:container
width: 320
height: 480
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
Column {
spacing: 6
anchors.fill: parent
anchors.topMargin: 12
Label {
font.pointSize: 24
font.bold: true
text: "Rounded rectangle"
anchors.horizontalCenter: parent.horizontalCenter
color: "#777"
}
Canvas {
id: canvas
width: 320
height: 280
antialiasing: true
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
property int radius: rCtrl.value
property int rectx: 60
property int recty: 60
property int rectWidth: width - 2*rectx
property int rectHeight: height - 2*recty
property color strokeStyle: Qt.darker(fillStyle, 1.4)
property color fillStyle: "#ae32a0" // purple
property int lineWidth: lineWidthCtrl.value
property bool fill: true
property bool stroke: true
property real alpha: 1.0
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
onLineWidthChanged:requestPaint();
onFillChanged:requestPaint();
onStrokeChanged:requestPaint();
onRadiusChanged:requestPaint();
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.strokeStyle = canvas.strokeStyle;
ctx.lineWidth = canvas.lineWidth
ctx.fillStyle = canvas.fillStyle
ctx.globalAlpha = canvas.alpha
ctx.beginPath();
ctx.moveTo(rectx+radius,recty); // top side
ctx.lineTo(rectx+rectWidth-radius,recty);
// draw top right corner
ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius);
ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius); // right side
// draw bottom right corner
ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius);
ctx.lineTo(rectx+radius,recty+rectHeight); // bottom side
// draw bottom left corner
ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius);
ctx.lineTo(rectx,recty+radius); // left side
// draw top left corner
ctx.arcTo(rectx,recty,rectx+radius,recty,radius);
ctx.closePath();
if (canvas.fill)
ctx.fill();
if (canvas.stroke)
ctx.stroke();
ctx.restore();
}
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
}
}
Column {
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
LabeledSlider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"; width: container.width}
LabeledSlider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"; width: container.width}
canvas item refactors 1.Supports tiled canvas with canvasSize, tileSize and canvasWindow 2.Supports different rendering targets: Canvas.Image and Canvas.FrameBufferObject by renderTarget property 3.Supports thread rendering when possible by threadRendering property. 4.Refactors QSGContext2D code, move some logic to QSGContext2DCommandBuffer,QSGContext2DTexture,QSGContext2DTile, etc 5.Updates/adds some canvas examples 6.Some improvements for context2d API 6.1 drawImage() now loads image asynchoronously and draw images automatically when they are ready 6.2 adds fillRule supports 6.3 add svg path supports 6.4 Pixel operations (getImageData/putImageData/createImageData) now have better performance by using V8 indexed array accessors 6.5 Uses QTransform instead of QMatrix 6.6 Gradients/patterns now are V8 values, not QObjects 6.7 Supports measureText and TextMetrics interface 6.8 Gives not support warnings for unimplemented functions (drawFocusRing,setCaretSelectionRect,caretBlinkRate) 6.9 Better error handling, throw standard DOM exceptions according to the HTML5 context2d spec. 6.10 Adds shear, resetTransform to matrix operations 6.11 Adds roundedRect, ellipse, text to path operations 6.12 Adds new features to CanvasImageData interface 1) adds mirror() function 2) adds filter() function, include the following filters: Threshold GrayScale Brightness Invert Blur Blend Opaque Convolute 7. Adds documentations Change-Id: Id19224260d6a3fdc589d1f9681c34a88a7e7b3e5 Reviewed-on: http://codereview.qt-project.org/3621 Reviewed-by: Charles Yin <charles.yin@nokia.com>
2011-08-09 06:44:38 +00:00
}
}