うつ病記録アプリを作ってみる【2回目】

2023年2月2日 12:49

#うつ病 #鬱病 #HTML #javascript #WEBアプリ #うつ病記録アプリ

前回の記事

まずはHTMLを準備

まずはHTMLを準備します。
下図のような感じで空のsvgタグを準備します

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <main>
        <svg width="1000px" height="1000px" viewBox="0 0 1000 1000"
            <title>Accessing Content in SVG</title>
        </svg>
    </main>
</body>
</html>

javascriptでSVGを使って線を引く

下図のように書くと横線が引けます
SVGを描く際には”createElementNS”を使い名前空間('http://www.w3.org/2000/svg')を指定する必要があります。
あとのプロパティ設定はご自身で調べてくださいww

<script>
        var svg = document.querySelector('svg');
        var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1',100);
        line.setAttribute('y1',100);
        line.setAttribute('x2',1000);
        line.setAttribute('y2',100);
        line.setAttribute('stroke', '#000');
        line.setAttribute('stroke-width', 2);

        svg.appendChild(line);
</script>

下図のように線が引けます(見やすいように背景グレーにしてます)

線を引く関数を作っておく

後々、使いやすいように関数化しておきます。破線を描けるように一部追加もしつつ、、、下図の様に

   var pathLine = function(line_obj){
        var svg = document.querySelector('svg');
        var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1',line_obj.start_x);
        line.setAttribute('y1',line_obj.start_y);
        line.setAttribute('x2',line_obj.end_x);
        line.setAttribute('y2',line_obj.end_y);
        line.setAttribute('stroke', line_obj.color);
        line.setAttribute('stroke-width', line_obj.storoke_width);
        line.setAttribute('stroke-dasharray', line_obj.storoke_dasharray);

        svg.appendChild(line);
    }

で、関数を使う場合は

    pathLine({
        start_x:100,
        start_y:100,
        end_x:1000,
        end_y:100,
        color:"#000",
        storoke_width:2,
        storoke_dasharray:"0"
    })

で線を引く準備はできました