aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/canvas/clip/clip.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/canvas/clip/clip.qml')
-rw-r--r--examples/quick/canvas/clip/clip.qml238
1 files changed, 111 insertions, 127 deletions
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")
+ }
+ }
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-12 00:25:13 +0000