aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/canvas
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/canvas')
-rw-r--r--examples/quick/canvas/CMakeLists.txt174
-rw-r--r--examples/quick/canvas/LabeledSlider.qml37
-rw-r--r--examples/quick/canvas/bezierCurve/bezierCurve.qml211
-rw-r--r--examples/quick/canvas/canvas.qml80
-rw-r--r--examples/quick/canvas/canvas.qrc3
-rw-r--r--examples/quick/canvas/clip/clip.qml238
-rw-r--r--examples/quick/canvas/doc/src/canvas.qdoc29
-rw-r--r--examples/quick/canvas/main.cpp51
-rw-r--r--examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml213
-rw-r--r--examples/quick/canvas/roundedrect/roundedrect.qml191
-rw-r--r--examples/quick/canvas/smile/smile.qml203
-rw-r--r--examples/quick/canvas/squircle/squircle.qml229
-rw-r--r--examples/quick/canvas/tiger/tiger.qml191
13 files changed, 805 insertions, 1045 deletions
diff --git a/examples/quick/canvas/CMakeLists.txt b/examples/quick/canvas/CMakeLists.txt
index ef978ee80b..b48770f0a6 100644
--- a/examples/quick/canvas/CMakeLists.txt
+++ b/examples/quick/canvas/CMakeLists.txt
@@ -1,135 +1,57 @@
-# Generated from canvas.pro.
+# Copyright (C) 2022 The Qt Company Ltd.
+# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-cmake_minimum_required(VERSION 3.14)
+cmake_minimum_required(VERSION 3.16)
project(canvas LANGUAGES CXX)
-set(CMAKE_INCLUDE_CURRENT_DIR ON)
+find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick)
-set(CMAKE_AUTOMOC ON)
-set(CMAKE_AUTORCC ON)
-set(CMAKE_AUTOUIC ON)
+qt_standard_project_setup(REQUIRES 6.5)
-if(NOT DEFINED INSTALL_EXAMPLESDIR)
- set(INSTALL_EXAMPLESDIR "examples")
-endif()
+add_subdirectory("../shared" "shared")
-set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quick/canvas")
-
-find_package(Qt6 COMPONENTS Core)
-find_package(Qt6 COMPONENTS Gui)
-find_package(Qt6 COMPONENTS Quick)
-find_package(Qt6 COMPONENTS Qml)
-
-qt_add_executable(canvas
+qt_add_executable(canvasexample
+ WIN32
+ MACOSX_BUNDLE
main.cpp
)
-set_target_properties(canvas PROPERTIES
- WIN32_EXECUTABLE TRUE
- MACOSX_BUNDLE TRUE
-)
-target_link_libraries(canvas PUBLIC
- Qt::Core
- Qt::Gui
- Qt::Qml
- Qt::Quick
-)
-
-
-# Resources:
-set(canvas_resource_files
- "bezierCurve/bezierCurve.qml"
- "canvas.qml"
- "clip/clip.qml"
- "contents/qt-logo.png"
- "quadraticCurveTo/quadraticCurveTo.qml"
- "roundedrect/roundedrect.qml"
- "smile/smile.qml"
- "squircle/squircle.png"
- "squircle/squircle.qml"
- "tiger/tiger.js"
- "tiger/tiger.qml"
-)
-
-qt6_add_resources(canvas "canvas"
- PREFIX
- "/canvas"
- FILES
- ${canvas_resource_files}
-)
-set_source_files_properties("../shared/Button.qml"
- PROPERTIES QT_RESOURCE_ALIAS "Button.qml"
-)
-set_source_files_properties("../shared/CheckBox.qml"
- PROPERTIES QT_RESOURCE_ALIAS "CheckBox.qml"
-)
-set_source_files_properties("../shared/FlickrRssModel.qml"
- PROPERTIES QT_RESOURCE_ALIAS "FlickrRssModel.qml"
-)
-set_source_files_properties("../shared/Label.qml"
- PROPERTIES QT_RESOURCE_ALIAS "Label.qml"
-)
-set_source_files_properties("../shared/LauncherList.qml"
- PROPERTIES QT_RESOURCE_ALIAS "LauncherList.qml"
-)
-set_source_files_properties("../shared/SimpleLauncherDelegate.qml"
- PROPERTIES QT_RESOURCE_ALIAS "SimpleLauncherDelegate.qml"
-)
-set_source_files_properties("../shared/Slider.qml"
- PROPERTIES QT_RESOURCE_ALIAS "Slider.qml"
-)
-set_source_files_properties("../shared/TabSet.qml"
- PROPERTIES QT_RESOURCE_ALIAS "TabSet.qml"
-)
-set_source_files_properties("../shared/TextField.qml"
- PROPERTIES QT_RESOURCE_ALIAS "TextField.qml"
-)
-set_source_files_properties("../shared/images/back.png"
- PROPERTIES QT_RESOURCE_ALIAS "images/back.png"
-)
-set_source_files_properties("../shared/images/checkmark.png"
- PROPERTIES QT_RESOURCE_ALIAS "images/checkmark.png"
-)
-set_source_files_properties("../shared/images/next.png"
- PROPERTIES QT_RESOURCE_ALIAS "images/next.png"
-)
-set_source_files_properties("../shared/images/qt-logo.png"
- PROPERTIES QT_RESOURCE_ALIAS "images/qt-logo.png"
-)
-set_source_files_properties("../shared/images/slider_handle.png"
- PROPERTIES QT_RESOURCE_ALIAS "images/slider_handle.png"
-)
-set_source_files_properties("../shared/images/tab.png"
- PROPERTIES QT_RESOURCE_ALIAS "images/tab.png"
-)
-set(shared_resource_files
- "Button.qml"
- "CheckBox.qml"
- "FlickrRssModel.qml"
- "Label.qml"
- "LauncherList.qml"
- "SimpleLauncherDelegate.qml"
- "Slider.qml"
- "TabSet.qml"
- "TextField.qml"
- "images/back.png"
- "images/checkmark.png"
- "images/next.png"
- "images/qt-logo.png"
- "images/slider_handle.png"
- "images/tab.png"
-)
-qt6_add_resources(canvas "shared"
- PREFIX
- "/shared"
- BASE
- "../shared"
- FILES
- ${shared_resource_files}
-)
-
-install(TARGETS canvas
- RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
- BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
- LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
-)
+target_link_libraries(canvasexample PRIVATE
+ Qt6::Core
+ Qt6::Gui
+ Qt6::Qml
+ Qt6::Quick
+)
+
+qt_add_qml_module(canvasexample
+ URI canvas
+ QML_FILES
+ "LabeledSlider.qml"
+ "bezierCurve/bezierCurve.qml"
+ "canvas.qml"
+ "clip/clip.qml"
+ "quadraticCurveTo/quadraticCurveTo.qml"
+ "roundedrect/roundedrect.qml"
+ "smile/smile.qml"
+ "squircle/squircle.qml"
+ "tiger/tiger.js"
+ "tiger/tiger.qml"
+ RESOURCES
+ "contents/qt-logo.png"
+ "squircle/squircle.png"
+)
+
+install(TARGETS canvasexample
+ BUNDLE DESTINATION .
+ RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+ LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+)
+
+qt_generate_deploy_qml_app_script(
+ TARGET canvasexample
+ OUTPUT_SCRIPT deploy_script
+ MACOS_BUNDLE_POST_BUILD
+ NO_UNSUPPORTED_PLATFORM_ERROR
+ DEPLOY_USER_QML_MODULES_ON_UNSUPPORTED_PLATFORM
+)
+install(SCRIPT ${deploy_script})
diff --git a/examples/quick/canvas/LabeledSlider.qml b/examples/quick/canvas/LabeledSlider.qml
new file mode 100644
index 0000000000..fa0ab98f78
--- /dev/null
+++ b/examples/quick/canvas/LabeledSlider.qml
@@ -0,0 +1,37 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+ id: labeledSlider
+ property alias name: label.text
+ property real min: 0.0
+ property real max: 1.0
+ property alias value: quickControlsSlider.value
+
+ implicitHeight: Math.max(label.implicitHeight, quickControlsSlider.implicitHeight)
+
+ Label {
+ id: label
+ anchors.left: parent.left
+ anchors.leftMargin: 10
+ anchors.verticalCenter: labeledSlider.verticalCenter
+ font: Qt.font({pointSize: 13})
+ }
+
+ Slider {
+ id: quickControlsSlider
+ anchors {
+ verticalCenter: labeledSlider.verticalCenter
+ right: labeledSlider.right
+ rightMargin: 10
+ left: label.right
+ leftMargin: 10
+ }
+ from: labeledSlider.min
+ to: labeledSlider.max
+ width: labeledSlider.width - label.implicitWidth - (label.anchors.leftMargin + anchors.rightMargin + anchors.leftMargin)
+ }
+}
diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml
index 4f573ed64e..0965a1e3db 100644
--- a/examples/quick/canvas/bezierCurve/bezierCurve.qml
+++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml
@@ -1,137 +1,134 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+import QtQuick
+import QtQuick.Controls
+import "../"
Item {
- id:container
+ id: root
width: 320
height: 480
Column {
- spacing:5
- anchors.fill: parent
- anchors.topMargin: 12
+ spacing: 5
+ anchors {
+ fill: parent
+ topMargin: 12
+ }
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Bezier Curve"
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Bezier Curve")
+ color: Qt.lighter(palette.text)
+ font {
+ pointSize: 24
+ bold: true
+ }
}
Canvas {
- id:canvas
- width:320
- height:280
- property color strokeStyle: Qt.darker(fillStyle, 1.4)
- property color fillStyle: "#b40000" // red
- property int lineWidth: lineWidthCtrl.value
- property bool fill: true
- property bool stroke: true
- property real alpha: 1.0
- property real scale : scaleCtrl.value
- property real rotate : rotateCtrl.value
+ id: canvas
+
+ readonly property color strokeStyle: Qt.darker(fillStyle, 1.4)
+ readonly property color fillStyle: "#b40000" // red
+ readonly property alias lineWidth: lineWidthCtrl.value
+ readonly property alias fill: toggleFillCheckBox.checked
+ readonly property alias stroke: toggleStrokeCheckBox.checked
+ readonly property real alpha: 1.0
+ readonly property alias scale: scaleCtrl.value
+ readonly property alias rotate: rotateCtrl.value
+
+ width: root.width
+ height: parent.height - controls.height
antialiasing: true
- onLineWidthChanged:requestPaint();
- onFillChanged:requestPaint();
- onStrokeChanged:requestPaint();
- onScaleChanged:requestPaint();
- onRotateChanged:requestPaint();
+ onLineWidthChanged: requestPaint()
+ onFillChanged: requestPaint()
+ onStrokeChanged: requestPaint()
+ onScaleChanged: requestPaint()
+ onRotateChanged: requestPaint()
- onPaint: {
- var ctx = canvas.getContext('2d');
- var originX = 85
- var originY = 75
- ctx.save();
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.translate(originX, originX);
- ctx.globalAlpha = canvas.alpha;
- ctx.strokeStyle = canvas.strokeStyle;
- ctx.fillStyle = canvas.fillStyle;
- ctx.lineWidth = canvas.lineWidth;
+ onPaint: function() {
+ let ctx = canvas.getContext('2d')
+ const originX = 85
+ const originY = 75
+ ctx.save()
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ ctx.translate(originX, originX)
+ ctx.globalAlpha = canvas.alpha
+ ctx.strokeStyle = canvas.strokeStyle
+ ctx.fillStyle = canvas.fillStyle
+ ctx.lineWidth = canvas.lineWidth
ctx.translate(originX, originY)
- ctx.scale(canvas.scale, canvas.scale);
- ctx.rotate(canvas.rotate);
+ ctx.scale(canvas.scale, canvas.scale)
+ ctx.rotate(canvas.rotate)
ctx.translate(-originX, -originY)
//! [0]
- ctx.beginPath();
- ctx.moveTo(75,40);
- ctx.bezierCurveTo(75,37,70,25,50,25);
- ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
- ctx.bezierCurveTo(20,80,40,102,75,120);
- ctx.bezierCurveTo(110,102,130,80,130,62.5);
- ctx.bezierCurveTo(130,62.5,130,25,100,25);
- ctx.bezierCurveTo(85,25,75,37,75,40);
- ctx.closePath();
+ ctx.beginPath()
+ ctx.moveTo(75,40)
+ ctx.bezierCurveTo(75,37,70,25,50,25)
+ ctx.bezierCurveTo(20,25,20,62.5,20,62.5)
+ ctx.bezierCurveTo(20,80,40,102,75,120)
+ ctx.bezierCurveTo(110,102,130,80,130,62.5)
+ ctx.bezierCurveTo(130,62.5,130,25,100,25)
+ ctx.bezierCurveTo(85,25,75,37,75,40)
+ ctx.closePath()
//! [0]
if (canvas.fill)
- ctx.fill();
+ ctx.fill()
if (canvas.stroke)
- ctx.stroke();
- ctx.restore();
+ ctx.stroke()
+ ctx.restore()
}
}
}
Column {
id: controls
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id: lineWidthCtrl; min: 1; max: 10; init: 2; name: "Outline"}
- Slider {id: scaleCtrl; min: 0.1; max: 10; init: 1; name: "Scale"}
- Slider {id: rotateCtrl; min: 0; max: Math.PI*2; init: 0; name: "Rotate"}
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: lineWidthCtrl
+ name: qsTr("Outline")
+ min: 1
+ max: 10
+ value: 2
+ width: root.width
+ }
+
+ LabeledSlider {
+ id: scaleCtrl
+ name: qsTr("Scale")
+ min: 0.1
+ max: 10
+ value: 1
+ width: root.width
+ }
+
+ LabeledSlider {
+ id: rotateCtrl
+ name: qsTr("Rotate")
+ min: 0
+ max: Math.PI * 2
+ value: 0
+ width: root.width
+ }
+ Row {
+ CheckBox {
+ id: toggleFillCheckBox
+ checked: true
+ text: qsTr("Toggle fill")
+ }
+ CheckBox {
+ id: toggleStrokeCheckBox
+ checked: true
+ text: qsTr("Toggle stroke")
+ }
+ }
}
}
diff --git a/examples/quick/canvas/canvas.qml b/examples/quick/canvas/canvas.qml
index 7768e1092b..6ac856eb6d 100644
--- a/examples/quick/canvas/canvas.qml
+++ b/examples/quick/canvas/canvas.qml
@@ -1,70 +1,30 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-import QtQuick 2.0
-import "../shared" as Examples
+import QtQuick
+import shared as Examples
Item {
+ id: root
height: 480
width: 320
Examples.LauncherList {
- id: ll
- anchors.fill: parent
+ anchors.fill: root
Component.onCompleted: {
- addExample("Red heart", "Draws a red heart with bezier curves", Qt.resolvedUrl("bezierCurve/bezierCurve.qml"));
- addExample("Talk bubble", "Draws a talk bubble with quadratic curves", Qt.resolvedUrl("quadraticCurveTo/quadraticCurveTo.qml"));
- addExample("Squircle", "Draws a smooth squircle with simple lines", Qt.resolvedUrl("squircle/squircle.qml"));
- addExample("Rounded rectangle", "Draws a rounded rectangle with lines and arcs", Qt.resolvedUrl("roundedrect/roundedrect.qml"));
- addExample("Smile face", "Draws a smile face with complex paths", Qt.resolvedUrl("smile/smile.qml"));
- addExample("Clip", "Shows the canvas clip feature", Qt.resolvedUrl("clip/clip.qml"));
- addExample("Tiger", "Draw a tiger with a collection of SVG paths", Qt.resolvedUrl("tiger/tiger.qml"));
+ addExample(qsTr("Red heart"), qsTr("Draws a red heart with bezier curves"),
+ Qt.resolvedUrl("bezierCurve/bezierCurve.qml"))
+ addExample(qsTr("Talk bubble"), qsTr("Draws a talk bubble with quadratic curves"),
+ Qt.resolvedUrl("quadraticCurveTo/quadraticCurveTo.qml"))
+ addExample(qsTr("Squircle"), qsTr("Draws a smooth squircle with simple lines"),
+ Qt.resolvedUrl("squircle/squircle.qml"))
+ addExample(qsTr("Rounded rectangle"), qsTr("Draws a rounded rectangle with lines and arcs"),
+ Qt.resolvedUrl("roundedrect/roundedrect.qml"))
+ addExample(qsTr("Smile face"), qsTr("Draws a smile face with complex paths"),
+ Qt.resolvedUrl("smile/smile.qml"))
+ addExample(qsTr("Clip"), qsTr("Shows the canvas clip feature"),
+ Qt.resolvedUrl("clip/clip.qml"))
+ addExample(qsTr("Tiger"), qsTr("Draw a tiger with a collection of SVG paths"),
+ Qt.resolvedUrl("tiger/tiger.qml"))
}
}
}
diff --git a/examples/quick/canvas/canvas.qrc b/examples/quick/canvas/canvas.qrc
index cfdfc844b9..eb7b3ad6d6 100644
--- a/examples/quick/canvas/canvas.qrc
+++ b/examples/quick/canvas/canvas.qrc
@@ -1,6 +1,7 @@
<RCC>
- <qresource prefix="/canvas">
+ <qresource prefix="/qt/qml/canvas">
<file>canvas.qml</file>
+ <file>LabeledSlider.qml</file>
<file>bezierCurve/bezierCurve.qml</file>
<file>clip/clip.qml</file>
<file>contents/qt-logo.png</file>
diff --git a/examples/quick/canvas/clip/clip.qml b/examples/quick/canvas/clip/clip.qml
index 1771121cd6..3d0591f97a 100644
--- a/examples/quick/canvas/clip/clip.qml
+++ b/examples/quick/canvas/clip/clip.qml
@@ -1,158 +1,142 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import "../"
Item {
- id:container
+ id: root
width: 320
height: 480
Column {
- spacing:5
- anchors.fill: parent
- anchors.topMargin: 12
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Squircle with Clip"
+ spacing: 5
+ anchors {
+ fill: root
+ topMargin: 12
+ }
+
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Squircle with Clip")
+ color: Qt.lighter(palette.text)
+ font {
+ pointSize: 24
+ bold: true
+ }
}
Canvas {
id: canvas
- width: 320
- height: 280
- property color strokeStyle: Qt.darker(fillStyle, 1.2)
- property color fillStyle:"#14aaff" // green
- property int lineWidth:2
- property int nSize:nCtrl.value
- property real radius:rCtrl.value
- property bool fill:true
- property bool stroke:false
- property real px: width/2
- property real py: height/2 + 20
- property real alpha: 1.0
- property string imagefile:"../contents/qt-logo.png"
+
+ readonly property color strokeStyle: Qt.darker(fillStyle, 1.2)
+ readonly property color fillStyle: "#14aaff" // green
+ readonly property int lineWidth: 2
+ readonly property alias nSize: nCtrl.value
+ readonly property alias radius: rCtrl.value
+ readonly property alias fill: toggleFillCheckBox.checked
+ readonly property alias stroke: toggleStrokeCheckBox.checked
+ readonly property real px: width / 2
+ readonly property real py: height / 2 + 20
+ readonly property real alpha: 1.0
+ readonly property string imagefile: "../contents/qt-logo.png"
+
+ width: root.width
+ height: parent.height - controls.height
antialiasing: true
- Component.onCompleted:loadImage(canvas.imagefile);
-
- onRadiusChanged:requestPaint();
- onLineWidthChanged:requestPaint();
- onNSizeChanged:requestPaint();
- onFillChanged:requestPaint();
- onStrokeChanged:requestPaint();
- onImageLoaded : requestPaint();
- onPaint: squcirle();
-
- function squcirle() {
- var ctx = canvas.getContext("2d");
- var N = canvas.nSize;
- var R = canvas.radius;
-
- N=Math.abs(N);
- var M=N;
- if (N>100) M=100;
- if (N<0.00000000001) M=0.00000000001;
-
- ctx.save();
- ctx.globalAlpha = canvas.alpha;
- ctx.fillStyle = "white";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- ctx.strokeStyle = canvas.strokeStyle;
- ctx.fillStyle = canvas.fillStyle;
- ctx.lineWidth = canvas.lineWidth;
-
- ctx.beginPath();
- var i = 0, x, y;
- for (i=0; i<(2*R+1); i++){
- x = Math.round(i-R) + canvas.px;
- y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
-
- if (i == 0)
- ctx.moveTo(x, y);
+
+ Component.onCompleted: loadImage(canvas.imagefile)
+ onRadiusChanged: requestPaint()
+ onLineWidthChanged: requestPaint()
+ onNSizeChanged: requestPaint()
+ onFillChanged: requestPaint()
+ onStrokeChanged: requestPaint()
+ onImageLoaded: requestPaint()
+
+ onPaint: function() {
+ let ctx = canvas.getContext("2d")
+ const N = Math.abs(canvas.nSize)
+ const R = canvas.radius
+
+ const M = Math.max(0.00000000001, Math.min(N, 100))
+
+ ctx.save()
+ ctx.globalAlpha = canvas.alpha
+ ctx.fillStyle = "white"
+ ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+ ctx.strokeStyle = canvas.strokeStyle
+ ctx.fillStyle = canvas.fillStyle
+ ctx.lineWidth = canvas.lineWidth
+
+ ctx.beginPath()
+ let i, x, y
+ for (i = 0; i < (2 * R + 1); i++) {
+ x = Math.round(i - R) + canvas.px
+ y = Math.round(Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(i - R), M)), 1 / M)) + canvas.py
+
+ if (i === 0)
+ ctx.moveTo(x, y)
else
- ctx.lineTo(x, y);
+ ctx.lineTo(x, y)
}
- for (i=(2*R); i<(4*R+1); i++){
- x =Math.round(3*R-i)+canvas.px;
- y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
- ctx.lineTo(x, y);
+ for (i = (2 * R); i < (4 * R + 1); i++) {
+ x = Math.round(3 * R - i) + canvas.px
+ y = Math.round(-Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(3 * R - i), M)), 1 / M)) + canvas.py
+ ctx.lineTo(x, y)
}
- ctx.closePath();
+ ctx.closePath()
if (canvas.stroke) {
- ctx.stroke();
+ ctx.stroke()
}
if (canvas.fill) {
- ctx.fill();
+ ctx.fill()
}
//! [0]
- ctx.clip();
- ctx.drawImage(canvas.imagefile, 0, 0);
+ ctx.clip()
+ ctx.drawImage(canvas.imagefile, 0, 0)
//! [0]
- ctx.restore();
+ ctx.restore()
}
}
}
Column {
id: controls
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id: nCtrl; min: 1; max: 10; init: 4; name:"N"}
- Slider {id: rCtrl; min: 30; max: 180; init: 80; name:"Radius"}
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: nCtrl
+ name: qsTr("N")
+ width: root.width
+ min: 1
+ max: 10
+ value: 4
+ }
+ LabeledSlider {
+ id: rCtrl
+ name: qsTr("Radius")
+ width: root.width
+ min: 30
+ max: 180
+ value: 80
+ }
+ Row {
+ CheckBox {
+ id: toggleFillCheckBox
+ checked: true
+ text: qsTr("Toggle fill")
+ }
+ CheckBox {
+ id: toggleStrokeCheckBox
+ text: qsTr("Toggle stroke")
+ }
+ }
}
}
diff --git a/examples/quick/canvas/doc/src/canvas.qdoc b/examples/quick/canvas/doc/src/canvas.qdoc
index 14ee363164..87a7c7b5c4 100644
--- a/examples/quick/canvas/doc/src/canvas.qdoc
+++ b/examples/quick/canvas/doc/src/canvas.qdoc
@@ -1,29 +1,5 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:FDL$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU Free Documentation License Usage
-** Alternatively, this file may be used under the terms of the GNU Free
-** Documentation License version 1.3 as published by the Free Software
-** Foundation and appearing in the file included in the packaging of
-** this file. Please review the following information to ensure
-** the GNU Free Documentation License version 1.3 requirements
-** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\title Qt Quick Examples - Canvas
@@ -31,6 +7,7 @@
\brief This is a collection of QML Canvas examples.
\image qml-canvas-example.png
\ingroup qtquickexamples
+ \examplecategory {Graphics}
\e Canvas is a collection of small QML examples relating to the \l Canvas
type. Each example is a small QML file emphasizing a particular type or
diff --git a/examples/quick/canvas/main.cpp b/examples/quick/canvas/main.cpp
index e2f5eb6bde..160a2e13e1 100644
--- a/examples/quick/canvas/main.cpp
+++ b/examples/quick/canvas/main.cpp
@@ -1,51 +1,4 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#include "../shared/shared.h"
DECLARATIVE_EXAMPLE_MAIN(canvas/canvas)
diff --git a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
index cd93205995..0f788891ab 100644
--- a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
+++ b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
@@ -1,145 +1,138 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+import QtQuick
+import QtQuick.Controls
+import "../"
Item {
- id:container
- width:320
- height:480
+ id: root
+ width: 320
+ height: 480
Column {
- spacing:5
- anchors.fill: parent
- anchors.topMargin: 12
+ spacing: 5
+ anchors {
+ fill: parent
+ topMargin: 12
+ }
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Quadratic Curve"
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Quadratic Curve")
+ color: Qt.lighter(palette.text)
+ font {
+ pointSize: 24
+ bold: true
+ }
}
Canvas {
id: canvas
- width: 320
- height: 280
- property color strokeStyle: Qt.darker(fillStyle, 1.3)
- property color fillStyle: "#14aaff" // blue
- property int lineWidth: lineWidthCtrl.value
- property bool fill: true
- property bool stroke: true
- property real alpha: 1.0
- property real scale : scaleCtrl.value
- property real rotate : rotateCtrl.value
+ readonly property color strokeStyle: Qt.darker(fillStyle, 1.3)
+ readonly property color fillStyle: "#14aaff" // blue
+ readonly property alias lineWidth: lineWidthCtrl.value
+ readonly property alias fill: toggleFillCheckBox.checked
+ readonly property alias stroke: toggleStrokeCheckBox.checked
+ readonly property alias scale: scaleCtrl.value
+ readonly property alias rotate: rotateCtrl.value
+ width: root.width
+ height: parent.height - controls.height
antialiasing: true
- onLineWidthChanged:requestPaint();
- onFillChanged:requestPaint();
- onStrokeChanged:requestPaint();
- onScaleChanged:requestPaint();
- onRotateChanged:requestPaint();
+ onLineWidthChanged: requestPaint()
+ onFillChanged: requestPaint()
+ onStrokeChanged: requestPaint()
+ onScaleChanged: requestPaint()
+ onRotateChanged: requestPaint()
- onPaint: {
- var ctx = canvas.getContext('2d');
- var originX = 75
- var originY = 75
+ onPaint: function() {
+ let ctx = canvas.getContext('2d')
+ const originX = 75
+ const originY = 75
- ctx.save();
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.translate(originX, originX);
- ctx.strokeStyle = canvas.strokeStyle;
- ctx.fillStyle = canvas.fillStyle;
- ctx.lineWidth = canvas.lineWidth;
+ ctx.save()
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ ctx.translate(originX, originX)
+ ctx.strokeStyle = canvas.strokeStyle
+ ctx.fillStyle = canvas.fillStyle
+ ctx.lineWidth = canvas.lineWidth
ctx.translate(originX, originY)
- ctx.rotate(canvas.rotate);
- ctx.scale(canvas.scale, canvas.scale);
+ ctx.rotate(canvas.rotate)
+ ctx.scale(canvas.scale, canvas.scale)
ctx.translate(-originX, -originY)
// ![0]
- ctx.beginPath();
- ctx.moveTo(75,25);
- ctx.quadraticCurveTo(25,25,25,62.5);
- ctx.quadraticCurveTo(25,100,50,100);
- ctx.quadraticCurveTo(50,120,30,125);
- ctx.quadraticCurveTo(60,120,65,100);
- ctx.quadraticCurveTo(125,100,125,62.5);
- ctx.quadraticCurveTo(125,25,75,25);
- ctx.closePath();
+ ctx.beginPath()
+ ctx.moveTo(75, 25)
+ ctx.quadraticCurveTo(25, 25, 25, 62.5)
+ ctx.quadraticCurveTo(25, 100, 50, 100)
+ ctx.quadraticCurveTo(50, 120, 30, 125)
+ ctx.quadraticCurveTo(60, 120, 65, 100)
+ ctx.quadraticCurveTo(125, 100, 125, 62.5)
+ ctx.quadraticCurveTo(125, 25, 75, 25)
+ ctx.closePath()
// ![0]
if (canvas.fill)
- ctx.fill();
+ ctx.fill()
if (canvas.stroke)
- ctx.stroke();
+ ctx.stroke()
// ![1]
- ctx.fillStyle = "white";
- ctx.font = "bold 17px sans-serif";
- ctx.fillText("Qt Quick", 40, 70);
+ ctx.fillStyle = "white"
+ ctx.font = "bold 17px sans-serif"
+ ctx.fillText("Qt Quick", 40, 70)
// ![1]
- ctx.restore();
+ ctx.restore()
}
}
}
Column {
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id:lineWidthCtrl; min:1; max:10; init:2; name:"Outline"}
- Slider {id:scaleCtrl; min:0.1; max:10; init:1; name:"Scale"}
- Slider {id:rotateCtrl; min:0; max:Math.PI*2; init:0; name:"Rotate"}
+ id: controls
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: lineWidthCtrl
+ name: qsTr("Outline")
+ width: root.width
+ min: 1
+ max: 10
+ value: 2
+ }
+ LabeledSlider {
+ id: scaleCtrl
+ name: qsTr("Scale")
+ width: root.width
+ min: 0.1
+ max: 10
+ value: 1
+ }
+ LabeledSlider {
+ id: rotateCtrl
+ name: qsTr("Rotate")
+ width: root.width
+ min: 0
+ max: Math.PI * 2
+ value: 0
+ }
+ Row {
+ CheckBox {
+ id: toggleFillCheckBox
+ checked: true
+ text: qsTr("Toggle fill")
+ }
+ CheckBox {
+ id: toggleStrokeCheckBox
+ checked: true
+ text: qsTr("Toggle stroke")
+ }
+ }
}
}
diff --git a/examples/quick/canvas/roundedrect/roundedrect.qml b/examples/quick/canvas/roundedrect/roundedrect.qml
index 08ede9b1e7..26861b921c 100644
--- a/examples/quick/canvas/roundedrect/roundedrect.qml
+++ b/examples/quick/canvas/roundedrect/roundedrect.qml
@@ -1,131 +1,120 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+import QtQuick
+import QtQuick.Controls
+import "../"
Item {
- id:container
+ id: root
width: 320
height: 480
Column {
spacing: 6
- anchors.fill: parent
- anchors.topMargin: 12
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Rounded rectangle"
+ anchors {
+ fill: parent
+ topMargin: 12
+ }
+
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Rounded rectangle")
+ color: Qt.lighter(palette.text)
+ font {
+ pointSize: 24
+ bold: true
+ }
}
Canvas {
id: canvas
- width: 320
- height: 280
- antialiasing: true
- 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
+ readonly property alias radius: rCtrl.value
+ readonly property int rectx: 60
+ readonly property int recty: 60
+ readonly property int rectWidth: width - 2 * rectx
+ readonly property int rectHeight: height - 2 * recty
+ readonly property color strokeStyle: Qt.darker(fillStyle, 1.4)
+ readonly property color fillStyle: "#ae32a0" // purple
+ readonly property alias lineWidth: lineWidthCtrl.value
+ readonly property alias fill: toggleFillCheckBox.checked
+ readonly property alias stroke: toggleStrokeCheckBox.checked
+ readonly property real alpha: 1.0
- onLineWidthChanged:requestPaint();
- onFillChanged:requestPaint();
- onStrokeChanged:requestPaint();
- onRadiusChanged:requestPaint();
+ width: root.width
+ height: parent.height - controls.height
+ antialiasing: true
+
+ onLineWidthChanged: requestPaint()
+ onFillChanged: requestPaint()
+ onStrokeChanged: requestPaint()
+ onRadiusChanged: requestPaint()
- onPaint: {
- var ctx = getContext("2d");
- ctx.save();
- ctx.clearRect(0,0,canvas.width, canvas.height);
- ctx.strokeStyle = canvas.strokeStyle;
+ onPaint: function() {
+ 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);
+ 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
+ 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
+ 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
+ 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();
+ ctx.arcTo(rectx, recty, rectx + radius, recty, radius)
+ ctx.closePath()
if (canvas.fill)
- ctx.fill();
+ ctx.fill()
if (canvas.stroke)
- ctx.stroke();
- ctx.restore();
+ ctx.stroke()
+ ctx.restore()
}
}
}
Column {
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"}
- Slider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"}
+ id: controls
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: lineWidthCtrl
+ name: qsTr("Outline")
+ width: root.width
+ min: 1
+ max: 10
+ value: 2
+ }
+ LabeledSlider {
+ id: rCtrl
+ name: qsTr("Radius")
+ width: root.width
+ min: 10
+ max: 80
+ value: 40
+ }
+ Row {
+ CheckBox {
+ id: toggleFillCheckBox
+ checked: true
+ text: qsTr("Toggle fill")
+ }
+ CheckBox {
+ id: toggleStrokeCheckBox
+ checked: true
+ text: qsTr("Toggle stroke")
+ }
+ }
}
}
diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml
index cde18d4d38..bf534a3da2 100644
--- a/examples/quick/canvas/smile/smile.qml
+++ b/examples/quick/canvas/smile/smile.qml
@@ -1,138 +1,129 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+import QtQuick
+import QtQuick.Controls
+import "../"
Item {
- id: container
+ id: root
width: 320
height: 480
Column {
spacing: 6
- anchors.fill: parent
- anchors.topMargin: 12
+ anchors {
+ fill: parent
+ topMargin: 12
+ }
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Smile with arcs"
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Smile with arcs")
+ font {
+ pointSize: 24
+ bold: true
+ }
+ color: Qt.lighter(palette.text)
}
Canvas {
id: canvas
- width: 320
+
+ readonly property color strokeStyle: Qt.darker(fillStyle, 1.6)
+ readonly property color fillStyle: "#e0c31e" // yellow
+ readonly property alias lineWidth: lineWidthCtrl.value
+ readonly property alias fill: toggleFillCheckBox.checked
+ readonly property alias stroke: toggleStrokeCheckBox.checked
+ readonly property alias scale: scaleCtrl.value
+ readonly property alias rotate: rotateCtrl.value
+
+ width: root.width
height: parent.height - controls.height
antialiasing: true
- property color strokeStyle: Qt.darker(fillStyle, 1.6)
- property color fillStyle: "#e0c31e" // yellow
- property int lineWidth: lineWidthCtrl.value
- property bool fill: true
- property bool stroke: true
- property real scale : scaleCtrl.value
- property real rotate : rotateCtrl.value
-
- onLineWidthChanged:requestPaint();
- onFillChanged:requestPaint();
- onStrokeChanged:requestPaint();
- onScaleChanged:requestPaint();
- onRotateChanged:requestPaint();
+ onLineWidthChanged: requestPaint()
+ onFillChanged: requestPaint()
+ onStrokeChanged: requestPaint()
+ onScaleChanged: requestPaint()
+ onRotateChanged: requestPaint()
onPaint: {
- var ctx = canvas.getContext('2d');
- var originX = 85
- var originY = 75
- ctx.save();
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.translate(originX, originX);
- ctx.strokeStyle = canvas.strokeStyle;
- ctx.fillStyle = canvas.fillStyle;
- ctx.lineWidth = canvas.lineWidth;
+ let ctx = canvas.getContext('2d')
+ const originX = 85
+ const originY = 75
+ ctx.save()
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ ctx.translate(originX, originX)
+ ctx.strokeStyle = canvas.strokeStyle
+ ctx.fillStyle = canvas.fillStyle
+ ctx.lineWidth = canvas.lineWidth
ctx.translate(originX, originY)
- ctx.scale(canvas.scale, canvas.scale);
- ctx.rotate(canvas.rotate);
+ ctx.scale(canvas.scale, canvas.scale)
+ ctx.rotate(canvas.rotate)
ctx.translate(-originX, -originY)
- ctx.beginPath();
- ctx.moveTo(75 + 50 * Math.cos(0),
- 75 - 50 * Math.sin(Math.PI*2));
- ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
- ctx.moveTo(60,60);
- ctx.arc(60,60,5,0,Math.PI*2,true); // Left eye
- ctx.moveTo(90 + 5 * Math.cos(0),
- 65 - 5 * Math.sin(Math.PI*2));
- ctx.moveTo(90,60);
- ctx.arc(90,60,5,-Math.PI,Math.PI*3,false); // Right eye
- ctx.moveTo(75,70);
- ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise)
- ctx.closePath();
+ ctx.beginPath()
+ ctx.moveTo(75 + 50 * Math.cos(0), 75 - 50 * Math.sin(Math.PI * 2))
+ ctx.arc(75, 75, 50, 0, Math.PI * 2, true) // Outer circle
+ ctx.moveTo(60, 60)
+ ctx.arc(60, 60, 5, 0, Math.PI * 2, true) // Left eye
+ ctx.moveTo(90 + 5 * Math.cos(0), 65 - 5 * Math.sin(Math.PI * 2))
+ ctx.moveTo(90, 60)
+ ctx.arc(90, 60, 5, -Math.PI, Math.PI * 3, false) // Right eye
+ ctx.moveTo(75, 70)
+ ctx.arc(75, 70, 35, 0, Math.PI, false) // Mouth (clockwise)
+ ctx.closePath()
if (canvas.fill)
- ctx.fill();
+ ctx.fill()
if (canvas.stroke)
- ctx.stroke();
- ctx.restore();
+ ctx.stroke()
+ ctx.restore()
}
}
}
Column {
id: controls
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"}
- Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"}
- Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: lineWidthCtrl
+ name: qsTr("Outline")
+ width: root.width
+ min: 1
+ max: 10
+ value: 2
+ }
+ LabeledSlider {
+ id: scaleCtrl
+ name: qsTr("Scale")
+ width: root.width
+ min: 0.1
+ max: 10
+ value: 1
+ }
+ LabeledSlider {
+ id: rotateCtrl
+ name: qsTr("Rotate")
+ width: root.width
+ min: 0
+ max: Math.PI * 2
+ value: 0
+ }
+ Row {
+ CheckBox {
+ id: toggleFillCheckBox
+ text: qsTr("Toggle fill")
+ }
+ CheckBox {
+ id: toggleStrokeCheckBox
+ checked: true
+ text: qsTr("Toggle stroke")
+ }
+ }
}
}
diff --git a/examples/quick/canvas/squircle/squircle.qml b/examples/quick/canvas/squircle/squircle.qml
index 5416bfa1c7..3e4755e02c 100644
--- a/examples/quick/canvas/squircle/squircle.qml
+++ b/examples/quick/canvas/squircle/squircle.qml
@@ -1,72 +1,30 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import "../"
Item {
- id: container
+ id: root
width: 320
height: 480
Column {
spacing: 6
- anchors.fill: parent
- anchors.topMargin: 12
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Squircles"
+ anchors {
+ fill: parent
+ topMargin: 12
+ }
+
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Squircles")
+ color: Qt.lighter(palette.text)
+ font {
+ pointSize: 24
+ bold: true
+ }
}
Image {
@@ -78,83 +36,106 @@ Item {
Canvas {
id: canvas
- width: 320
- height: 250
+
+ readonly property color strokeStyle: Qt.darker(fillStyle, 1.2)
+ readonly property color fillStyle: "#6400aa"
+ readonly property int lineWidth: 2
+ readonly property alias nSize: nCtrl.value
+ readonly property alias radius: rCtrl.value
+ readonly property alias fill: toggleFillCheckBox.checked
+ readonly property alias stroke: toggleStrokeCheckBox.checked
+ readonly property real px: width / 2
+ readonly property real py: height / 2 + 10
+ readonly property real alpha: 1.0
+
+ width: root.width
+ height: parent.height - controls.height
antialiasing: true
- property color strokeStyle: Qt.darker(fillStyle, 1.2)
- property color fillStyle: "#6400aa"
-
- property int lineWidth: 2
- property int nSize: nCtrl.value
- property real radius: rCtrl.value
- property bool fill: true
- property bool stroke: false
- property real px: width/2
- property real py: height/2 + 10
- property real alpha: 1.0
-
- onRadiusChanged: requestPaint();
- onLineWidthChanged: requestPaint();
- onNSizeChanged: requestPaint();
- onFillChanged: requestPaint();
- onStrokeChanged: requestPaint();
-
- onPaint: squircle();
-
- function squircle() {
- var ctx = canvas.getContext("2d");
- var N = canvas.nSize;
- var R = canvas.radius;
-
- N=Math.abs(N);
- var M=N;
- if (N>100) M=100;
- if (N<0.00000000001) M=0.00000000001;
-
- ctx.save();
- ctx.globalAlpha =canvas.alpha;
- ctx.fillStyle = "white";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- ctx.strokeStyle = canvas.strokeStyle;
- ctx.fillStyle = canvas.fillStyle;
- ctx.lineWidth = canvas.lineWidth;
-
- ctx.beginPath();
- var i = 0, x, y;
- for (i=0; i<(2*R+1); i++){
- x = Math.round(i-R) + canvas.px;
- y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
-
- if (i == 0)
- ctx.moveTo(x, y);
+ onRadiusChanged: requestPaint()
+ onLineWidthChanged: requestPaint()
+ onNSizeChanged: requestPaint()
+ onFillChanged: requestPaint()
+ onStrokeChanged: requestPaint()
+
+ onPaint: function () {
+ let ctx = canvas.getContext("2d")
+ const N = Math.abs(canvas.nSize)
+ const R = canvas.radius
+
+ const M = Math.max(0.00000000001, Math.min(N, 100))
+
+ ctx.save()
+ ctx.globalAlpha = canvas.alpha
+ ctx.fillStyle = "white"
+ ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+ ctx.strokeStyle = canvas.strokeStyle
+ ctx.fillStyle = canvas.fillStyle
+ ctx.lineWidth = canvas.lineWidth
+
+ ctx.beginPath()
+ let i, x, y;
+ for (i = 0; i < (2 * R + 1); i++) {
+ x = Math.round(i - R) + canvas.px
+ y = Math.round(Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(i - R), M)), 1 / M)) + canvas.py
+
+ if (i === 0)
+ ctx.moveTo(x, y)
else
- ctx.lineTo(x, y);
+ ctx.lineTo(x, y)
}
- for (i=(2*R); i<(4*R+1); i++){
- x =Math.round(3*R-i)+canvas.px;
- y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
- ctx.lineTo(x, y);
+ for (i = (2 * R); i < (4 * R + 1); i++) {
+ x = Math.round(3 * R - i) + canvas.px
+ y = Math.round(-Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(3 * R - i), M)), 1 / M)) + canvas.py
+ ctx.lineTo(x, y)
}
- ctx.closePath();
+ ctx.closePath()
if (canvas.stroke) {
- ctx.stroke();
+ ctx.stroke()
}
-
if (canvas.fill) {
- ctx.fill();
+ ctx.fill()
}
- ctx.restore();
+ ctx.restore()
}
}
}
Column {
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id: nCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "N"}
- Slider {id: rCtrl ; min: 30 ; max: 180 ; init: 60 ; name: "Radius"}
+ id: controls
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: nCtrl
+ name: qsTr("N")
+ width: root.width
+ min: 1
+ max: 10
+ value: 2
+ }
+ LabeledSlider {
+ id: rCtrl
+ name: qsTr("Radius")
+ width: root.width
+ min: 30
+ max: 180
+ value: 60
+ }
+ Row {
+ CheckBox {
+ id: toggleFillCheckBox
+ text: qsTr("Toggle fill")
+ }
+ CheckBox {
+ id: toggleStrokeCheckBox
+ checked: true
+ text: qsTr("Toggle stroke")
+ }
+ }
}
}
diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml
index 71367d560a..e936619411 100644
--- a/examples/quick/canvas/tiger/tiger.qml
+++ b/examples/quick/canvas/tiger/tiger.qml
@@ -1,144 +1,119 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of The Qt Company Ltd nor the names of its
-** contributors may be used to endorse or promote products derived
-** from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import "../contents"
-import "../../shared"
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import "../"
import "tiger.js" as Tiger
Item {
- id: container
+ id: root
width: 320
height: 480
Column {
spacing: 6
- anchors.fill: parent
- anchors.topMargin: 12
+ anchors {
+ fill: parent
+ topMargin: 12
+ }
- Text {
- font.pointSize: 24
- font.bold: true
- text: "Tiger with SVG path"
+ Label {
anchors.horizontalCenter: parent.horizontalCenter
- color: "#777"
+ text: qsTr("Tiger with SVG path")
+ color: Qt.lighter(palette.text)
+ font {
+ pointSize: 24
+ bold: true
+ }
}
Canvas {
id: canvas
- width: 320
- height: 280
+
+ readonly property real alpha: alphaCtrl.value
+ readonly property real scale: scaleCtrl.value
+ readonly property real rotate: rotateCtrl.value
+
+ width: root.width
+ height: parent.height - controls.height
antialiasing: true
- property string strokeStyle: "steelblue"
- property string fillStyle: "yellow"
- property bool fill: true
- property bool stroke: true
- property real alpha: alphaCtrl.value
- property real scale: scaleCtrl.value
- property real rotate: rotateCtrl.value
- property int frame: 0
-
- onFillChanged: requestPaint();
- onStrokeChanged: requestPaint();
- onAlphaChanged: requestPaint();
- onScaleChanged: requestPaint();
- onRotateChanged: requestPaint();
-
- onPaint: {
- var ctx = canvas.getContext('2d');
- var originX = canvas.width/2 + 30
- var originY = canvas.height/2 + 60
-
- ctx.save();
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.globalAlpha = canvas.alpha;
- ctx.globalCompositeOperation = "source-over";
+ onAlphaChanged: requestPaint()
+ onScaleChanged: requestPaint()
+ onRotateChanged: requestPaint()
+
+ onPaint: function() {
+ let ctx = canvas.getContext('2d')
+ const originX = canvas.width / 2 + 30
+ const originY = canvas.height / 2 + 60
+
+ ctx.save()
+ ctx.clearRect(0, 0, canvas.width, canvas.height)
+ ctx.globalAlpha = canvas.alpha
+ ctx.globalCompositeOperation = "source-over"
ctx.translate(originX, originY)
- ctx.scale(canvas.scale, canvas.scale);
- ctx.rotate(canvas.rotate);
+ ctx.scale(canvas.scale, canvas.scale)
+ ctx.rotate(canvas.rotate)
ctx.translate(-originX, -originY)
- ctx.strokeStyle = Qt.rgba(.3, .3, .3,1);
- ctx.lineWidth = 1;
+ ctx.strokeStyle = Qt.rgba(.3, .3, .3,1)
+ ctx.lineWidth = 1
//! [0]
- for (var i = 0; i < Tiger.tiger.length; i++) {
- if (Tiger.tiger[i].width != undefined)
- ctx.lineWidth = Tiger.tiger[i].width;
+ for (let i = 0; i < Tiger.tiger.length; i++) {
+ if (Tiger.tiger[i].width !== undefined)
+ ctx.lineWidth = Tiger.tiger[i].width
- if (Tiger.tiger[i].path != undefined)
- ctx.path = Tiger.tiger[i].path;
+ if (Tiger.tiger[i].path !== undefined)
+ ctx.path = Tiger.tiger[i].path
- if (Tiger.tiger[i].fill != undefined) {
- ctx.fillStyle = Tiger.tiger[i].fill;
- ctx.fill();
+ if (Tiger.tiger[i].fill !== undefined) {
+ ctx.fillStyle = Tiger.tiger[i].fill
+ ctx.fill()
}
- if (Tiger.tiger[i].stroke != undefined) {
- ctx.strokeStyle = Tiger.tiger[i].stroke;
- ctx.stroke();
+ if (Tiger.tiger[i].stroke !== undefined) {
+ ctx.strokeStyle = Tiger.tiger[i].stroke
+ ctx.stroke()
}
}
//! [0]
- ctx.restore();
+ ctx.restore()
}
}
}
Column {
id: controls
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 12
- Slider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"}
- Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
- Slider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"}
+ anchors {
+ bottom: parent.bottom
+ bottomMargin: 12
+ }
+
+ LabeledSlider {
+ id: scaleCtrl
+ name: qsTr("Scale")
+ width: root.width
+ min: 0.1
+ max: 1
+ value: 0.3
+ }
+ LabeledSlider {
+ id: rotateCtrl
+ name: qsTr("Rotate")
+ width: root.width
+ min: 0
+ max: Math.PI * 2
+ value: 0
+ }
+ LabeledSlider {
+ id: alphaCtrl
+ name: qsTr("Alpha")
+ width: root.width
+ min: 0
+ max: 1
+ value: 1
+ }
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-02 15:03:13 +0000