Deformer 模組

簡介

以下方法僅適用於 JavaScript Deformer。此模組中的所有內容都在 def 命名空間中，因此方法需要加上 def. 前綴。

成員函式

基於層級的存取

基於層級的方法提供對整個網格樹的存取。這是首選方法，因為它能正確處理巢狀群組和複雜層次結構。

getRootMesh() → cavalry.Mesh

回傳正在變形的形狀的根 cavalry.Mesh。使用它來存取完整的網格層級進行修改。

var root = def.getRootMesh();// Traverse and modify the mesh hierarchydef.setRootMesh(root);

setRootMesh(mesh:cavalry.Mesh)

修改後將根網格設定回來。必須呼叫此方法以應用對網格層級所做的更改。

// Helper function to recursively visit all meshesfunction visitAllMeshes(mesh, func) {    for (var i = 0; i < mesh.childMeshCount(); i++) {        var child = mesh.getChildMeshAtIndex(i);        visitAllMeshes(child, func);        mesh.setChildMeshAtIndex(i, child);    }    func(mesh);}function deformMesh(mesh) {    var pathCount = mesh.count();    for (var p = 0; p < pathCount; p++) {        var path = mesh.getPathAtIndex(p);        var pd = path.pathData();        for (var idx = 0; idx < pd.length; idx++) {            // Move each point along its normal            pd[idx].point.x += pd[idx].normal.x * amount;            pd[idx].point.y += pd[idx].normal.y * amount;        }        path.setPathData(pd);        mesh.setPathAtIndex(p, path);    }}var root = def.getRootMesh();visitAllMeshes(root, deformMesh);def.setRootMesh(root);

衰減

getFalloffAtPoint(x:number, y:number) → number

回傳指定位置處的組合衰減值（0-1）。這包括變形器的強度設定和任何連接的衰減形狀。座標應位於本地網格空間中。

