Javascript-форум - Показать сообщение отдельно

рони · #4 (**permalink**) 15.06.2018, 18:57

MC-XOBAHCK,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<div id="slider"></div>
<style>.skat-size{display:inline-block;margin:15px 10px;padding:0 10px 10px;border:solid 1px #ccc;}</style>

<canvas id="valma-test2" width="420" height="220">Конверт</canvas>

<div class="row plos" data-area="valma">
    <div class="skat-size">
        <h4>Трапеция</h4>
        <div>Карниз:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Конёк:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Высота:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
    </div>
    <div class="skat-size">
        <h4>Треугольный скат</h4>
        <div>Длина карниза:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
        <div>Высота ската:</div>
        <div>
            <input class="valma" type="text" /><span class="unit"> м</span>
        </div>
    </div>
</div>


<script>
let valm_sk1 = '#bbb',
    valm_sk2 = '#ccc',
    valm_sk3 = '#ddd',
    valm_sk4 = '#ccc';
var canvasValma2 = document.querySelector('#valma-test2');
function draw()
{

    let valma = canvasValma2.getContext('2d');
    if (valma) {
        valma.clearRect(0, 0, 420, 220);
        valma.beginPath();   // 1 сторона
        valma.moveTo(0, 0);
        valma.lineTo(400, 0);
        valma.lineTo(300, 100);
        valma.lineTo(100, 100);
        valma.fillStyle = valm_sk1;
        valma.fill();

        valma.beginPath();   // 2 сторона
        valma.moveTo(400, 0);
        valma.lineTo(300, 100);
        valma.lineTo(400, 200);
        valma.fillStyle = valm_sk2;
        valma.fill();

        valma.beginPath();   // 3 сторона
        valma.moveTo(0, 200);
        valma.lineTo(100, 100);
        valma.lineTo(300, 100);
        valma.lineTo(400, 200);
        valma.fillStyle = valm_sk3;
        valma.fill();

        valma.beginPath();   // 4 сторона
        valma.moveTo(0, 0);
        valma.lineTo(100, 100);
        valma.lineTo(0, 200);
        valma.fillStyle = valm_sk4;
        valma.fill();
    }
}


    draw() ;
    function razmStrel(color, v, lw){   // Принимает: color - цвет, v - координаты (массив), lw - толщина линии
         let strelka = canvasValma2.getContext('2d');

        if (strelka) {
            // Размерные стрелки
            strelka.strokeStyle = color;
            strelka.lineWidth = lw;
            strelka.beginPath();
            strelka.moveTo(v[0], v[1]);
            strelka.lineTo(v[2], v[3]);
            strelka.stroke();

            strelka.beginPath();
            strelka.lineWidth = 1;
            strelka.moveTo(v[4], v[5]);
            strelka.lineTo(v[6], v[7]);
            strelka.lineTo(v[8], v[9]);
            strelka.stroke();

            strelka.beginPath();
            strelka.lineWidth = 1;
            strelka.moveTo(v[10], v[11]);
            strelka.lineTo(v[12], v[13]);
            strelka.lineTo(v[14], v[15]);
            strelka.stroke();
        }
    }


var inp = document.querySelectorAll('input');

[].forEach.call(inp, function(node,i) {
    let color = 'green',
            v,
            lw = 2;
        switch (i) {
            case 0: v = [0,210, 400,210, 15,207, 0,210, 15,213, 385,207, 400,210, 385,213]; break;
            case 1: v = [100,115, 300,115, 115,112, 100,115, 115,118, 285,112, 300,115, 285,118]; break;
            case 2: v = [120,100, 120,200, 117,115, 120,100, 123,115, 117,185, 120,200, 123,185]; break;
            case 3: v = [410,0, 410,200, 407,15, 410,0, 413,15, 407,185, 410,200, 413,185]; break;
            case 4: v = [300,100, 400,100, 315,97, 300,100, 315,103, 385,97, 400,100, 385,103]; break;
        }
   node.addEventListener("focus", function() {

        draw();
        razmStrel(color, v, lw);
});

   node.addEventListener("blur", draw)



});


</script>

</body>
</html>