CircularButtonStyleHelper.qml 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2016 The Qt Company Ltd.
  4. ** Contact: https://www.qt.io/licensing/
  5. **
  6. ** This file is part of the Qt Quick Extras module of the Qt Toolkit.
  7. **
  8. ** $QT_BEGIN_LICENSE:LGPL$
  9. ** Commercial License Usage
  10. ** Licensees holding valid commercial Qt licenses may use this file in
  11. ** accordance with the commercial license agreement provided with the
  12. ** Software or, alternatively, in accordance with the terms contained in
  13. ** a written agreement between you and The Qt Company. For licensing terms
  14. ** and conditions see https://www.qt.io/terms-conditions. For further
  15. ** information use the contact form at https://www.qt.io/contact-us.
  16. **
  17. ** GNU Lesser General Public License Usage
  18. ** Alternatively, this file may be used under the terms of the GNU Lesser
  19. ** General Public License version 3 as published by the Free Software
  20. ** Foundation and appearing in the file LICENSE.LGPL3 included in the
  21. ** packaging of this file. Please review the following information to
  22. ** ensure the GNU Lesser General Public License version 3 requirements
  23. ** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
  24. **
  25. ** GNU General Public License Usage
  26. ** Alternatively, this file may be used under the terms of the GNU
  27. ** General Public License version 2.0 or (at your option) the GNU General
  28. ** Public license version 3 or any later version approved by the KDE Free
  29. ** Qt Foundation. The licenses are as published by the Free Software
  30. ** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
  31. ** included in the packaging of this file. Please review the following
  32. ** information to ensure the GNU General Public License requirements will
  33. ** be met: https://www.gnu.org/licenses/gpl-2.0.html and
  34. ** https://www.gnu.org/licenses/gpl-3.0.html.
  35. **
  36. ** $QT_END_LICENSE$
  37. **
  38. ****************************************************************************/
  39. import QtQuick 2.2
  40. import QtQuick.Extras 1.4
  41. import QtQuick.Extras.Private 1.0
  42. QtObject {
  43. id: circularButtonStyleHelper
  44. property Item control
  45. property color buttonColorUpTop: "#e3e3e3"
  46. property color buttonColorUpBottom: "#b3b3b3"
  47. property color buttonColorDownTop: "#d3d3d3"
  48. property color buttonColorDownBottom: "#939393"
  49. property color outerArcColorTop: "#9c9c9c"
  50. property color outerArcColorBottom: Qt.rgba(0.941, 0.941, 0.941, 0.29)
  51. property color innerArcColorTop: "#e3e3e3"
  52. property color innerArcColorBottom: "#acacac"
  53. property real innerArcColorBottomStop: 0.4
  54. property color shineColor: Qt.rgba(1, 1, 1, 0.29)
  55. property real smallestAxis: control ? Math.min(control.width, control.height) : 0
  56. property real outerArcLineWidth: smallestAxis * 0.04
  57. property real innerArcLineWidth: Math.max(1, outerArcLineWidth * 0.1)
  58. property real shineArcLineWidth: Math.max(1, outerArcLineWidth * 0.1)
  59. property real implicitWidth: Math.round(TextSingleton.implicitHeight * 8)
  60. property real implicitHeight: Math.round(TextSingleton.implicitHeight * 8)
  61. property color textColorUp: "#4e4e4e"
  62. property color textColorDown: "#303030"
  63. property color textRaisedColorUp: "#ffffff"
  64. property color textRaisedColorDown: "#e3e3e3"
  65. property real radius: (smallestAxis * 0.5) - outerArcLineWidth - innerArcLineWidth
  66. property real halfRadius: radius / 2
  67. property real outerArcRadius: innerArcRadius + outerArcLineWidth / 2
  68. property real innerArcRadius: radius + innerArcLineWidth / 2
  69. property real shineArcRadius: outerArcRadius + outerArcLineWidth / 2 - shineArcLineWidth / 2
  70. property real zeroAngle: Math.PI * 0.5
  71. property color buttonColorTop: control && control.pressed ? buttonColorDownTop : buttonColorUpTop
  72. property color buttonColorBottom: control && control.pressed ? buttonColorDownBottom : buttonColorUpBottom
  73. function toPixels(percentageOfSmallestAxis) {
  74. return percentageOfSmallestAxis * smallestAxis;
  75. }
  76. function paintBackground(ctx) {
  77. ctx.reset();
  78. if (outerArcRadius < 0 || radius < 0)
  79. return;
  80. var xCenter = ctx.canvas.width / 2;
  81. var yCenter = ctx.canvas.height / 2;
  82. /* Draw outer arc */
  83. ctx.beginPath();
  84. ctx.lineWidth = outerArcLineWidth;
  85. ctx.arc(xCenter, yCenter, outerArcRadius, 0, Math.PI * 2, false);
  86. var gradient = ctx.createRadialGradient(xCenter, yCenter - halfRadius,
  87. 0, xCenter, yCenter - halfRadius, radius * 1.5);
  88. gradient.addColorStop(0, outerArcColorTop);
  89. gradient.addColorStop(1, outerArcColorBottom);
  90. ctx.strokeStyle = gradient;
  91. ctx.stroke();
  92. /* Draw the shine along the bottom */
  93. ctx.beginPath();
  94. ctx.lineWidth = shineArcLineWidth;
  95. ctx.arc(xCenter, yCenter, shineArcRadius, 0, Math.PI, false);
  96. gradient = ctx.createLinearGradient(xCenter, yCenter + radius, xCenter, yCenter);
  97. gradient.addColorStop(0, shineColor);
  98. gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)");
  99. ctx.strokeStyle = gradient;
  100. ctx.stroke();
  101. /* Draw inner arc */
  102. ctx.beginPath();
  103. ctx.lineWidth = innerArcLineWidth + 1;
  104. ctx.arc(xCenter, yCenter, innerArcRadius, 0, Math.PI * 2, false);
  105. gradient = ctx.createLinearGradient(xCenter, yCenter - halfRadius,
  106. xCenter, yCenter + halfRadius);
  107. gradient.addColorStop(0, innerArcColorTop);
  108. gradient.addColorStop(innerArcColorBottomStop, innerArcColorBottom);
  109. ctx.strokeStyle = gradient;
  110. ctx.stroke();
  111. /* Draw the button's body */
  112. ctx.beginPath();
  113. ctx.ellipse(xCenter - radius, yCenter - radius, radius * 2, radius * 2);
  114. gradient = ctx.createRadialGradient(xCenter, yCenter + radius * 0.85, 0,
  115. xCenter, yCenter + radius * 0.85, radius * (0.85 * 2));
  116. gradient.addColorStop(1, buttonColorTop);
  117. gradient.addColorStop(0, buttonColorBottom);
  118. ctx.fillStyle = gradient;
  119. ctx.fill();
  120. }
  121. }