一、设计思路杠杆是力学第一课核心只有一条公式F₁ × L₁ F₂ × L₂。它的技术点在于①公式反推计算由平衡条件求所需动力②按力臂长短自动判定省力/费力/等臂三类杠杆③用Canvas 2D动态画出支点、横杆、力臂与双向力箭头让抽象力学可视化。页面里输入力臂和阻力点击计算即得结果示意图同步刷新。二、数据模型与核心计算页面内逻辑import{router}fromkit.ArkUI;// 计算结果的数据结构力 杠杆类型 实例 说明interfaceLeverResult{force:string;// 计算出的动力 F1type:string;// 省力杠杆 / 费力杠杆 / 等臂杠杆example:string;// 对应生活实例tip:string;// 判定说明}EntryComponentstruct Lever{// 三个输入参数动力臂、阻力臂、阻力 —— State 驱动计算与重绘StateeffortArm:string20;// 动力臂 L1cmStateloadArm:string10;// 阻力臂 L2cmStateloadForce:string100;// 阻力 F2NStateresult:LeverResult{force:50.0 N,type:省力杠杆,example:撬棒、开瓶器、羊角锤、铡刀,tip:动力臂 20cm 阻力臂 10cm省力但费距离};// Canvas 2D 上下文RenderingContextSettings 开启抗锯齿privatesettings:RenderingContextSettingsnewRenderingContextSettings(true);privatectx:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings);// 核心计算由平衡条件反推动力 F1 F2 × L2 / L1privatecalculate():void{constl1Number(this.effortArm);constl2Number(this.loadArm);constf2Number(this.loadForce);if(l10||l20||f20){this.result{force:输入无效,type:,example:,tip:力臂与力必须为正数};return;}constf1f2*l2/l1;lettype;letexample;lettip;if(l1l2){type省力杠杆;example撬棒、开瓶器、羊角锤、铡刀;tip动力臂(L1${l1}cm) 阻力臂(L2${l2}cm)省力但费距离;}elseif(l1l2){type费力杠杆;example钓鱼竿、镊子、筷子、船桨;tip动力臂(L1${l1}cm) 阻力臂(L2${l2}cm)费力但省距离;}else{type等臂杠杆;example天平、定滑轮可视为等臂杠杆;tip动力臂 阻力臂 ${l1}cm不省力也不费力;}this.result{force:f1.toFixed(1) N,type,example,tip};}}三、Canvas 绘制杠杆示意图// Canvas 绘制杠杆支点 横杆 两端力箭头privatedraw():void{constctxthis.ctx;constwctx.width;// Canvas 实际像素宽自适应屏幕consthctx.height;ctx.clearRect(0,0,w,h);constcyh*0.62;// 横杆粗线ctx.strokeStyle#4C7DFF;ctx.lineWidth10;ctx.beginPath();ctx.moveTo(w*0.14,cy);ctx.lineTo(w*0.86,cy);ctx.stroke();// 支点三角形位于中间ctx.fillStyle#6B7280;ctx.beginPath();ctx.moveTo(w*0.5,cy-6);ctx.lineTo(w*0.5-16,cy26);ctx.lineTo(w*0.516,cy26);ctx.closePath();ctx.fill();ctx.fillRect(w*0.5-30,cy24,60,6);// 底座// 动力箭头左端向上与阻力箭头右端向下this.arrow(w*0.14,cy26,w*0.14,cy-60,#10B981);this.label(F₁ 动力,w*0.14,cy-72,#10B981);this.arrow(w*0.86,cy-26,w*0.86,cy58,#EF4444);this.label(F₂ 阻力,w*0.86,cy74,#EF4444);}// 通用箭头绘制线段 箭头头部atan2 计算方向角privatearrow(fromX:number,fromY:number,toX:number,toY:number,color:string):void{constctxthis.ctx;ctx.strokeStylecolor;ctx.lineWidth3;ctx.beginPath();ctx.moveTo(fromX,fromY);ctx.lineTo(toX,toY);ctx.stroke();constangleMath.atan2(toY-fromY,toX-fromX);consthead9;ctx.beginPath();ctx.moveTo(toX,toY);ctx.lineTo(toX-head*Math.cos(angle-Math.PI/6),toY-head*Math.sin(angle-Math.PI/6));ctx.moveTo(toX,toY);ctx.lineTo(toX-head*Math.cos(angleMath.PI/6),toY-head*Math.sin(angleMath.PI/6));ctx.stroke();}privatelabel(text:string,x:number,y:number,color:string):void{constctxthis.ctx;ctx.fillStylecolor;ctx.font13px sans-serif;ctx.textAligncenter;ctx.fillText(text,x,y);}四、UI 组装输入区 计算按钮 结果卡build(){Column(){// 顶部标题栏返回 标题Row(){Text(‹).fontSize(34).fontColor(Color.White).onClick(()router.back())Text(杠杆 · 平衡条件).fontSize(19).fontWeight(FontWeight.Bold).fontColor(Color.White).margin({left:8})Blank()}.width(100%).height(56).padding({left:10,right:16}).backgroundColor(#10B981)Scroll(){Column({space:14}){// 公式卡Column({space:6}){Text(平衡条件).fontSize(12).fontColor(#9CA3AF).width(100%)Text(F₁ × L₁ F₂ × L₂).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#10B981).width(100%).textAlign(TextAlign.Center)}.width(100%).padding(16).borderRadius(16).backgroundColor(Color.White).border({width:1,color:#E5EAF2})// 示意图Canvas 挂到页面onReady 时首绘Canvas(this.ctx).width(100%).height(200).onReady((){this.draw();})// 三个参数输入行Column({space:12}){Row({space:10}){Text(动力臂 L₁(cm)).fontSize(14).fontColor(#111827).layoutWeight(1)TextInput({text:this.effortArm}).width(110).height(36).type(InputType.Number).onChange((v:string){this.effortArmv;})}.width(100%)// 阻力臂、阻力输入行同理略Button(计算所需动力 F₁).width(100%).height(42).backgroundColor(#10B981).onClick((){this.calculate();// 更新结果this.draw();// 重绘示意图力臂标注同步})}.width(100%).padding(16).borderRadius(16).backgroundColor(Color.White).border({width:1,color:#E5EAF2})// 结果卡State result 变化自动刷新Column({space:8}){Text(计算结果).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%)Row({space:12}){Text(this.result.force).fontSize(26).fontWeight(FontWeight.Bold).fontColor(#10B981)Text(this.result.type).fontSize(13).fontColor(Color.White).backgroundColor(#10B981).padding({left:10,right:10,top:3,bottom:3}).borderRadius(10)}.width(100%).margin({top:4})Text(实例this.result.example).fontSize(13).fontColor(#4B5563).width(100%).lineHeight(20)Text( this.result.tip).fontSize(13).fontColor(#B45309).width(100%).lineHeight(20)}.width(100%).padding(16).borderRadius(16).backgroundColor(#E6FFF9).border({width:1,color:#A7F3D0})}.padding(14)}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).width(100%).backgroundColor(#F4F6FA)}五、代码要点公式反推f1 f2 * l2 / l1一行实现平衡条件求解Number()把输入字符串转数值toFixed(1)保留一位小数。条件判定l1 l2→ 省力l1 l2→ 费力相等 → 等臂三类杠杆一次判定。Canvas 自适应坐标全部用w * 0.xx比例计算任何屏宽下不变形atan2算箭头方向角。声明式刷新State result变化后结果卡自动重绘draw()手动同步示意图。六、杠杆核心知识点要点内容定义一根在力的作用下能绕固定点转动的硬棒五要素支点 O、动力 F₁、阻力 F₂、动力臂 L₁、阻力臂 L₂平衡条件F₁ × L₁ F₂ × L₂杠杆平衡 匀速转动或静止省力杠杆L₁ L₂撬棒、开瓶器、羊角锤、铡刀、指甲剪费距离费力杠杆L₁ L₂钓鱼竿、镊子、筷子、船桨、理发剪省距离等臂杠杆L₁ L₂天平、定滑轮不省力不费力易错力臂是支点到力的作用线的距离不是支点到作用点的距离口诀动力臂长省力费距离动力臂短费力省距离 
长河君 · 2026/8/25 23:12:28 · 阅读 1.2k 鸿蒙 ArkTS 实战｜杠杆平衡计算器：Canvas 画力学示意 + 三类杠杆判定
一、设计思路杠杆是力学第一课核心只有一条公式F₁ × L₁ F₂ × L₂。它的技术点在于①公式反推计算由平衡条件求所需动力②按力臂长短自动判定省力/费力/等臂三类杠杆③用Canvas 2D动态画出支点、横杆、力臂与双向力箭头让抽象力学可视化。页面里输入力臂和阻力点击计算即得结果示意图同步刷新。二、数据模型与核心计算页面内逻辑import{router}fromkit.ArkUI;// 计算结果的数据结构力 杠杆类型 实例 说明interfaceLeverResult{force:string;// 计算出的动力 F1type:string;// 省力杠杆 / 费力杠杆 / 等臂杠杆example:string;// 对应生活实例tip:string;// 判定说明}EntryComponentstruct Lever{// 三个输入参数动力臂、阻力臂、阻力 —— State 驱动计算与重绘StateeffortArm:string20;// 动力臂 L1cmStateloadArm:string10;// 阻力臂 L2cmStateloadForce:string100;// 阻力 F2NStateresult:LeverResult{force:50.0 N,type:省力杠杆,example:撬棒、开瓶器、羊角锤、铡刀,tip:动力臂 20cm 阻力臂 10cm省力但费距离};// Canvas 2D 上下文RenderingContextSettings 开启抗锯齿privatesettings:RenderingContextSettingsnewRenderingContextSettings(true);privatectx:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings);// 核心计算由平衡条件反推动力 F1 F2 × L2 / L1privatecalculate():void{constl1Number(this.effortArm);constl2Number(this.loadArm);constf2Number(this.loadForce);if(l10||l20||f20){this.result{force:输入无效,type:,example:,tip:力臂与力必须为正数};return;}constf1f2*l2/l1;lettype;letexample;lettip;if(l1l2){type省力杠杆;example撬棒、开瓶器、羊角锤、铡刀;tip动力臂(L1${l1}cm) 阻力臂(L2${l2}cm)省力但费距离;}elseif(l1l2){type费力杠杆;example钓鱼竿、镊子、筷子、船桨;tip动力臂(L1${l1}cm) 阻力臂(L2${l2}cm)费力但省距离;}else{type等臂杠杆;example天平、定滑轮可视为等臂杠杆;tip动力臂 阻力臂 ${l1}cm不省力也不费力;}this.result{force:f1.toFixed(1) N,type,example,tip};}}三、Canvas 绘制杠杆示意图// Canvas 绘制杠杆支点 横杆 两端力箭头privatedraw():void{constctxthis.ctx;constwctx.width;// Canvas 实际像素宽自适应屏幕consthctx.height;ctx.clearRect(0,0,w,h);constcyh*0.62;// 横杆粗线ctx.strokeStyle#4C7DFF;ctx.lineWidth10;ctx.beginPath();ctx.moveTo(w*0.14,cy);ctx.lineTo(w*0.86,cy);ctx.stroke();// 支点三角形位于中间ctx.fillStyle#6B7280;ctx.beginPath();ctx.moveTo(w*0.5,cy-6);ctx.lineTo(w*0.5-16,cy26);ctx.lineTo(w*0.516,cy26);ctx.closePath();ctx.fill();ctx.fillRect(w*0.5-30,cy24,60,6);// 底座// 动力箭头左端向上与阻力箭头右端向下this.arrow(w*0.14,cy26,w*0.14,cy-60,#10B981);this.label(F₁ 动力,w*0.14,cy-72,#10B981);this.arrow(w*0.86,cy-26,w*0.86,cy58,#EF4444);this.label(F₂ 阻力,w*0.86,cy74,#EF4444);}// 通用箭头绘制线段 箭头头部atan2 计算方向角privatearrow(fromX:number,fromY:number,toX:number,toY:number,color:string):void{constctxthis.ctx;ctx.strokeStylecolor;ctx.lineWidth3;ctx.beginPath();ctx.moveTo(fromX,fromY);ctx.lineTo(toX,toY);ctx.stroke();constangleMath.atan2(toY-fromY,toX-fromX);consthead9;ctx.beginPath();ctx.moveTo(toX,toY);ctx.lineTo(toX-head*Math.cos(angle-Math.PI/6),toY-head*Math.sin(angle-Math.PI/6));ctx.moveTo(toX,toY);ctx.lineTo(toX-head*Math.cos(angleMath.PI/6),toY-head*Math.sin(angleMath.PI/6));ctx.stroke();}privatelabel(text:string,x:number,y:number,color:string):void{constctxthis.ctx;ctx.fillStylecolor;ctx.font13px sans-serif;ctx.textAligncenter;ctx.fillText(text,x,y);}四、UI 组装输入区 计算按钮 结果卡build(){Column(){// 顶部标题栏返回 标题Row(){Text(‹).fontSize(34).fontColor(Color.White).onClick(()router.back())Text(杠杆 · 平衡条件).fontSize(19).fontWeight(FontWeight.Bold).fontColor(Color.White).margin({left:8})Blank()}.width(100%).height(56).padding({left:10,right:16}).backgroundColor(#10B981)Scroll(){Column({space:14}){// 公式卡Column({space:6}){Text(平衡条件).fontSize(12).fontColor(#9CA3AF).width(100%)Text(F₁ × L₁ F₂ × L₂).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#10B981).width(100%).textAlign(TextAlign.Center)}.width(100%).padding(16).borderRadius(16).backgroundColor(Color.White).border({width:1,color:#E5EAF2})// 示意图Canvas 挂到页面onReady 时首绘Canvas(this.ctx).width(100%).height(200).onReady((){this.draw();})// 三个参数输入行Column({space:12}){Row({space:10}){Text(动力臂 L₁(cm)).fontSize(14).fontColor(#111827).layoutWeight(1)TextInput({text:this.effortArm}).width(110).height(36).type(InputType.Number).onChange((v:string){this.effortArmv;})}.width(100%)// 阻力臂、阻力输入行同理略Button(计算所需动力 F₁).width(100%).height(42).backgroundColor(#10B981).onClick((){this.calculate();// 更新结果this.draw();// 重绘示意图力臂标注同步})}.width(100%).padding(16).borderRadius(16).backgroundColor(Color.White).border({width:1,color:#E5EAF2})// 结果卡State result 变化自动刷新Column({space:8}){Text(计算结果).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%)Row({space:12}){Text(this.result.force).fontSize(26).fontWeight(FontWeight.Bold).fontColor(#10B981)Text(this.result.type).fontSize(13).fontColor(Color.White).backgroundColor(#10B981).padding({left:10,right:10,top:3,bottom:3}).borderRadius(10)}.width(100%).margin({top:4})Text(实例this.result.example).fontSize(13).fontColor(#4B5563).width(100%).lineHeight(20)Text( this.result.tip).fontSize(13).fontColor(#B45309).width(100%).lineHeight(20)}.width(100%).padding(16).borderRadius(16).backgroundColor(#E6FFF9).border({width:1,color:#A7F3D0})}.padding(14)}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).width(100%).backgroundColor(#F4F6FA)}五、代码要点公式反推f1 f2 * l2 / l1一行实现平衡条件求解Number()把输入字符串转数值toFixed(1)保留一位小数。条件判定l1 l2→ 省力l1 l2→ 费力相等 → 等臂三类杠杆一次判定。Canvas 自适应坐标全部用w * 0.xx比例计算任何屏宽下不变形atan2算箭头方向角。声明式刷新State result变化后结果卡自动重绘draw()手动同步示意图。六、杠杆核心知识点要点内容定义一根在力的作用下能绕固定点转动的硬棒五要素支点 O、动力 F₁、阻力 F₂、动力臂 L₁、阻力臂 L₂平衡条件F₁ × L₁ F₂ × L₂杠杆平衡 匀速转动或静止省力杠杆L₁ L₂撬棒、开瓶器、羊角锤、铡刀、指甲剪费距离费力杠杆L₁ L₂钓鱼竿、镊子、筷子、船桨、理发剪省距离等臂杠杆L₁ L₂天平、定滑轮不省力不费力易错力臂是支点到力的作用线的距离不是支点到作用点的距离口诀动力臂长省力费距离动力臂短费力省距离