\u0422\u0440\u0438\u043f\u043e\u0434 \u2013 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043d\u0430 \u0441\u0438\u043b\u0438 (responsive + \u0441\u0442\u0430\u0431\u0438\u043b\u043d\u043e\u0441\u0442)<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n :root { --maxw: 640px; }\r\n body { font-family:sans-serif; background:#fafafa; margin:0; }\r\n h3 { text-align:center; margin:12px 8px; }\r\n .controls { margin:8px auto; max-width:var(--maxw); display:flex; flex-direction:column; gap:8px; padding:0 8px; }\r\n .controls label { font-size:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }\r\n .controls input[type=range]{ width:60%; }\r\n canvas { width:100%; height:70vh; border:1px solid #ccc; background:#fff; display:block; }\r\n #output { font-size:14px; margin:10px auto; max-width:var(--maxw); background:#fff; border:1px solid #ddd; padding:8px; border-radius:8px; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h3>\u0420\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043f\u0440\u0435\u0437 \u0441\u043f\u0430\u0441\u0438\u0442\u0435\u043b\u0435\u043d \u0442\u0440\u0438\u043f\u043e\u0434 \u2013 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\r\n\r\n<div class=\"controls\">\r\n <label>\u0414\u044a\u043b\u0436\u0438\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0430 (m): <input type=\"range\" id=\"baseLength\" min=\"2\" max=\"50\" step=\"0.1\" value=\"5\"><\/label>\r\n <label>\u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430 \u043d\u0430 \u0442\u0440\u0438\u043f\u043e\u0434\u0430 (m): <input type=\"range\" id=\"height\" min=\"1\" max=\"5\" step=\"0.05\" value=\"1.95\"><\/label>\r\n <label>\u041e\u0442\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u0430\u0442\u0430 (m): <input type=\"range\" id=\"offset\" min=\"-1\" max=\"6\" step=\"0.1\" value=\"2.5\"><\/label>\r\n <label>\u0421\u044a\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043b\u044f\u0432\/\u0434\u0435\u0441\u0435\u043d \u043a\u0440\u0430\u043a (L:R): <input type=\"range\" id=\"legRatio\" min=\"0.01\" max=\"20\" step=\"0.01\" value=\"1\"><\/label>\r\n<\/div>\r\n\r\n<canvas id=\"canvas\"><\/canvas>\r\n<p id=\"output\"><\/p>\r\n\r\n<script>\r\nconst canvas = document.getElementById('canvas');\r\nconst ctx = canvas.getContext('2d');\r\nconst out = document.getElementById('output');\r\n\r\nconst g = 9.81, mass = 100, Fload = mass * g; \/\/ 100 kg\r\nconst efficiency = 0.94; \/\/ ~6% \u0437\u0430\u0433\u0443\u0431\u0438 \u0432 \u0440\u043e\u043b\u043a\u0430\u0442\u0430\r\n\r\nfunction normalize(v){ const L=Math.hypot(v.x,v.y)||1; return {x:v.x\/L,y:v.y\/L}; }\r\nfunction clamp(x,a,b){ return Math.max(a,Math.min(b,x)); }\r\n\r\nfunction drawArrow(x1,y1,x2,y2,color,width=2){\r\n const head=10, ang=Math.atan2(y2-y1,x2-x1);\r\n ctx.strokeStyle=color; ctx.fillStyle=color; ctx.lineWidth=width;\r\n ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(x2,y2);\r\n ctx.lineTo(x2-head*Math.cos(ang-Math.PI\/6), y2-head*Math.sin(ang-Math.PI\/6));\r\n ctx.lineTo(x2-head*Math.cos(ang+Math.PI\/6), y2-head*Math.sin(ang+Math.PI\/6));\r\n ctx.closePath(); ctx.fill();\r\n}\r\n\r\nfunction computeLegRatioBounds(headX,leftX,rightX,legBase,scale){\r\n const sL = Math.max(0, (headX - leftX)\/scale);\r\n const sR = Math.max(0, (rightX - headX)\/scale);\r\n let L_left_max = Infinity;\r\n if (sL < legBase) L_left_max = (sL === 0) ? 0 : (sL \/ (legBase - sL));\r\n let L_right_min = 0;\r\n if (sR > 0) L_right_min = Math.max(0, (legBase \/ sR) - 1);\r\n else L_right_min = 1e6;\r\n return { Lmin: L_right_min, Lmax: L_left_max };\r\n}\r\n\r\nfunction draw(){\r\n canvas.width = canvas.clientWidth;\r\n canvas.height = canvas.clientHeight;\r\n const w = canvas.width, h = canvas.height;\r\n\r\n const baseLength_m = +document.getElementById('baseLength').value;\r\n const height_m = +document.getElementById('height').value;\r\n const offset_m = +document.getElementById('offset').value;\r\n let legRatio = +document.getElementById('legRatio').value;\r\n\r\n const margin=30;\r\n const availableW=w-2*margin, availableH=h-2*margin;\r\n const scaleW=availableW\/baseLength_m;\r\n const scaleH=availableH\/(height_m*1.5);\r\n const scale=Math.min(scaleW,scaleH);\r\n\r\n const sceneWidth=baseLength_m*scale, sceneHeight=height_m*scale*1.5;\r\n const offsetX=(w-sceneWidth)\/2;\r\n const offsetY=(h-sceneHeight)\/2 + 30;\r\n\r\n ctx.clearRect(0,0,w,h);\r\n\r\n const leftX=offsetX, rightX=leftX+baseLength_m*scale;\r\n const baseY=offsetY+height_m*scale+60;\r\n const headX=leftX+offset_m*scale, headY=baseY-height_m*scale;\r\n\r\n const legBase = 1.55 * (height_m\/1.95);\r\n const {Lmin, Lmax} = computeLegRatioBounds(headX,leftX,rightX,legBase,scale);\r\n\r\n const HARD_MIN = 0.01, HARD_MAX = 20;\r\n legRatio = clamp(legRatio, Math.max(HARD_MIN,Lmin), Math.min(HARD_MAX, isFinite(Lmax)?Lmax:HARD_MAX));\r\n document.getElementById('legRatio').value = legRatio.toFixed(2);\r\n\r\n const leftSpan = legBase*(legRatio\/(1+legRatio));\r\n const rightSpan = legBase*(1\/(1+legRatio));\r\n const leftLegX = headX - leftSpan*scale;\r\n const rightLegX = headX + rightSpan*scale;\r\n\r\n \/\/ \u043e\u0441\u043d\u043e\u0432\u0430\r\n ctx.strokeStyle=\"#666\"; ctx.lineWidth=3;\r\n ctx.beginPath(); ctx.moveTo(leftX,baseY); ctx.lineTo(rightX,baseY); ctx.stroke();\r\n\r\n \/\/ \u0442\u0440\u0438\u043f\u043e\u0434\r\n ctx.strokeStyle=\"#999\"; ctx.lineWidth=2;\r\n ctx.beginPath();\r\n ctx.moveTo(headX,headY); ctx.lineTo(leftLegX,baseY);\r\n ctx.moveTo(headX,headY); ctx.lineTo(rightLegX,baseY);\r\n ctx.stroke();\r\n\r\n \/\/ \u0441\u0438\u043b\u0438\r\n const F1 = Fload, F2 = F1*efficiency;\r\n const leftVec = normalize({x:leftX-headX, y:baseY-headY});\r\n const rightVec = normalize({x:rightX-headX, y:baseY-headY});\r\n\r\n const Fvis = 0.55*scale;\r\n const vectorLen = Math.max(1.3, Math.min(3.0, 3.2 - (height_m-1)*0.35));\r\n\r\n const leftEnd = { x: headX + leftVec.x * Fvis * vectorLen, y: headY + leftVec.y * Fvis * vectorLen };\r\n const rightEnd = { x: headX + rightVec.x * Fvis * vectorLen, y: headY + rightVec.y * Fvis * vectorLen };\r\n\r\n drawArrow(headX,headY,leftEnd.x,leftEnd.y,\"blue\");\r\n drawArrow(headX,headY,rightEnd.x,rightEnd.y,\"green\");\r\n\r\n \/\/ \u0440\u0435\u0437\u0443\u043b\u0442\u0430\u043d\u0442\u043d\u0430 \u0441\u0438\u043b\u0430\r\n const resVec = { x: leftVec.x*F1 + rightVec.x*F2, y: leftVec.y*F1 + rightVec.y*F2 };\r\n const resLen = Math.hypot(resVec.x,resVec.y);\r\n const resDir = normalize(resVec);\r\n const resEnd = { x: headX + resDir.x*Fvis*vectorLen, y: headY + resDir.y*Fvis*vectorLen };\r\n drawArrow(headX,headY,resEnd.x,resEnd.y,\"red\",3);\r\n\r\n \/\/ \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u0442\u0430\u043d\u0442\u0430\u0442\u0430\r\n const t = (baseY - headY) \/ (resEnd.y - headY);\r\n const projX = headX + (resEnd.x - headX) * t;\r\n const projY = baseY;\r\n const inside = (projX >= leftLegX && projX <= rightLegX);\r\n\r\n ctx.beginPath();\r\n ctx.arc(projX, projY, 6, 0, 2*Math.PI);\r\n ctx.fillStyle = inside ? \"rgba(0,200,0,0.7)\" : \"rgba(255,0,0,0.8)\";\r\n ctx.fill();\r\n\r\n \/\/ \u0435\u0442\u0438\u043a\u0435\u0442\u0438\r\n ctx.font=\"14px sans-serif\";\r\n ctx.fillStyle=\"blue\"; ctx.fillText(\"F\u2081\", leftEnd.x-18, leftEnd.y);\r\n ctx.fillStyle=\"green\"; ctx.fillText(\"F\u2082\", rightEnd.x+8, rightEnd.y);\r\n ctx.fillStyle=\"red\"; ctx.fillText(\"R\", resEnd.x+6, resEnd.y-6);\r\n ctx.fillStyle=\"black\"; ctx.fillText(\"\u0413\u043b\u0430\u0432\u0430 (\u0440\u043e\u043b\u043a\u0430)\", headX-38, headY-10);\r\n\r\n \/\/ \u043c\u0435\u0442\u0440\u0438\u043a\u0438\r\n const theta = Math.acos(leftVec.x*rightVec.x + leftVec.y*rightVec.y);\r\n out.innerHTML = `\r\n <b>\u041e\u0441\u043d\u043e\u0432\u0430\u0442\u0430:<\/b> ${baseLength_m.toFixed(1)} m<br>\r\n <b>\u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430:<\/b> ${height_m.toFixed(2)} m<br>\r\n <b>\u041e\u0442\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u0430\u0442\u0430:<\/b> ${offset_m.toFixed(1)} m<br>\r\n <b>\u0421\u044a\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 L:R:<\/b> ${(+legRatio).toFixed(2)} (\u0430\u0432\u0442\u043e-\u043a\u043e\u0440\u0438\u0433\u0438\u0440\u0430\u043d\u043e \u0432 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u0438\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d)<br>\r\n <b>\u042a\u0433\u044a\u043b \u043c\u0435\u0436\u0434\u0443 \u0432\u044a\u0436\u0435\u0442\u0430\u0442\u0430:<\/b> ${(theta*180\/Math.PI).toFixed(1)}\u00b0<br>\r\n <b>\u0415\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442 \u043d\u0430 \u0440\u043e\u043b\u043a\u0430\u0442\u0430:<\/b> ${(efficiency*100).toFixed(0)}%<br>\r\n <b>\u0420\u0435\u0437\u0443\u043b\u0442\u0430\u043d\u0442\u043d\u0430 \u0441\u0438\u043b\u0430 \u0432\u044a\u0440\u0445\u0443 \u0440\u043e\u043b\u043a\u0430\u0442\u0430:<\/b> ${(resLen\/1000).toFixed(2)} kN<br>\r\n <b>\u0421\u0442\u0430\u0431\u0438\u043b\u043d\u043e\u0441\u0442:<\/b> ${inside ? '<span style=\"color:green;\">\u0432 \u0441\u0442\u0430\u0431\u0438\u043b\u043d\u0430\u0442\u0430 \u0437\u043e\u043d\u0430<\/span>' : '<span style=\"color:red;\">\u0438\u0437\u0432\u044a\u043d \u0437\u043e\u043d\u0430\u0442\u0430!<\/span>'}<br>\r\n <small>\u0410\u043a\u043e \u0442\u043e\u0447\u043a\u0430\u0442\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u0438\u0437\u043b\u0435\u0437\u0435 \u0438\u0437\u0432\u044a\u043d \u0437\u043e\u043d\u0430\u0442\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u0440\u0430\u043a\u0430\u0442\u0430, \u0442\u0440\u0438\u043f\u043e\u0434\u044a\u0442 \u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043d\u043e \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u0435\u043d.<\/small>\r\n `;\r\n}\r\n\r\ndocument.querySelectorAll('input').forEach(el => el.addEventListener('input', draw));\r\nwindow.addEventListener('resize', draw);\r\ndraw();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> \u0420\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043f\u0440\u0435\u0437 \u0441\u043f\u0430\u0441\u0438\u0442\u0435\u043b\u0435\u043d \u0442\u0440\u0438\u043f\u043e\u0434 \u2013 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0414\u044a\u043b\u0436\u0438\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0430 (m): \u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430 \u043d\u0430 \u0442\u0440\u0438\u043f\u043e\u0434\u0430 (m): \u041e\u0442\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u0430\u0442\u0430 (m): \u0421\u044a\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043b\u044f\u0432\/\u0434\u0435\u0441\u0435\u043d \u043a\u0440\u0430\u043a (L:R): <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-container.php","meta":{"footnotes":""},"class_list":["post-2993","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/2993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/comments?post=2993"}],"version-history":[{"count":1,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/2993\/revisions"}],"predecessor-version":[{"id":2994,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/2993\/revisions\/2994"}],"wp:attachment":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/media?parent=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\u0422\u0440\u0438\u043f\u043e\u0434 \u2013 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043d\u0430 \u0441\u0438\u043b\u0438 (responsive + \u0441\u0442\u0430\u0431\u0438\u043b\u043d\u043e\u0441\u0442)<\/title>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n :root { --maxw: 640px; }\r\n body { font-family:sans-serif; background:#fafafa; margin:0; }\r\n h3 { text-align:center; margin:12px 8px; }\r\n .controls { margin:8px auto; max-width:var(--maxw); display:flex; flex-direction:column; gap:8px; padding:0 8px; }\r\n .controls label { font-size:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }\r\n .controls input[type=range]{ width:60%; }\r\n canvas { width:100%; height:70vh; border:1px solid #ccc; background:#fff; display:block; }\r\n #output { font-size:14px; margin:10px auto; max-width:var(--maxw); background:#fff; border:1px solid #ddd; padding:8px; border-radius:8px; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h3>\u0420\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043f\u0440\u0435\u0437 \u0441\u043f\u0430\u0441\u0438\u0442\u0435\u043b\u0435\u043d \u0442\u0440\u0438\u043f\u043e\u0434 \u2013 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\r\n\r\n<div class=\"controls\">\r\n <label>\u0414\u044a\u043b\u0436\u0438\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0430 (m): <input type=\"range\" id=\"baseLength\" min=\"2\" max=\"50\" step=\"0.1\" value=\"5\"><\/label>\r\n <label>\u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430 \u043d\u0430 \u0442\u0440\u0438\u043f\u043e\u0434\u0430 (m): <input type=\"range\" id=\"height\" min=\"1\" max=\"5\" step=\"0.05\" value=\"1.95\"><\/label>\r\n <label>\u041e\u0442\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u0430\u0442\u0430 (m): <input type=\"range\" id=\"offset\" min=\"-1\" max=\"6\" step=\"0.1\" value=\"2.5\"><\/label>\r\n <label>\u0421\u044a\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043b\u044f\u0432\/\u0434\u0435\u0441\u0435\u043d \u043a\u0440\u0430\u043a (L:R): <input type=\"range\" id=\"legRatio\" min=\"0.01\" max=\"20\" step=\"0.01\" value=\"1\"><\/label>\r\n<\/div>\r\n\r\n<canvas id=\"canvas\"><\/canvas>\r\n<p id=\"output\"><\/p>\r\n\r\n<script>\r\nconst canvas = document.getElementById('canvas');\r\nconst ctx = canvas.getContext('2d');\r\nconst out = document.getElementById('output');\r\n\r\nconst g = 9.81, mass = 100, Fload = mass * g; \/\/ 100 kg\r\nconst efficiency = 0.94; \/\/ ~6% \u0437\u0430\u0433\u0443\u0431\u0438 \u0432 \u0440\u043e\u043b\u043a\u0430\u0442\u0430\r\n\r\nfunction normalize(v){ const L=Math.hypot(v.x,v.y)||1; return {x:v.x\/L,y:v.y\/L}; }\r\nfunction clamp(x,a,b){ return Math.max(a,Math.min(b,x)); }\r\n\r\nfunction drawArrow(x1,y1,x2,y2,color,width=2){\r\n const head=10, ang=Math.atan2(y2-y1,x2-x1);\r\n ctx.strokeStyle=color; ctx.fillStyle=color; ctx.lineWidth=width;\r\n ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(x2,y2);\r\n ctx.lineTo(x2-head*Math.cos(ang-Math.PI\/6), y2-head*Math.sin(ang-Math.PI\/6));\r\n ctx.lineTo(x2-head*Math.cos(ang+Math.PI\/6), y2-head*Math.sin(ang+Math.PI\/6));\r\n ctx.closePath(); ctx.fill();\r\n}\r\n\r\nfunction computeLegRatioBounds(headX,leftX,rightX,legBase,scale){\r\n const sL = Math.max(0, (headX - leftX)\/scale);\r\n const sR = Math.max(0, (rightX - headX)\/scale);\r\n let L_left_max = Infinity;\r\n if (sL < legBase) L_left_max = (sL === 0) ? 0 : (sL \/ (legBase - sL));\r\n let L_right_min = 0;\r\n if (sR > 0) L_right_min = Math.max(0, (legBase \/ sR) - 1);\r\n else L_right_min = 1e6;\r\n return { Lmin: L_right_min, Lmax: L_left_max };\r\n}\r\n\r\nfunction draw(){\r\n canvas.width = canvas.clientWidth;\r\n canvas.height = canvas.clientHeight;\r\n const w = canvas.width, h = canvas.height;\r\n\r\n const baseLength_m = +document.getElementById('baseLength').value;\r\n const height_m = +document.getElementById('height').value;\r\n const offset_m = +document.getElementById('offset').value;\r\n let legRatio = +document.getElementById('legRatio').value;\r\n\r\n const margin=30;\r\n const availableW=w-2*margin, availableH=h-2*margin;\r\n const scaleW=availableW\/baseLength_m;\r\n const scaleH=availableH\/(height_m*1.5);\r\n const scale=Math.min(scaleW,scaleH);\r\n\r\n const sceneWidth=baseLength_m*scale, sceneHeight=height_m*scale*1.5;\r\n const offsetX=(w-sceneWidth)\/2;\r\n const offsetY=(h-sceneHeight)\/2 + 30;\r\n\r\n ctx.clearRect(0,0,w,h);\r\n\r\n const leftX=offsetX, rightX=leftX+baseLength_m*scale;\r\n const baseY=offsetY+height_m*scale+60;\r\n const headX=leftX+offset_m*scale, headY=baseY-height_m*scale;\r\n\r\n const legBase = 1.55 * (height_m\/1.95);\r\n const {Lmin, Lmax} = computeLegRatioBounds(headX,leftX,rightX,legBase,scale);\r\n\r\n const HARD_MIN = 0.01, HARD_MAX = 20;\r\n legRatio = clamp(legRatio, Math.max(HARD_MIN,Lmin), Math.min(HARD_MAX, isFinite(Lmax)?Lmax:HARD_MAX));\r\n document.getElementById('legRatio').value = legRatio.toFixed(2);\r\n\r\n const leftSpan = legBase*(legRatio\/(1+legRatio));\r\n const rightSpan = legBase*(1\/(1+legRatio));\r\n const leftLegX = headX - leftSpan*scale;\r\n const rightLegX = headX + rightSpan*scale;\r\n\r\n \/\/ \u043e\u0441\u043d\u043e\u0432\u0430\r\n ctx.strokeStyle=\"#666\"; ctx.lineWidth=3;\r\n ctx.beginPath(); ctx.moveTo(leftX,baseY); ctx.lineTo(rightX,baseY); ctx.stroke();\r\n\r\n \/\/ \u0442\u0440\u0438\u043f\u043e\u0434\r\n ctx.strokeStyle=\"#999\"; ctx.lineWidth=2;\r\n ctx.beginPath();\r\n ctx.moveTo(headX,headY); ctx.lineTo(leftLegX,baseY);\r\n ctx.moveTo(headX,headY); ctx.lineTo(rightLegX,baseY);\r\n ctx.stroke();\r\n\r\n \/\/ \u0441\u0438\u043b\u0438\r\n const F1 = Fload, F2 = F1*efficiency;\r\n const leftVec = normalize({x:leftX-headX, y:baseY-headY});\r\n const rightVec = normalize({x:rightX-headX, y:baseY-headY});\r\n\r\n const Fvis = 0.55*scale;\r\n const vectorLen = Math.max(1.3, Math.min(3.0, 3.2 - (height_m-1)*0.35));\r\n\r\n const leftEnd = { x: headX + leftVec.x * Fvis * vectorLen, y: headY + leftVec.y * Fvis * vectorLen };\r\n const rightEnd = { x: headX + rightVec.x * Fvis * vectorLen, y: headY + rightVec.y * Fvis * vectorLen };\r\n\r\n drawArrow(headX,headY,leftEnd.x,leftEnd.y,\"blue\");\r\n drawArrow(headX,headY,rightEnd.x,rightEnd.y,\"green\");\r\n\r\n \/\/ \u0440\u0435\u0437\u0443\u043b\u0442\u0430\u043d\u0442\u043d\u0430 \u0441\u0438\u043b\u0430\r\n const resVec = { x: leftVec.x*F1 + rightVec.x*F2, y: leftVec.y*F1 + rightVec.y*F2 };\r\n const resLen = Math.hypot(resVec.x,resVec.y);\r\n const resDir = normalize(resVec);\r\n const resEnd = { x: headX + resDir.x*Fvis*vectorLen, y: headY + resDir.y*Fvis*vectorLen };\r\n drawArrow(headX,headY,resEnd.x,resEnd.y,\"red\",3);\r\n\r\n \/\/ \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u0442\u0430\u043d\u0442\u0430\u0442\u0430\r\n const t = (baseY - headY) \/ (resEnd.y - headY);\r\n const projX = headX + (resEnd.x - headX) * t;\r\n const projY = baseY;\r\n const inside = (projX >= leftLegX && projX <= rightLegX);\r\n\r\n ctx.beginPath();\r\n ctx.arc(projX, projY, 6, 0, 2*Math.PI);\r\n ctx.fillStyle = inside ? \"rgba(0,200,0,0.7)\" : \"rgba(255,0,0,0.8)\";\r\n ctx.fill();\r\n\r\n \/\/ \u0435\u0442\u0438\u043a\u0435\u0442\u0438\r\n ctx.font=\"14px sans-serif\";\r\n ctx.fillStyle=\"blue\"; ctx.fillText(\"F\u2081\", leftEnd.x-18, leftEnd.y);\r\n ctx.fillStyle=\"green\"; ctx.fillText(\"F\u2082\", rightEnd.x+8, rightEnd.y);\r\n ctx.fillStyle=\"red\"; ctx.fillText(\"R\", resEnd.x+6, resEnd.y-6);\r\n ctx.fillStyle=\"black\"; ctx.fillText(\"\u0413\u043b\u0430\u0432\u0430 (\u0440\u043e\u043b\u043a\u0430)\", headX-38, headY-10);\r\n\r\n \/\/ \u043c\u0435\u0442\u0440\u0438\u043a\u0438\r\n const theta = Math.acos(leftVec.x*rightVec.x + leftVec.y*rightVec.y);\r\n out.innerHTML = `\r\n <b>\u041e\u0441\u043d\u043e\u0432\u0430\u0442\u0430:<\/b> ${baseLength_m.toFixed(1)} m<br>\r\n <b>\u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430:<\/b> ${height_m.toFixed(2)} m<br>\r\n <b>\u041e\u0442\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u0430\u0442\u0430:<\/b> ${offset_m.toFixed(1)} m<br>\r\n <b>\u0421\u044a\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 L:R:<\/b> ${(+legRatio).toFixed(2)} (\u0430\u0432\u0442\u043e-\u043a\u043e\u0440\u0438\u0433\u0438\u0440\u0430\u043d\u043e \u0432 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u0438\u044f \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d)<br>\r\n <b>\u042a\u0433\u044a\u043b \u043c\u0435\u0436\u0434\u0443 \u0432\u044a\u0436\u0435\u0442\u0430\u0442\u0430:<\/b> ${(theta*180\/Math.PI).toFixed(1)}\u00b0<br>\r\n <b>\u0415\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442 \u043d\u0430 \u0440\u043e\u043b\u043a\u0430\u0442\u0430:<\/b> ${(efficiency*100).toFixed(0)}%<br>\r\n <b>\u0420\u0435\u0437\u0443\u043b\u0442\u0430\u043d\u0442\u043d\u0430 \u0441\u0438\u043b\u0430 \u0432\u044a\u0440\u0445\u0443 \u0440\u043e\u043b\u043a\u0430\u0442\u0430:<\/b> ${(resLen\/1000).toFixed(2)} kN<br>\r\n <b>\u0421\u0442\u0430\u0431\u0438\u043b\u043d\u043e\u0441\u0442:<\/b> ${inside ? '<span style=\"color:green;\">\u0432 \u0441\u0442\u0430\u0431\u0438\u043b\u043d\u0430\u0442\u0430 \u0437\u043e\u043d\u0430<\/span>' : '<span style=\"color:red;\">\u0438\u0437\u0432\u044a\u043d \u0437\u043e\u043d\u0430\u0442\u0430!<\/span>'}<br>\r\n <small>\u0410\u043a\u043e \u0442\u043e\u0447\u043a\u0430\u0442\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u0438\u0437\u043b\u0435\u0437\u0435 \u0438\u0437\u0432\u044a\u043d \u0437\u043e\u043d\u0430\u0442\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u0440\u0430\u043a\u0430\u0442\u0430, \u0442\u0440\u0438\u043f\u043e\u0434\u044a\u0442 \u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043d\u043e \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u0435\u043d.<\/small>\r\n `;\r\n}\r\n\r\ndocument.querySelectorAll('input').forEach(el => el.addEventListener('input', draw));\r\nwindow.addEventListener('resize', draw);\r\ndraw();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> \u0420\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u043f\u0440\u0435\u0437 \u0441\u043f\u0430\u0441\u0438\u0442\u0435\u043b\u0435\u043d \u0442\u0440\u0438\u043f\u043e\u0434 \u2013 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0414\u044a\u043b\u0436\u0438\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0430 (m): \u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430 \u043d\u0430 \u0442\u0440\u0438\u043f\u043e\u0434\u0430 (m): \u041e\u0442\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u0433\u043b\u0430\u0432\u0430\u0442\u0430 (m): \u0421\u044a\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043b\u044f\u0432\/\u0434\u0435\u0441\u0435\u043d \u043a\u0440\u0430\u043a (L:R): <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-container.php","meta":{"footnotes":""},"class_list":["post-2993","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/2993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/comments?post=2993"}],"version-history":[{"count":1,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/2993\/revisions"}],"predecessor-version":[{"id":2994,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/2993\/revisions\/2994"}],"wp:attachment":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/media?parent=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}