一、设计思路二元一次方程组的几何意义就是两条直线的交点。本页做成直线可视化求解器输入两条直线 y k₁x b₁、y k₂x b₂代码算出交点坐标Canvas 同时画出两条直线并标记交点斜率截距不同的组合自动给出唯一解 / 无解 / 无穷多解三种结论让解的数量变成看得见的几何关系。二、状态与求解逻辑含三种解判定import{router}fromkit.ArkUI;interfacePixel{px:number;py:number;}EntryComponentstruct BinaryEquation{Statek1:number1;// 直线1 斜率Stateb1:number0;// 直线1 截距Statek2:number-1;// 直线2 斜率Stateb2:number4;// 直线2 截距StatesolutionState:string唯一解;Statesolution:stringx 2.00, y 2.00;privatesettings:RenderingContextSettingsnewRenderingContextSettings(true);privatectx:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings);// 解方程组两式相减消 y得 (k1 - k2)x b2 - b1privatesolve():void{constdthis.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;constythis.k1*xthis.b1;this.solutionState唯一解;this.solutionx x.toFixed(2), y y.toFixed(2);}}privateyOf1(x:number):number{returnthis.k1*xthis.b1;}privateyOf2(x:number):number{returnthis.k2*xthis.b2;}}三、三种解的判定逻辑表k₁ 与 k₂b₁ 与 b₂几何关系解的数量k₁ ≠ k₂任意两条直线相交唯一解交点坐标k₁ k₂b₁ ≠ b₂平行无解k₁ k₂b₁ b₂完全重合无穷多解代码用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{constctxthis.ctx;constwctx.width;consthctx.height;ctx.clearRect(0,0,w,h);// 网格与坐标轴与一元页同构略// 直线1蓝取 x ±6 两端点连线constlp1athis.toPixel(-this.xRange,this.yOf1(-this.xRange),w,h);constlp1bthis.toPixel(this.xRange,this.yOf1(this.xRange),w,h);ctx.strokeStyle#4C7DFF;ctx.lineWidth3;ctx.beginPath();ctx.moveTo(lp1a.px,lp1a.py);ctx.lineTo(lp1b.px,lp1b.py);ctx.stroke();// 直线2橙同上constlp2athis.toPixel(-this.xRange,this.yOf2(-this.xRange),w,h);constlp2bthis.toPixel(this.xRange,this.yOf2(this.xRange),w,h);ctx.strokeStyle#F59E0B;ctx.lineWidth3;ctx.beginPath();ctx.moveTo(lp2a.px,lp2a.py);ctx.lineTo(lp2b.px,lp2b.py);ctx.stroke();// 交点仅唯一解时绘制红色圆点 坐标标签constdthis.k1-this.k2;if(Math.abs(d)0.0001){constx(this.b2-this.b1)/d;constythis.k1*xthis.b1;constipthis.toPixel(x,y,w,h);ctx.beginPath();ctx.arc(ip.px,ip.py,6,0,Math.PI*2);ctx.fillStyle#EF4444;ctx.fill();ctx.strokeStyleColor.White;ctx.lineWidth2;ctx.stroke();ctx.fillStyle#EF4444;ctx.fillText((x.toFixed(1), y.toFixed(1)),ip.px12,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.k1Number(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.b1Number(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 分别用蓝、橙双色交点用红点 白描边 坐标标签视觉层次清晰。七、二元一次方程组核心知识点要点内容定义含有两个未知数且未知数次数都为 1 的两个方程合在一起几何意义每个方程是一条直线方程组的解 两直线的交点代入法用一个方程解出 x或 y代入另一个方程消元加减法两式相加减消去一个未知数系数相等或相反时最方便解的情况相交唯一解、平行无解、重合无穷多解检验把解代入两个方程都成立才是正确解易错平行 ≠ 重合消元时注意符号变化口诀二元方程两条线交点坐标就是解k 同 b 异两平行k 同 b 同无数解