수학 방정식
수학 방정식 시각화하기.
수학 방정식에서는 사용 가능한 모든 그래프 유형을 사용하여 QML에서 수학 방정식을 시각화하는 방법을 보여줍니다. 또한 QtQuick3D 장면을 그래프에 통합하는 방법과 ExtendedSceneEnvironment 을 사용하여 그래프의 전망을 조정하는 방법도 보여줍니다.
기본 QML 애플리케이션 기능에 대한 자세한 내용은 단순 분산 그래프를 참조하십시오.
예제 실행하기
에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.
설정하기
모든 그래프 유형에 대한 데이터는 공통된 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" } }
역할을 설정하면 모델의 데이터를 해당 축에 자동으로 매핑할 수 있습니다.
방정식 구문 분석하기
방정식은 다음 연산자 및 수학 함수와 해당 함수를 사용하는 데 필요한 문자를 사용하여 텍스트 필드에 입력할 수 있습니다:
연산자 | 함수 | 문자 |
---|---|---|
+ - * / % ^ | 사인 코즈 탄 로그 엑스 제곱 | ( ) , |
처리되는 데이터에 두 개의 축과 값이 있으므로 매개변수로 x
및 y
을 지원합니다. 방정식에는 연산자 주위에 공백이 있을 수 있으므로 다음 두 가지 스타일 모두 괜찮습니다:
- x^2+y^2
- x ^ 2 + y ^ 2
방정식은 자바스크립트 방정식 파서와 계산기를 사용하여 구문 분석하고 QML로 가져옵니다:
import "calculator.js" as Calc
계산기는 타입스크립트로 tanguy_k
에 의해 스택 오버플로에 게시되었으며, QML에서 사용할 수 있도록 자바스크립트로 변환되었습니다.
방정식 매개변수는 방정식이 변경되거나 열 또는 행 수가 업데이트될 때마다 채워집니다.
행과 열을 반복합니다:
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 통합에 대비하여 테마가 조금 더 조정되었습니다.
먼저 다른 두 가지와 다른 그라데이션을 사용합니다. 그런 다음 시스템 기본 설정을 사용하는 다른 두 가지와 달리 어두운 색 구성표가 강제로 적용됩니다. 마지막으로, 플롯 영역 배경, 레이블 및 그리드는 표시 여부를 거짓으로 설정하여 숨깁니다.
분산형 그래프는 많은 수의 데이터 포인트를 표시하는 데 적합하므로 각 '행'과 '열'에 대해 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.Point
QtQuick3D 장면 통합하기
QtQuick3D 유형을 찾으려면 QML로 가져와야 합니다:
import QtQuick3D
importScene 속성을 사용하여 QtQuick3D 장면을 그래프로 가져올 수 있습니다. 씬은 Models, Lights, reflection probes, 그리고 루트 Node 에 포함된 기타 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
그래프의 기본 장면 환경을 재정의하기 위해 environment 속성에 ExtendedSceneEnvironment 을 추가합니다. 이 경우 backgroundMode, clearColor, tonemapMode 이 설정됩니다. 또한 glow 이 활성화되어 있습니다. 글로우와 같은 포스트 프로세싱 효과를 추가하려면 톤 맵 모드를 TonemapModeNone 으로 설정해야 합니다.
environment: ExtendedSceneEnvironment { backgroundMode: ExtendedSceneEnvironment.Color clearColor: scatterTheme.backgroundColor tonemapMode: ExtendedSceneEnvironment.TonemapModeNone glowEnabled: true ...
글로우를 강하게 만들기 위해 몇 가지 다른 관련 프로퍼티가 설정됩니다.
© 2025 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.