수학 방정식
수학 방정식 시각화.
'수학 방정식' 섹션에서는 QML에서 사용 가능한 모든 그래프 유형을 활용하여 수학 방정식을 시각화하는 방법을 설명합니다. 또한 QtQuick3D 장면을 그래프에 통합하는 방법과 ExtendedSceneEnvironment 를 사용하여 그래프의 외관을 조정하는 방법도 보여줍니다.

기본 QML 애플리케이션 기능에 대한 자세한 내용은 ‘간단한 산점도’를 참조하십시오.
예제 실행
다음에서 예제를 실행할 수 있습니다.
- Qt Creator
Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator: 튜토리얼: 빌드 및 실행을 참조하십시오.
- Qt Extension for Visual Studio Code
Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택하십시오. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.
설정
모든 그래프 유형에 대한 데이터는 공통의 ListModel 에 저장할 수 있습니다:
ListModel {
id: dataModel
}모델은 그래프 계열 내의 각 그래프 유형별로 설정됩니다:
Surface3DSeries {
id: surfaceSeries
itemLabelFormat: "(@xLabel, @zLabel): @yLabel"
ItemModelSurfaceDataProxy {
itemModel: dataModel
columnRole: "xPos"
yPosRole: "yPos"
rowRole: "zPos"
}
}
...
Bar3DSeries {
id: barSeries
itemLabelFormat: "@colLabel, @rowLabel: @valueLabel"
ItemModelBarDataProxy {
itemModel: dataModel
columnRole: "xPos"
valueRole: "yPos"
rowRole: "zPos"
}
}
...
Scatter3DSeries {
id: scatterSeries
itemLabelFormat: "(@xLabel, @zLabel): @yLabel"
mesh: Abstract3DSeries.Mesh.Point
ItemModelScatterDataProxy {
itemModel: dataModel
xPosRole: "xPos"
yPosRole: "yPos"
zPosRole: "zPos"
}
}역할을 설정하면 모델의 데이터를 해당 축에 자동으로 매핑할 수 있습니다.
방정식 구문 분석
다음 연산자 및 수학 함수, 그리고 해당 함수를 사용하는 데 필요한 문자를 사용하여 텍스트 필드에 방정식을 입력할 수 있습니다:
| 연산자 | 함수 | 문자 |
|---|---|---|
| + - * / % ^ | sin cos tan log exp sqrt | ( ), |
x 및 y 를 매개변수로 사용할 수 있습니다. 이는 처리되는 데이터가 두 축과 값으로 구성되기 때문입니다. 방정식에서 연산자 주위에 공백이 있을 수 있으므로, 다음 두 가지 형식 모두 허용됩니다:
- x^2+y^2
- x ^ 2 + y ^ 2
방정식은 QML로 임포트된 JavaScript 방정식 파서 및 계산기를 사용하여 구문 분석됩니다:
import "calculator.js" as Calc이 계산기는 tanguy_k 이 TypeScript로 작성하여 Stack Overflow에 게시한 것으로, QML에서 사용할 수 있도록 JavaScript로 변환되었습니다.
방정식 매개변수는 방정식이 변경되거나 열 또는 행 수가 업데이트될 때마다 채워집니다.
행과 열을 순회하기:
for (i = xValues.first.value; i <= xValues.second.value; ++i) {
for (j = zValues.first.value; j <= zValues.second.value; ++j)
addDataPoint(i, j)
}x 및 y 에 값을 채우는 방법:
function addDataPoint(i, j) {
var filledEquation = equation.text.replace("x", i)
filledEquation = filledEquation.replace("y", j)
...그런 다음 방정식을 JavaScript 계산기에 전달하여 결과를 얻은 후, 정의된 역할에 삽입하여 데이터 모델에 추가합니다:
try {
var result = Calc.calculate(filledEquation)
dataModel.append({"xPos": i, "yPos": result, "zPos": j})
}수식에 오류가 있거나 알 수 없는 연산자 또는 수학 함수가 포함된 경우, 계산기에서 발생된 오류를 포착하여 오류 대화 상자를 표시합니다:
MessageDialog {
id : messageDialog
title: qsTr("Error")
text: qsTr("Undefined behavior")
...계산기에서 발생한 오류 메시지 표시:
catch(msg) {
messageDialog.informativeText = msg.toString()
messageDialog.open()
}그래프
세 가지 그래프 유형 모두 동일한 데이터 모델을 사용합니다. 다만 그래프 설정 방식에는 몇 가지 차이가 있습니다.
표면
표면 그래프는 데이터를 특별한 변형 없이 표시하는 데 사용됩니다. 이 그래프는 각 행과 열에 방정식을 계산 결과와 함께 렌더링합니다.
유일한 변경 사항은 축 구간 수를 설정하는 것입니다:
axisX.segmentCount: 10
axisZ.segmentCount: 10
axisY.segmentCount: 10테마에 범위 그라데이션을 설정하여 높은 값과 낮은 값을 강조 표시합니다:
theme : GraphsTheme {
id: surfaceTheme
colorStyle: GraphsTheme.ColorStyle.RangeGradient
baseGradients: [ gradient1 ]
plotAreaBackgroundVisible: false
}이 그라디언트 자체는 다른 테마에서도 사용할 수 있도록 별도의 위치에서 정의되어 있습니다.
막대 그래프
막대 그래프의 경우에도 범위 그라데이션이 사용됩니다. 이 그라데이션은 약간의 투명도를 활용하여 그래프를 크게 회전시키지 않고도 값을 더 쉽게 확인할 수 있도록 합니다. 투명도 수준을 조절할 수 있는 슬라이더가 추가되었습니다.
산점도
산점도의 경우, QtQuick3D 통합을 대비하여 테마가 조금 더 조정되었습니다.
첫째, 다른 두 차트와 다른 그라데이션을 사용합니다. 둘째, 시스템 기본 설정을 따르는 다른 두 차트와 달리 어두운 색상 구성으로 강제 설정됩니다. 마지막으로, 플롯 영역의 배경, 레이블 및 격자선을 가시성을 false로 설정하여 숨깁니다.
산점도는 많은 수의 데이터 포인트를 표시하는 데 적합하기 때문에, 각 “행”과 “열”마다 3개의 데이터 포인트가 추가되었습니다. 산점도에는 행과 열이라는 개념이 없기 때문에 다음과 같은 처리가 가능합니다:
for (var i = xValues.first.value; i <= xValues.second.value; i += 0.333) {
for (var j = zValues.first.value; j <= zValues.second.value; j += 0.333)
addDataPoint(i, j)
}산점도는 다른 두 그래프보다 데이터 점이 훨씬 많기 때문에, 점에는 사용 가능한 가장 밝은 mesh type 를 사용하는 것이 좋습니다:
mesh: Abstract3DSeries.Mesh.PointQtQuick3D 장면 통합
QtQuick3D 유형을 사용할 수 있게 하려면, 이를 QML로 임포트해야 합니다:
import QtQuick3DQtQuick3D 장면은 ` importScene ` 속성을 사용하여 그래프에 가져올 수 있습니다. 이 장면은 루트 ` Node`에 포함된 `Models`, ` Light`, ` reflection probes` 및 기타 ` Node`의 조합일 수 있습니다. 이 예제에서는 불투명도 맵이 적용된 사각형만 추가됩니다:
importScene: Node {
Model {
scale: Qt.vector3d(0.1, 0.1, 0.1)
source: "#Rectangle"
y: -2
eulerRotation.x: -90
materials: [
PrincipledMaterial {
baseColor: "#373F26"
opacityMap: Texture {
source: "qrc:/images/opacitymap.png"
}
}
]
}
}QtQuick3D를 사용하여 외관 변경하기
ExtendedSceneEnvironment 를 사용하려면 다음 임포트가 필요합니다:
import QtQuick3D.Helpers그래프의 기본 장면 환경을 재정의하려면 ExtendedSceneEnvironment 를 사용하여 environment 속성을 추가합니다. 이 경우 backgroundMode, clearColor 및 tonemapMode 가 설정됩니다. 또한 glow 가 활성화됩니다. 글로우와 같은 후처리 효과를 추가하려면 톤 맵 모드를 TonemapModeNone 로 설정해야 합니다.
environment: ExtendedSceneEnvironment {
backgroundMode: ExtendedSceneEnvironment.Color
clearColor: scatterTheme.backgroundColor
tonemapMode: ExtendedSceneEnvironment.TonemapModeNone
glowEnabled: true
...글로우 효과를 강하게 만들기 위해 몇 가지 다른 관련 속성도 설정됩니다.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.