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 值。