qmlで7セグメント表示

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- qmlで7セグメント表示 [2026/03/03 02:11] – 作成 araki
+++ qmlで7セグメント表示 [2026/03/03 07:57] (現在) – araki
@@ 行 168: / 行 168: @@
 </file>
+<file qml TitleBar.qml>
+TitleBar {
+	id: root
+	property string text: "タイトル"
+	property string font: "Noto Serif JP"
+	property string fontSize: 24
+	property string backgroundColor: "#000000"
+	property string foregroundColor: "#FF7F00"
+	Item {
+		Rectangle {
+			anchors.fill: parent
+			gradient: Gradient {
+				orientation: Gradient.Horizontal
+				GradientStop { position: 0.0; color: "#FF0000" }
+				GradientStop { position: 0.5; color: "#00FF00" }
+				GradientStop { position: 1.0; color: "#0000FF" }
+			}
+			padding: 0
+			Canvas {
+				id: canvas
+				anchors.fill: parent
+				property real labelHeight: label.contentHeight
+				property real labelWidth: label.contentWidth
+				onPaint: {
+					var ctx = getContext("2d")
+					ctx.reset()
+					ctx.clearRect(0, 0, width, height)
+					ctx.beginPath()
+					ctx.moveTo(0, 0)
+					ctx.lineTo(labelWidth + 20, 0)
+					ctx.lineTo(labelWidth + 20 + height / 4, height / 2)
+					ctx.lineTo(width - 1, height / 2)
+					ctx.lineTo(width - 1, height - 1)
+					ctx.lineTo(0, height - 1)
+					ctx.closePath()
+					ctx.fillStyle = "#000000"
+					ctx.fill()
+				}
+				Text {
+					id: label
+					text: root.text
+					color: root.foregroundColor
+					font.family: root.font
+					font.pixelSize: root.fontSize
+					horizontalAlignment: Text.AlignLeft
+					verticalAlignment: Text.AlignTop
+					padding: 10
+				}
+			}
+		}
+	}
+}
+</file>

qmlで7セグメント表示.txt · 最終更新: 2026/03/03 07:57 by araki