Solved rectangular DelayButton
-
is possible to make delay button rectangular whitout make a custom one? Not see style for .... but maybe there are some trik for make it. I appreciate any suggest.
regards
-
Try this;
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 Window { visible: true width: 320 height: 240 title: qsTr("Rectangular button") DelayButton { delay: 2000 text: "Button" anchors.centerIn: parent } }
-
ok thanks ... sorry but i have active import QtQuick.Extras 1.4 in my file ..... so only round DelayButton .... but if cancel these module all works ....
Other things not undestand how is possible to change color and backgroundcolor of delay button, for example yellow and red instead of grey and darkgray as standard style.
thanks
-
-
@LeLev I see but need linear delaybutton shadow and not circular ... if try to use ctx.line(x,x,x,x,x,x) .... I receive an error for inexistent draw function .... and not find a page with permitted draw function ...
thanks
-
@gfxx I try with these demo code but with no success ...
DelayButton { id: delayPress width: 100 height: 50 display: AbstractButton.TextOnly delay: 3000 font.bold: true anchors.top: parent.top anchors.topMargin: 0 checkable: true anchors.horizontalCenter: parent.horizontalCenter opacity: delayPress.enabled? 1 : 0.3 visible: true text: "Delay\nButton" contentItem: Text { text: delayPress.text font: delayPress.font opacity: enabled ? 1.0 : 0.3 color: "white" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { implicitWidth: delayPress.width implicitHeight: delayPress.height opacity: enabled ? 1 : 0.3 color: delayPress.down ? "#17a81a" : "#21be2b" //border.color: "#2b6016" //border.width: 1 antialiasing: true radius: 2 anchors.centerIn: parent Canvas { id: canvas anchors.fill: parent Connections { target: delayPress onProgressChanged: canvas.requestPaint() } onPaint: { var ctx = getContext("2d") ctx.clearRect(0, 0, delayPress.width, delayPress.height) ctx.strokeStyle = "red" ctx.beginPath() var startPoint = 0 var endPoint = startPoint + delayPress.progress ctx.fillRect(startPoint, delayPress.height, endPoint, delayPress.height) ctx.stroke() } } }
some suggest?
-
var endPoint = startPoint + delayPress.progress
these row is wrong, because progress go from 0 to 1 so you need to multiply the variable "progress" by the length of the desired rectangle .... all this goes great.
Thanks at all