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 Attribute の + ボタンをクリックし、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 Attribute の + ボタンをクリックし、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 Attribute の + ボタンをクリックし、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 の値を変更します。