function deformMesh(mesh) {    var pathCount = mesh.count();    for (var p = 0; p < pathCount; p++) {        var path = mesh.getPathAtIndex(p);        var pd = path.pathData();        for (var idx = 0; idx < pd.length; idx++) {            var pt = pd[idx].point;            var normal = pd[idx].normal;            // Get falloff at this point (includes Strength)            var falloff = def.getFalloffAtPoint(pt.x, pt.y);            if (falloff <= 0) continue;            pd[idx].point.x += normal.x * amount * falloff;            pd[idx].point.y += normal.y * amount * falloff;        }        path.setPathData(pd);        mesh.setPathAtIndex(p, path);    }}

包圍盒和點

getBoundingBox() → {x:number, y:number, width:number, height:number, centre:{x:number, y:number}, left:number, right:number, top:number, bottom:number}

回傳一個包含選取包圍盒詳細資訊的物件。

getPoints() → array[points]

回傳形狀的每個點位置陣列。可以迴圈遍歷這些點來操作它們。

// Connect the Deformer to a Shape's Deformers attribute and hit 'Return'.var points = def.getPoints();console.log(JSON.stringify(points));

setPoints(array[points])

設定形狀的每個點位置。

// A simple sine wave deformervar points = def.getPoints();var bbox = def.getBoundingBox();var maxX = bbox.x+bbox.width;var frequency = 10;var amplitude = 50;for (let pt of points) {    let normX = cavalry.norm(pt.x, bbox.x, maxX);    pt.y += Math.sin((normX+n0*.1)*frequency)*amplitude;}def.setPoints(points);

基於深度的存取

基於深度的方法存取層級中特定層級的網格。

meshDepth

網格樹的深度（Mesh Explorer 中報告的最高數字）。這是一個屬性/變數，不是方法。

meshCountAtDepth(depth:int) → int

回傳給定深度的網格數量。

getMeshesAtDepth(depth:int) → [cavalry.Mesh]

回傳 cavalry.Mesh 物件陣列。

setMeshesAtDepth(depth:int, [cavalry.Mesh])

用 cavalry.Mesh 替換給定深度處的網格。這不會移除任何未替換的網格。

getMeshAtDepthAtIndex(depth:int, index:int) → cavalry.Mesh

回傳給定深度和索引處的網格。

setMeshAtDepthAtIndex(depth:int, index:int, mesh:cavalry.Mesh)

替換給定深度和索引處的網格。

setTransformAtDepthAtIndex(depth:int, index:int, position:object, rotation:double, scale:object)

設定給定深度和索引處網格的位置。Position 和 Scale 是可選的具有 x 和 y 值的物件（例如 {"x":20, "y": 5}）。

clearTransformAtDepthAtIndex(depth:int, index:int)

重設給定深度和索引處網格的變換。

centrePivotAtDepthAtIndex(depth:int, index:int)

將給定深度和索引處網格的軸心點置中。

setMaterialAtDepthAtIndex(depth:int, index:int, material:cavalry.Material)

設定給定深度和索引處網格的 Material 物件。

highestDepthWithPath() → int

回傳網格中包含路徑的最高深度。

範例

用另一個網格替換子網格。

1. 建立一個 Text Shape。

2. 在 Attribute Editor 中，點擊 Text Shape 的 Deformers 屬性上的 + 按鈕，選擇 JavaScript Deformer。

3. 點擊 JavaScript Deformer UI 底部的 + 按鈕，選擇 ‘Add Layer’。

4. 建立一個 Star Shape。

5. 將 Star 的 Radius 設定為 30。

6. 連接 starShape.id→javaScriptDeformer.array.1 - 這是步驟 3 中建立的新 n1 陣列 ID。

7. 將 JavaScript Deformer 的 Expression 替換為：

    var meshes = def.getMeshesAtDepth(3); var replaceIndex = n0; if (meshes.length > replaceIndex) {        let currentMesh = def.getMeshAtDepthAtIndex(3, replaceIndex);     let bbox = currentMesh.getBoundingBox();     let path = n1.path;     def.setMeshAtDepthAtIndex(3,replaceIndex, path);     def.setTransformAtDepthAtIndex(3,replaceIndex, bbox.centre); }

8. 更改 JavaScript Deformer 的 n0 值。

用自訂路徑替換子網格。

1. 建立一個 Text Shape。

2. 在 Attribute Editor 中，點擊 Text Shape 的 Deformers 屬性上的 + 按鈕，選擇 JavaScript Deformer。

3. 將 JavaScript Deformer 的 Expression 替換為：

    var meshes = def.getMeshesAtDepth(3); var replaceIndex = n0; if (meshes.length > replaceIndex) {     var path = new cavalry.Path()     var newMesh = new cavalry.Mesh();     var material = new cavalry.Material();     material.fillColor = "#ff24e0";     material.stroke = true;     material.strokeColor = "#000000";     material.strokeWidth = 2;     let bbox = meshes[replaceIndex].getBoundingBox();     path.addEllipse(bbox.centre.x,bbox.centre.y,30,80);     newMesh.addPath(path, material);     def.setMeshAtDepthAtIndex(3,replaceIndex,newMesh); }

4. 更改 JavaScript Deformer 的 n0 值。

修改指定深度和索引處的子網格。

1. 建立一個 Text Shape。

2. 在 Attribute Editor 中，點擊 Text Shape 的 Deformers 屬性上的 + 按鈕，選擇 JavaScript Deformer。

3. 點擊 JavaScript Deformer 底部的 + 按鈕，選擇 ‘Add Int’。

4. 將 JavaScript Deformer 的 Expression 替換為：

    var meshes = def.getMeshesAtDepth(3); var replaceIndex = n1; if (meshes.length > 3) {         var material = new cavalry.Material();     material.fillColor = "#ff24e0";     material.stroke = true;     material.strokeColor = "#000000";     material.strokeWidth = 2;     def.setMaterialAtDepthAtIndex(3,replaceIndex,material);     def.centrePivotAtDepthAtIndex(3,replaceIndex)     def.setTransformAtDepthAtIndex(3,replaceIndex, {}, n0, {"x": 0.8, "y": 0.8}); }

5. 更改 JavaScript Deformer 的 n0 和 n1 值。