diff --git a/frontend/textbooks/geometry_7_ch1.html b/frontend/textbooks/geometry_7_ch1.html index bfd6c3b..dfaa864 100644 --- a/frontend/textbooks/geometry_7_ch1.html +++ b/frontend/textbooks/geometry_7_ch1.html @@ -974,18 +974,39 @@ function buildP5(){ /* SVG: 4 угла — острый, прямой, тупой, развёрнутый */ function angleViz(deg, color, label){ if(!G) return ''; - const b=G.svgBox(140,120,{id:'p5-a-'+deg,cell:20}); - const V={x:30,y:90}; - const A={x:120,y:90}; + const b=G.svgBox(180,150,{id:'p5-a-'+deg,cell:20}); + const V={x:40,y:115}; + const A={x:160,y:115}; const rad=deg*Math.PI/180; - const B={x:V.x+85*Math.cos(-rad), y:V.y-85*Math.sin(rad)}; + const Bd = 110; + const B={x:V.x+Bd*Math.cos(-rad), y:V.y-Bd*Math.sin(rad)}; let s=b.open; - s += G.segment(V,A,{color:'#0891b2',width:2}); - s += G.segment(V,B,{color:'#0891b2',width:2}); - if(deg===90) s += G.rightAngleMark(V,A,B,{color:'#dc2626',size:12}); - else s += G.angle(V,A,B,{color:color,r:22,label:deg+'°',fontSize:11,labelOffset:14}); - s += G.point(V.x,V.y,'',{r:3,color:'#0891b2'}); - s += ''+label+''; + /* Заливка-сектор для наглядности */ + if(deg < 180){ + const wR = 36; + const a1 = 0; + const a2 = -rad; + let d=a2-a1; while(d>Math.PI) d-=2*Math.PI; while(d<-Math.PI) d+=2*Math.PI; + const sweep=d>0?1:0; + const large=Math.abs(d)>Math.PI?1:0; + const x1=V.x+wR*Math.cos(a1), y1=V.y+wR*Math.sin(a1); + const x2=V.x+wR*Math.cos(a2), y2=V.y+wR*Math.sin(a2); + s += ''; + } else if(deg === 180){ + /* Развёрнутый — закрашиваем полукруг */ + s += ''; + } + /* Стороны угла */ + s += G.segment(V,A,{color:'#0891b2',width:2.6}); + s += G.segment(V,B,{color:'#0891b2',width:2.6}); + /* Дуга/метка прямого угла */ + if(deg===90) s += G.rightAngleMark(V,A,B,{color:'#dc2626',size:14}); + else if(deg !== 180) s += G.angle(V,A,B,{color:color,r:26,width:2,label:deg+'°',fontSize:13,labelOffset:14}); + else s += '180°'; + /* Вершина */ + s += G.point(V.x,V.y,'',{r:4,color:'#0891b2'}); + /* Подпись */ + s += ''+label+''; s += b.close; return s; } @@ -1131,17 +1152,40 @@ function buildP6(){ + G.point(V.x,V.y,'O',{color:'#475569',dx:-12,dy:18}) + 'α + β = 180\xB0' + b.close; - const b2=G.svgBox(260,180,{id:'p6-vert',cell:20}); - const O={x:130,y:90}; + const b2=G.svgBox(320,230,{id:'p6-vert',cell:20}); + const O={x:160,y:115}; + /* Полупрозрачные заливки секторов (для наглядности 4 углов) */ + function wedge(V, p1, p2, r, fill){ + const a1=Math.atan2(p1.y-V.y, p1.x-V.x); + const a2=Math.atan2(p2.y-V.y, p2.x-V.x); + let d=a2-a1; while(d>Math.PI) d-=2*Math.PI; while(d<-Math.PI) d+=2*Math.PI; + const sweep=d>0?1:0; + const large=Math.abs(d)>Math.PI?1:0; + const x1=V.x+r*Math.cos(a1), y1=V.y+r*Math.sin(a1); + const x2=V.x+r*Math.cos(a2), y2=V.y+r*Math.sin(a2); + return ''; + } + const P_R1={x:295,y:50}, P_R2={x:295,y:180}, P_L1={x:30,y:50}, P_L2={x:30,y:180}; svgVert = b2.open - + G.line({x:30,y:30},{x:230,y:150},{color:'#0891b2',width:2}) - + G.line({x:30,y:150},{x:230,y:30},{color:'#7c3aed',width:2}) - + G.angle(O,{x:230,y:150},{x:230,y:30},{color:'#dc2626',r:24,label:'1',fontSize:12}) - + G.angle(O,{x:30,y:150},{x:30,y:30},{color:'#dc2626',r:24,label:'2',fontSize:12}) - + G.angle(O,{x:230,y:30},{x:30,y:30},{color:'#f59e0b',r:36,label:'3',fontSize:12}) - + G.angle(O,{x:230,y:150},{x:30,y:150},{color:'#f59e0b',r:36,label:'4',fontSize:12}) - + G.point(O.x,O.y,'O',{color:'#475569',dx:8,dy:-6}) - + '∠1 = ∠2 (вертик.)' + /* 4 цветных сектора как фон */ + + wedge(O, P_R2, P_R1, 28, 'rgba(220,38,38,.16)') /* ∠1 right */ + + wedge(O, P_L1, P_L2, 28, 'rgba(220,38,38,.16)') /* ∠2 left */ + + wedge(O, P_R1, P_L1, 28, 'rgba(234,88,12,.16)') /* ∠3 top */ + + wedge(O, P_L2, P_R2, 28, 'rgba(234,88,12,.16)') /* ∠4 bottom */ + /* Прямые */ + + G.line({x:30,y:50},{x:295,y:180},{color:'#0891b2',width:2.5}) + + G.line({x:30,y:180},{x:295,y:50},{color:'#7c3aed',width:2.5}) + /* Дуги углов */ + + G.angle(O,P_R2,P_R1,{color:'#dc2626',r:20,width:2.2,label:'∠1',fontSize:14,labelOffset:14}) + + G.angle(O,P_L1,P_L2,{color:'#dc2626',r:20,width:2.2,label:'∠2',fontSize:14,labelOffset:14}) + + G.angle(O,P_R1,P_L1,{color:'#ea580c',r:32,width:2.2,label:'∠3',fontSize:14,labelOffset:10}) + + G.angle(O,P_L2,P_R2,{color:'#ea580c',r:32,width:2.2,label:'∠4',fontSize:14,labelOffset:10}) + /* Вершина O и подпись О (далеко от центра) */ + + G.point(O.x,O.y,'',{r:4,color:'#1e293b'}) + + 'O' + + '' + /* Заголовок-легенда */ + + '∠1=∠2, ∠3=∠4 — вертикальные' + b2.close; }