一、设计思路定滑轮的特点一句话概括不省力、不省距离但改变力的方向。技术演示的重点是方向改变——做一个下拉/上拉的状态开关物体上升/下降随拉力方向切换同时 Canvas 上的拉力箭头与物体运动提示实时变化。物重可选20/50/100/200N结论卡动态显示拉力 物重。二、状态与核心计算import{router}fromkit.ArkUI;EntryComponentstruct FixedPulley{Stateweight:number50;// 物重 GN—— 可选按钮切换StatepullDown:booleantrue;// true向下拉绳 / false向上拉绳StateobjectY:number0;// 物体位移状态预留动画扩展位privatesettings:RenderingContextSettingsnewRenderingContextSettings(true);privatectx:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings);// 定滑轮核心规律F G方向改变一次privatepullForce():string{returnthis.weight N 物重不省力;}}三、Canvas 绘制定滑轮结构privatedraw():void{constctxthis.ctx;constwctx.width;consthctx.height;ctx.clearRect(0,0,w,h);constcxw*0.5;constcy70;// 天花板横梁ctx.strokeStyle#9CA3AF;ctx.lineWidth3;ctx.beginPath();ctx.moveTo(w*0.08,26);ctx.lineTo(w*0.92,26);ctx.stroke();// 悬挂绳轮中心 → 天花板ctx.beginPath();ctx.moveTo(cx,26);ctx.lineTo(cx,cy-26);ctx.stroke();// 滑轮圆与中心轴ctx.strokeStyle#F59E0B;ctx.lineWidth4;ctx.beginPath();ctx.arc(cx,cy,26,0,Math.PI*2);ctx.stroke();ctx.fillStyle#F59E0B;ctx.beginPath();ctx.arc(cx,cy,5,0,Math.PI*2);ctx.fill();// 绳子左端下垂挂物体右端下垂供手拉ctx.strokeStyle#4C7DFF;ctx.lineWidth3;constropeEndYh-64;ctx.beginPath();ctx.moveTo(cx-26,cy);ctx.lineTo(cx-26,ropeEndY);// 左绳ctx.moveTo(cx26,cy);ctx.lineTo(cx26,ropeEndY);// 右绳ctx.stroke();// 物体挂在左端矩形 物重文字ctx.fillStyle#6B7280;ctx.fillRect(cx-26-16,ropeEndY-4,32,30);ctx.fillStyleColor.White;ctx.font12px sans-serif;ctx.textAligncenter;ctx.fillText(Gthis.weightN,cx-26,ropeEndY18);// 拉力箭头方向由 pullDown 状态决定核心演示点if(this.pullDown){this.arrow(cx26,ropeEndY-16,cx26,ropeEndY34,#10B981);ctx.fillStyle#10B981;ctx.fillText(F 向下拉,cx26,ropeEndY52);}else{this.arrow(cx26,ropeEndY26,cx26,ropeEndY-24,#10B981);ctx.fillStyle#10B981;ctx.fillText(F 向上拉,cx26,ropeEndY-34);}// 物体运动方向提示向下拉绳 → 物体上升ctx.fillStyle#EF4444;ctx.fillText(this.pullDown?物体上升 ↑:物体下降 ↓,cx-26,ropeEndY-18);}四、UI 交互物重选择 方向切换build(){Column(){// 顶部标题栏略Scroll(){Column({space:14}){// 公式卡Text(F G S h不省力不省距离).fontSize(19).fontWeight(FontWeight.Bold).fontColor(#D97706).width(100%).textAlign(TextAlign.Center)// 滑轮示意图Canvas(this.ctx).width(100%).height(220).onReady((){this.draw();})// 物重选择ForEach 渲染按钮组选中高亮Row({space:8}){Text(物重 G).fontSize(14).fontColor(#111827)ForEach([20,50,100,200],(g:string){Button(g N).height(34).fontSize(13).backgroundColor(Number(g)this.weight?#F59E0B:#E5EAF2).fontColor(Number(g)this.weight?Color.White:#374151).onClick((){this.weightNumber(g);// 改 State → 结论卡自动刷新this.draw();// 重绘物体上的物重文字})},(g:string)g)}.width(100%)// 方向切换翻转 pullDown重绘箭头与物体方向Button(this.pullDown?改为向上拉绳 ↕:改为向下拉绳 ↕).width(100%).height(42).backgroundColor(#D97706).onClick((){this.pullDown!this.pullDown;this.draw();})// 结论卡声明式自动刷新Column({space:8}){Text( 结论).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%)Text(拉力${this.pullForce()}).fontSize(14).fontColor(#111827).width(100%)Text(无论物重多少拉力恒等于物重 → 不省力).fontSize(13).fontColor(#4B5563).width(100%)Text(改变方向向下拉绳物体反而上升 → 改变力的方向).fontSize(13).fontColor(#B45309).width(100%)}.width(100%).padding(16).borderRadius(16).backgroundColor(#FFF7E6).border({width:1,color:#FDEBC8})}.padding(14)}.layoutWeight(1).scrollBar(BarState.Off)}.height(100%).width(100%).backgroundColor(#F4F6FA)}五、代码要点状态即规律State pullDown直接对应力的方向Canvas 箭头与物体运动提示由它推导无需额外变量。Canvas 结构绘制arc()画轮、fillRect()画物体、moveTo/lineTo画绳子几何关系全在坐标里。ForEach 按钮组选中项变色用三元表达式Number(g) this.weight ? 高亮 : 普通key 用字符串本身。手动重绘时机onReady首绘按钮点击后手动调draw()而结论卡靠State自动刷新——两种刷新方式配合使用。六、定滑轮核心知识点要点内容特点不省力F G、不省距离S h、能改变力的方向本质等臂杠杆支点在轮中心动力臂 阻力臂 轮半径应用旗杆顶部、起重机吊臂、滑轮组中的方向改变部分易错定滑轮不省力指拉力 物重但可站在地面向下拉绳让物体上升口诀定滑轮方向改力不变距离全