function_plotter.dart 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. // tools/function_plotter.dart
  2. //
  3. // 函数图像绘制:一个或多个 y = f(x) 原样交给 Symja 采样,再用 [CurvePlot] 画。
  4. //
  5. // 采样部分(区间、点数、由 sample 拿点)照旧不变;变的只是外壳 —— 输入框交给
  6. // [ToolScaffold],绘制按钮就是外壳的「计算」,重置按钮也是外壳自带的。
  7. import 'package:flutter/material.dart';
  8. import '../curve_plot.dart';
  9. import '../symja.dart';
  10. import 'tool_kit.dart';
  11. class FunctionPlotterPage extends StatefulWidget {
  12. const FunctionPlotterPage({super.key});
  13. @override
  14. State<FunctionPlotterPage> createState() => _FunctionPlotterPageState();
  15. }
  16. class _FunctionPlotterPageState extends State<FunctionPlotterPage> {
  17. /// 横纵范围在**画图之前**定:两个滑动条放在「计算」按钮上方,
  18. /// 采样区间和显示窗口都用它们(原来滑条在图下面、只管显示窗口,
  19. /// 曲线拉出去就断在那儿)。
  20. RangeValues _xRange = const RangeValues(-10, 10);
  21. RangeValues _yRange = const RangeValues(-10, 10);
  22. /// 滑条的取值范围(比默认宽,方便拉大拉小)。
  23. static const RangeValues _rangeLimits = RangeValues(-50, 50);
  24. /// 每单位 x 采几个点。
  25. static const double _perUnit = 60;
  26. static const int _maxCurves = 5;
  27. /// 每条曲线的固定颜色,下标与输入框一一对应。
  28. static const List<Color> _curveColors = <Color>[
  29. Colors.blue,
  30. Colors.red,
  31. Colors.green,
  32. Colors.orange,
  33. Colors.purple,
  34. ];
  35. /// 可增减的表达式输入框。列表**就地增删**(对象始终是同一个),
  36. /// 外壳靠 `identical(fields)` 判断要不要清空结果,换新 List 会把结果清掉。
  37. final List<ToolField> _exprs = <ToolField>[
  38. ToolField('函数 1', hint: '例如 x^2、Sin[x]、Sqrt[x]'),
  39. ];
  40. @override
  41. void initState() {
  42. super.initState();
  43. // 打开就该看到一条曲线:第一个框预置 x^2(autoRun 立刻画)
  44. _exprs.first.controller.text = 'x^2';
  45. }
  46. void _addCurve() {
  47. if (_exprs.length >= _maxCurves) return;
  48. setState(() {
  49. _exprs.add(
  50. ToolField('函数 ${_exprs.length + 1}', hint: '例如 x^2、Sin[x]、Sqrt[x]'),
  51. );
  52. });
  53. }
  54. void _removeCurve() {
  55. if (_exprs.length <= 1) return;
  56. // 不 dispose 被移除的控制器:外壳约定不 dispose 输入框,
  57. // 而且这一帧旧的 TextField 可能还引用着它,提前 dispose 会抛异常。
  58. setState(() => _exprs.removeLast());
  59. }
  60. /// 一条范围滑动条:左边名字、中间滑条、右边当前范围。
  61. Widget _rangeRow(
  62. String label,
  63. RangeValues v,
  64. ValueChanged<RangeValues> onChanged,
  65. ) => Row(
  66. children: [
  67. SizedBox(
  68. width: 64,
  69. child: Text(label, style: const TextStyle(fontSize: 12)),
  70. ),
  71. Expanded(
  72. child: RangeSlider(
  73. values: v,
  74. min: _rangeLimits.start,
  75. max: _rangeLimits.end,
  76. divisions: (_rangeLimits.end - _rangeLimits.start).round(),
  77. labels: RangeLabels('${v.start.round()}', '${v.end.round()}'),
  78. onChanged: onChanged,
  79. ),
  80. ),
  81. SizedBox(
  82. width: 76,
  83. child: Text(
  84. '${v.start.round()} ~ ${v.end.round()}',
  85. textAlign: TextAlign.right,
  86. style: const TextStyle(fontSize: 12, fontFamily: 'monospace'),
  87. ),
  88. ),
  89. ],
  90. );
  91. /// 两个范围滑动条放在「计算」上方:**先定范围再画图**。
  92. Widget _intro() => Column(
  93. crossAxisAlignment: CrossAxisAlignment.start,
  94. children: [
  95. _rangeRow('横轴范围', _xRange, (v) => setState(() => _xRange = v)),
  96. _rangeRow('纵轴范围', _yRange, (v) => setState(() => _yRange = v)),
  97. const SizedBox(height: 8),
  98. Row(
  99. children: [
  100. OutlinedButton.icon(
  101. onPressed: _exprs.length < _maxCurves ? _addCurve : null,
  102. icon: const Icon(Icons.add),
  103. label: const Text('添加函数'),
  104. ),
  105. const SizedBox(width: 12),
  106. OutlinedButton.icon(
  107. onPressed: _exprs.length > 1 ? _removeCurve : null,
  108. icon: const Icon(Icons.remove),
  109. label: const Text('删除函数'),
  110. ),
  111. ],
  112. ),
  113. ],
  114. );
  115. @override
  116. Widget build(BuildContext context) => ToolScaffold(
  117. title: '函数图像绘制',
  118. runLabel: '绘制',
  119. runIcon: Icons.show_chart,
  120. // 默认已经有一个 x^2,打开就该看到图。
  121. autoRun: true,
  122. fields: _exprs,
  123. intro: _intro(),
  124. compute: (session) async {
  125. final series = <CurveSeries>[];
  126. final failed = <String>[];
  127. final from = _xRange.start, to = _xRange.end;
  128. final count = ((to - from) * _perUnit).round().clamp(200, 4000);
  129. // 逐条采样:一条失败只记下它自己,别的照画。
  130. for (var i = 0; i < _exprs.length; i++) {
  131. final raw = _exprs[i].text;
  132. if (raw.isEmpty) continue;
  133. try {
  134. // 表达式原样交给 Symja 解析,谁解析谁负责。
  135. final s = await session.sample(
  136. raw,
  137. variable: 'x',
  138. from: from,
  139. to: to,
  140. count: count,
  141. );
  142. series.add(
  143. CurveSeries(
  144. label: raw,
  145. color: _curveColors[i % _curveColors.length],
  146. // 非有限值(极点处的 ComplexInfinity 等)原样保留,
  147. // CurvePlot 会把它们当成抬笔断点。
  148. points: <Offset>[
  149. for (var k = 0; k < s.ys.length; k++) Offset(s.xAt(k), s.ys[k]),
  150. ],
  151. ),
  152. );
  153. } on SymjaException catch (e) {
  154. failed.add('$raw:$e');
  155. }
  156. }
  157. if (series.isEmpty && failed.isEmpty) {
  158. throw Exception('请至少填写一个函数表达式');
  159. }
  160. return <ToolOutput>[
  161. if (series.isNotEmpty)
  162. ToolChart(
  163. '函数图像',
  164. // CurvePlot 内部用 Expanded,必须给一个确定高度,
  165. // 否则放在外层 Column 里会因为高度无界而报错。
  166. SizedBox(
  167. height: 360,
  168. child: CurvePlot(
  169. series: series,
  170. // 窗口由上面两个滑动条定死,图自己的滑条收起来
  171. xWindow: (from, to),
  172. yWindow: (_yRange.start, _yRange.end),
  173. showControls: false,
  174. ),
  175. ),
  176. ),
  177. if (failed.isNotEmpty) ToolText('未能绘制的函数', failed.join('\n')),
  178. ];
  179. },
  180. );
  181. }