#HarmonyOS NEXT体验官# ：在HarmonyOS Next中进行物理实验 原创

// 引入常量，用于设置面板和按钮的背景颜色，保证界面的一致性
import { PANEL_BACKGROUND_COLOR, PANEL_BUTTON_BACKGROUND_COLOR } from '../common/const';

// 引入与文档尺寸相关的常量，通常用于处理文档的尺寸设置
import { DocumentSize, DocumentSizes } from '../data/Documents';

// 引入 EntryAbility 模块，提供应用程序的全局路径信息
import EntryAbility from '../entryability/EntryAbility';

// 引入文件处理相关的工具函数，检查文档是否存在，创建文档目录，以及获取反色颜色
import { documentExists, createDocumentDir, getInverseColor } from '../common/common';

// 定义一个弹射器设置配置类，包含多个可调整的配置项
export class CatapultSettingsConfig {
  numBlocks: number = 5; // 左侧小块数量，初始值为5
  blockDensity: number = 10; // 左侧小块的密度，初始值为10（放大了10000倍）
  sphereDensity: number = 10; // 右侧圆球的密度，初始值为10（放大了300倍）
}

// 使用 @Component 装饰器定义一个组件，名为 CatapultSettingsPanel，包含了组件的逻辑和 UI 布局
@Component
export struct CatapultSettingsPanel {

  // 定义两个可选的回调函数，分别用于设置确定和取消的处理逻辑
  catapultSettingsOK?: (config: CatapultSettingsConfig) => void;
  catapultSettingsCancel?: () => void;

  // 使用 @State 定义一个状态变量，存储用户配置的弹射器设置项
  @State config: CatapultSettingsConfig = new CatapultSettingsConfig();

