函數圖形元素渲染可配置軸、填充和樣式的數學函數曲線。該表達式在沙盒環境中進行評估。
| 屬性 | 類型 | 必要 | 範例 | 值範圍 | 描述 |
|---|---|---|---|---|---|
| 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）。