函数图形元素渲染具有可配置轴、填充和样式的数学函数曲线。表达式在一个沙盒环境中进行评估。
| 属性 | 类型 | 必需 | 示例 | 值范围 | 描述 |
|---|---|---|---|---|---|
| type | string | true | - | Function Graph | 元素的类型。对于函数图形元素，这始终是“函数图形”。 |
| expression | string | true | Math.sin(x) | - | 要绘制的数学表达式。使用 JavaScript Math 语法，以 x 作为变量。 |
| range | array | false | [-10, 10] | - | x 轴范围，作为一个包含两个元素的数组 [min, max]。 |
| samples | number | false | - | > 0 | 用于绘制曲线的样本点数量。更高的值会产生更平滑的曲线。 |
| thickness | number | false | - | > 0 | 函数曲线的线条厚度，以像素为单位。 |
| color | string | false | - | - | 函数曲线的颜色，采用十六进制格式。 |
| backgroundColor | string | false | - | - | 图形区域的背景颜色，采用十六进制格式。 |
| backgroundOpacity | number | false | - | 0 - 1 | 背景的透明度。 |
| threshold | number | false | - | - | 裁剪的最大 y 值阈值。超出此值的点将不被渲染。 |
| flipY | boolean | false | - | - | 是否翻转 Y 轴方向。 |
| fillColor | string | false | - | - | 曲线下方的填充颜色，采用十六进制格式。 |
| fillOpacity | number | false | - | 0 - 1 | 曲线下方区域填充的透明度。设置为 0 以禁用填充。 |
| 属性 | 类型 | 必需 | 示例 | 值范围 | 描述 |
|---|---|---|---|---|---|
| showAxis | boolean | false | - | - | 是否显示坐标轴。 |
| axisColor | string | false | - | - | 轴线的颜色，采用十六进制格式。 |
| axisOpacity | number | false | - | 0 - 1 | 轴线的透明度。 |
| axisTickCount | number | false | - | - | 每个轴上的刻度线数量。 |
| axisThickness | number | false | - | - | 轴线的厚度，以像素为单位。 |
| showAxisArrow | boolean | false | - | - | 是否在轴的末端显示箭头。 |
| axisArrowSize | number | false | - | - | 轴箭头的大小，以像素为单位。 |
{
"id": "graph-001",
"type": "Function Graph",
"start": 0,
"duration": 5,
"trackIndex": 0,
"x": 200,
"y": 200,
"width": 400,
"height": 200,
"anchorX": 200,
"anchorY": 100,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"alpha": 1,
"expression": "Math.sin(x)",
"range": [-10, 10],
"samples": 200,
"thickness": 2,
"color": "#C55F73",
"backgroundColor": "#000000",
"backgroundOpacity": 1,
"showAxis": true,
"axisColor": "#ffffff",
"axisTickCount": 10
}
{
"id": "graph-002",
"type": "Function Graph",
"start": 0,
"duration": 8,
"trackIndex": 0,
"x": 300,
"y": 250,
"width": 500,
"height": 300,
"anchorX": 250,
"anchorY": 150,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"alpha": 1,
"expression": "x * x - 4",
"range": [-5, 5],
"samples": 300,
"thickness": 3,
"color": "#4A90E2",
"fillColor": "#4A90E2",
"fillOpacity": 0.3,
"backgroundColor": "#1a1a2e",
"backgroundOpacity": 0.9,
"showAxis": true,
"axisColor": "#cccccc",
"axisThickness": 2,
"showAxisArrow": true,
"axisArrowSize": 10
}
expression 在一个沙盒环境中进行评估，可以访问 JavaScript 的 Math 对象。使用 Math.sin(x)、Math.pow(x, 2)、Math.exp(x) 等。x 在指定的 range 内以给定数量的 samples 进行迭代。fillOpacity 大于 0 以填充曲线与 x 轴之间的区域。threshold 来裁剪具有渐近线的函数的极端 y 值（例如，1/x）。