  // build() 方法是组件的核心方法，用于定义组件的 UI 布局和行为
  build() {
    // 使用 Column 组件创建一个垂直布局的容器，子组件将按照顺序从上到下排列
    Column() {

      // 创建一个 Row 组件，用于水平排列“左侧小块数量”标签
      Row() {
        // 创建一个文本组件，显示“左侧小块数量”标签
        Text('左侧小块数量')
          .fontSize(16) // 设置字体大小为 16
          .fontColor('#FFFFFF') // 设置字体颜色为白色
          .width('160') // 设置宽度为 160
          .height('30') // 设置高度为 30
          .textAlign(TextAlign.Center); // 设置文本居中对齐
      }.margin({ top: 10 }); // 设置上边距

      // 创建一个滑动条组件，用于选择左侧小块数量
      Slider({
        value: this.config.numBlocks, // 绑定到状态变量 config.numBlocks
        min: 1, // 设置最小值为 1
        max: 10, // 设置最大值为 10
        step: 1, // 设置滑动步长为 1
        style: SliderStyle.OutSet // 设置滑动条的样式
      })
        .margin({ left: 10, right: 10 }) // 设置左右边距
        .onChange((value: number, mode: SliderChangeMode) => {
          this.config.numBlocks = value; // 当滑动条变化时，更新左侧小块数量
        });

      // 创建一个 Row 组件，用于水平排列“左侧小块的密度”标签
      Row() {
        // 创建一个文本组件，显示“左侧小块的密度”标签
        Text('左侧小块的密度')
          .fontSize(16) // 设置字体大小为 16
          .fontColor('#FFFFFF') // 设置字体颜色为白色
          .width('160') // 设置宽度为 160
          .height('30') // 设置高度为 30
          .textAlign(TextAlign.Center); // 设置文本居中对齐
      }.margin({ top: 10 }); // 设置上边距

      // 创建一个滑动条组件，用于选择左侧小块的密度
      Slider({
        value: this.config.blockDensity, // 绑定到状态变量 config.blockDensity
        min: 1, // 设置最小值为 1
        max: 300, // 设置最大值为 300
        step: 1, // 设置滑动步长为 1
        style: SliderStyle.OutSet // 设置滑动条的样式
      })
        .margin({ left: 10, right: 10 }) // 设置左右边距
        .onChange((value: number, mode: SliderChangeMode) => {
          this.config.blockDensity = value; // 当滑动条变化时，更新左侧小块的密度
        });

      // 创建一个 Row 组件，用于水平排列“右侧圆球密度”标签
      Row() {
        // 创建一个文本组件，显示“右侧圆球密度”标签
        Text('右侧圆球密度')
          .fontSize(16) // 设置字体大小为 16
          .fontColor('#FFFFFF') // 设置字体颜色为白色
          .width('160') // 设置宽度为 160
          .height('30') // 设置高度为 30
          .textAlign(TextAlign.Center); // 设置文本居中对齐
      }.margin({ top: 10 }); // 设置上边距

      // 创建一个滑动条组件，用于选择右侧圆球的密度
      Slider({
        value: this.config.sphereDensity, // 绑定到状态变量 config.sphereDensity
        min: 1, // 设置最小值为 1
        max: 100, // 设置最大值为 100
        step: 1, // 设置滑动步长为 1
        style: SliderStyle.OutSet // 设置滑动条的样式
      })
        .margin({ left: 10, right: 10 }) // 设置左右边距
        .onChange((value: number, mode: SliderChangeMode) => {
          this.config.sphereDensity = value; // 当滑动条变化时，更新右侧圆球的密度
        });

      // 创建一个 Row 容器，用于布局“确定”和“取消”按钮
      Row() {
        // 创建“确定”按钮
        Button({ type: ButtonType.Normal }) {
          Text('确定')
            .fontSize(16) // 设置字体大小为 16
            .fontColor('#FFFFFF') // 设置字体颜色为白色
            .width('100%') // 设置文本宽度为 100%
            .height('30') // 设置文本高度为 30
            .textAlign(TextAlign.Center); // 设置文本居中对齐
        }
        .borderRadius(5) // 设置按钮的圆角半径
        .width(100) // 设置按钮宽度为 100
        .height(30) // 设置按钮高度为 30
        .margin({ right: 10 }) // 设置右边距
        .onClick(() => {
           if (this.catapultSettingsOK) {
             this.catapultSettingsOK(this.config); // 当点击按钮时，调用 catapultSettingsOK 回调函数，并传递当前的配置
           }
        });

        // 创建“取消”按钮
        Button({ type: ButtonType.Normal }) {
          Text('取消')
            .fontSize(16) // 设置字体大小为 16
            .fontColor('#FFFFFF') // 设置字体颜色为白色
            .width('100%') // 设置文本宽度为 100%
            .height('30') // 设置文本高度为 30
            .textAlign(TextAlign.Center); // 设置文本居中对齐
        }
        .borderRadius(5) // 设置按钮的圆角半径
        .width(100) // 设置按钮宽度为 100
        .height(30) // 设置按钮高度为 30
        .onClick(() => {
          if (this.catapultSettingsCancel) {
            this.catapultSettingsCancel(); // 当点击按钮时，调用 catapultSettingsCancel 回调函数
          }
        })
        .margin({ left: 10 }); // 设置左边距
      }
      .margin({ top: 20, left: 10, right: 10 }); // 设置容器的上边距、左边距和右边距
    }
    .backgroundColor(PANEL_BACKGROUND_COLOR) // 设置背景颜色
    .border({ width: 0, color: '#000000', radius: 10 }) // 设置边框属性
    .width('100%') // 设置宽度为 100%，占据整个父容器的宽度
    .height('100%'); // 设置高度为 100%，占据整个父容器的高度
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.

var Example = Example || {};

// 生成一个随机的颜色值
function randomColor() {
    // 生成随机的 R、G、B 分量
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    // 将 R、G、B 分量转换为十六进制，并保证输出为两位数
    var rHex = r.toString(16).padStart(2, '0');
    var gHex = g.toString(16).padStart(2, '0');
    var bHex = b.toString(16).padStart(2, '0');

    // 拼接成颜色代码，并返回
    return '#' + rHex + gHex + bHex;
}

// 定义一个 catapult 示例，用于创建弹射器的物理模拟场景
Example.catapult = function(config) {
    // 引入 Matter.js 库中的各个模块
    var Engine = Matter.Engine,
        Render = Matter.Render,
        Runner = Matter.Runner,
        Composites = Matter.Composites,
        Constraint = Matter.Constraint,
        MouseConstraint = Matter.MouseConstraint,
        Mouse = Matter.Mouse,
        Composite = Matter.Composite,
        Bodies = Matter.Bodies,
        Body = Matter.Body,
        Vector = Matter.Vector;

    // 创建物理引擎（Engine）实例
    var engine = Engine.create(),
        world = engine.world;
    // 设置引擎中重力的方向和大小，这里设置为向下的重力
    engine.world.gravity.y = 2;

    // 创建渲染器（Render），用于将物理世界中的物体渲染到页面中
    var render = Render.create({
        element: document.body, // 渲染结果将添加到页面的 body 中
        engine: engine, // 渲染器将使用刚刚创建的物理引擎实例
        options: {
            width: window.innerWidth, // 渲染画布的宽度为窗口宽度
            height: window.innerHeight, // 渲染画布的高度为窗口高度
            wireframes: false // 禁用线框模式，使用填充颜色渲染
        }
    });

    // 启动渲染器
    Render.run(render);

    // 创建运行器（Runner），用于在动画循环中不断更新物理引擎
    var runner = Runner.create();
    // 启动运行器并与物理引擎关联
    Runner.run(runner, engine);

    // 从配置中读取或设置默认的参数
    var numBlocks = Math.max(1, Math.min(config.numBlocks || 6, 10)); // 确保左侧小块数量在1到10之间
    var blockDensity = config.blockDensity || 1; // 如果未指定小块密度，默认设置为1
    var sphereDensity = config.sphereDensity || 0.005; // 如果未指定圆球密度，默认设置为0.005

    // 添加物体到物理世界中
    var group = Body.nextGroup(true); // 创建一个新的碰撞组，用于定义物体的碰撞行为

    // 创建一个堆叠的矩形小块组
    var stack = Composites.stack(250, 255, 1, numBlocks, 0, 0, function(x, y) {
        // 创建一个矩形小块，设置其密度和随机颜色
        return Bodies.rectangle(x, y, 30, 30, {
            density: blockDensity,
            render: { fillStyle: randomColor() } // 随机颜色填充
        });
    });

    // 创建一个长方形的弹射器主体
    var catapult = Bodies.rectangle(400, 520, 320, 20, { collisionFilter: { group: group } });

    // 将创建的物体添加到物理世界中
    Composite.add(world, [
        stack, // 左侧堆叠的小块组
        catapult, // 弹射器主体
        Bodies.rectangle(window.innerWidth / 2, 600, window.innerWidth, 50.5, { isStatic: true, render: { fillStyle: '#060a19' } }), // 底部的静态矩形地面

        Bodies.rectangle(250, 555, 20, 50, { isStatic: true, render: { fillStyle: '#00ffff' } }), // 静态矩形，左侧的支撑块
        Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group }, render: { fillStyle: '#ff00ff' } }), // 静态矩形，右侧的支撑块
        Bodies.circle(560, 100, 50, {
            density: sphereDensity, // 设置圆球的密度
            render: { fillStyle: 'red' } // 设置圆球的填充颜色为红色
        }),
        // 创建一个约束，将弹射器主体与其当前位置固定
        Constraint.create({
            bodyA: catapult,
            pointB: Vector.clone(catapult.position),
            stiffness: 1,
            length: 0
        })
    ]);

    // 添加鼠标控制
    var mouse = Mouse.create(render.canvas),
        mouseConstraint = MouseConstraint.create(engine, {
            mouse: mouse,
            constraint: {
                stiffness: 0.2,
                render: {
                    visible: false // 不显示鼠标约束的可视化
                }
            }
        });

    // 将鼠标控制添加到物理世界中
    Composite.add(world, mouseConstraint);

    // 使鼠标与渲染保持同步
    render.mouse = mouse;

    // 将渲染视口调整到场景
    Render.lookAt(render, {
        min: { x: 0, y: 0 },
        max: { x: 800, y: 600 }
    });

    // 返回物理引擎、运行器、渲染器的上下文，用于外部控制
    return {
        engine: engine,
        runner: runner,
        render: render,
        canvas: render.canvas,
        stop: function() {
            // 停止渲染和物理引擎的运行
            Matter.Render.stop(render);
            Matter.Runner.stop(runner);
        }
    };
};

