鸿蒙 ArkTS 实战｜二元一次方程组应用：两直线交点求解 + 三种解的可视化判定

一、设计思路

二元一次方程组的几何意义就是两条直线的交点。本页做成"直线可视化求解器"：输入两条直线 y = k₁x + b₁、y = k₂x + b₂，代码算出交点坐标，Canvas 同时画出两条直线并标记交点；斜率截距不同的组合，自动给出唯一解 / 无解 / 无穷多解三种结论，让"解的数量"变成看得见的几何关系。

二、状态与求解逻辑（含三种解判定）

import{router}from'@kit.ArkUI';interfacePixel{px:number;py:number;}@Entry@Componentstruct BinaryEquation{@Statek1:number=1;// 直线1 斜率@Stateb1:number=0;// 直线1 截距@Statek2:number=-1;// 直线2 斜率@Stateb2:number=4;// 直线2 截距@StatesolutionState:string='唯一解';@Statesolution:string='x = 2.00, y = 2.00';privatesettings:RenderingContextSettings=newRenderingContextSettings(true);privatectx:CanvasRenderingContext2D=newCanvasRenderingContext2D(this.settings);// 解方程组：两式相减消 y，得 (k1 - k2)x = b2 - b1privatesolve():void{constd=this.k1-this.k2;if(Math.abs(d)<0.0001){// k 相等：斜率相同 → 平行或重合if(Math.abs(this.b1-this.b2)<0.0001){this.solutionState='重合 · 无穷多解';this.solution='两条直线完全重合，处处都是解';}else{this.solutionState='平行 · 无解';this.solution='两条直线平行，永不相交';}}else{// k 不等：必然相交，交点即唯一解constx=(this.b2-this.b1)/d;consty=this.k1*x+this.b1;this.solutionState='唯一解';this.solution='x = '+x.toFixed(2)+', y = '+y.toFixed(2);}}privateyOf1(x:number):number{returnthis.k1*x+this.b1;}privateyOf2(x:number):number{returnthis.k2*x+this.b2;}}

三、三种解的判定逻辑表

代码用Math.abs(d) < 0.0001做浮点相等判断（而不是===），避免因浮点误差把"相等"误判为"不等"。

四、Canvas 绘制两条直线与交点

// 世界坐标 → 画布像素（画布中心即原点）privatetoPixel(x:number,y:number,w:number,h:number):Pixel{return{px:w/2+(x/this.xRange)*(w/2),py:h/2-(y/this.yRange)*(h/2)};}privatedrawLines():void{constctx=this.ctx;constw=ctx.width;consth=ctx.height;ctx.clearRect(0,0,w,h);// 网格与坐标轴（与一元页同构，略）// 直线1（蓝）：取 x = ±6 两端点连线constlp1a=this.toPixel(-this.xRange,this.yOf1(-this.xRange),w,h);constlp1b=this.toPixel(this.xRange,this.yOf1(this.xRange),w,h);ctx.strokeStyle='#4C7DFF';ctx.lineWidth=3;ctx.beginPath();ctx.moveTo(lp1a.px,lp1a.py);ctx.lineTo(lp1b.px,lp1b.py);ctx.stroke();// 直线2（橙）：同上constlp2a=this.toPixel(-this.xRange,this.yOf2(-this.xRange),w,h);constlp2b=this.toPixel(this.xRange,this.yOf2(this.xRange),w,h);ctx.strokeStyle='#F59E0B';ctx.lineWidth=3;ctx.beginPath();ctx.moveTo(lp2a.px,lp2a.py);ctx.lineTo(lp2b.px,lp2b.py);ctx.stroke();// 交点：仅唯一解时绘制红色圆点 + 坐标标签constd=this.k1-this.k2;if(Math.abs(d)>=0.0001){constx=(this.b2-this.b1)/d;consty=this.k1*x+this.b1;constip=this.toPixel(x,y,w,h);ctx.beginPath();ctx.arc(ip.px,ip.py,6,0,Math.PI*2);ctx.fillStyle='#EF4444';ctx.fill();ctx.strokeStyle=Color.White;ctx.lineWidth=2;ctx.stroke();ctx.fillStyle='#EF4444';ctx.fillText('('+x.toFixed(1)+', '+y.toFixed(1)+')',ip.px+12,ip.py-10);}}

五、UI 组装（四参数输入 + 解结果卡）

build(){Column(){// 顶部标题栏（略）Scroll(){Column({space:14}){// 方程组公式卡Text('y = k₁x + b₁ / y = k₂x + b₂').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#7C3AED').width('100%').textAlign(TextAlign.Center)// 两直线 + 交点Canvas(this.ctx).width('100%').height(230).onReady(()=>{this.drawLines();})// 解结果卡（自动刷新）Row({space:10}){Text(this.solutionState).fontSize(13).fontColor(Color.White).backgroundColor('#7C3AED').padding({left:10,right:10,top:4,bottom:4}).borderRadius(10)Text(this.solution).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#111827')}.width('100%')// 四参数输入区：改任一参数 → solve() + drawLines()Row({space:10}){Text('k₁ =').fontSize(14).fontColor('#111827')TextInput({text:this.k1.toString()}).width(70).height(36).type(InputType.Number).onChange((v:string)=>{this.k1=Number(v)||0;this.solve();this.drawLines();})Text('b₁ =').fontSize(14).fontColor('#111827')TextInput({text:this.b1.toString()}).width(70).height(36).type(InputType.Number).onChange((v:string)=>{this.b1=Number(v)||0;this.solve();this.drawLines();})Blank()}.width('100%')// k₂、b₂ 输入行同构（略）}.padding(14)}.layoutWeight(1).scrollBar(BarState.Off)}.height('100%').width('100%').backgroundColor('#F4F6FA')}

六、代码要点

• 消元思想代码化：(k1 - k2)x = b2 - b1正是加减消元法的代码形态，x = (b2 - b1) / (k1 - k2)。
• 浮点容差：斜率差用Math.abs(d) < 0.0001判断，而不是直接d === 0，杜绝浮点误差误判。
• 几何到代数闭环：改参数 →solve()算解 →drawLines()画交点，图形与文字永远一致。
• 两直线一画：直线1、直线2 分别用蓝、橙双色，交点用红点 + 白描边 + 坐标标签，视觉层次清晰。

七、二元一次方程组核心知识点