// 设置示例的标题和适用版本
Example.catapult.title = 'Catapult';
Example.catapult.for = '>=0.14.2';

// 如果模块系统存在，导出 Example.catapult
if (typeof module !== 'undefined') {
    module.exports = Example.catapult;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.

var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Composites = Matter.Composites,
    Constraint = Matter.Constraint,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    Composite = Matter.Composite,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Vector = Matter.Vector;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

var engine = Engine.create(),
    world = engine.world;
engine.world.gravity.y = 2;
1.
2.
3.

var render = Render.create({
    element: document.body,
    engine: engine,
    options: {
        width: window.innerWidth,
        height: window.innerHeight,
        wireframes: false
    }
});
Render.run(render);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

var runner = Runner.create();
Runner.run(runner, engine);
1.
2.

var numBlocks = Math.max(1, Math.min(config.numBlocks || 6, 10));
var blockDensity = config.blockDensity || 1;
var sphereDensity = config.sphereDensity || 0.005;
1.
2.
3.

var group = Body.nextGroup(true);
var stack = Composites.stack(250, 255, 1, numBlocks, 0, 0, function(x, y) {
    return Bodies.rectangle(x, y, 30, 30, {
        density: blockDensity,
        render: { fillStyle: randomColor() }
    });
});
1.
2.
3.
4.
5.
6.
7.

var catapult = Bodies.rectangle(400, 520, 320, 20, { collisionFilter: { group: group } });
1.

Composite.add(world, [
    stack,
    catapult,
    Bodies.rectangle(window.innerWidth / 2, 600, window.innerWidth, 50.5, { isStatic: true, render: { fillStyle: '#060a19' } }),
    Bodies.rectangle(250, 555, 20, 50, { isStatic: true, render: { fillStyle: '#00ffff' } }),
    Bodies.rectangle(400, 535, 20, 80, { isStatic: true, collisionFilter: { group: group }, render: { fillStyle: '#ff00ff' } }),
    Bodies.circle(560, 100, 50, {
        density: sphereDensity,
        render: { fillStyle: 'red' }
    }),
    Constraint.create({
        bodyA: catapult,
        pointB: Vector.clone(catapult.position),
        stiffness: 1,
        length: 0
    })
]);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

var mouse = Mouse.create(render.canvas),
    mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: {
            stiffness: 0.2,
            render: {
                visible: false
            }
        }
    });
Composite.add(world, mouseConstraint);
render.mouse = mouse;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Render.lookAt(render, {
    min: { x: 0, y: 0 },
    max: { x: 800, y: 600 }
});
1.
2.
3.
4.