Pyramid Makerの作成

説明時に使うピラミッドをダウンロードできるWebサイトをReactで作成した

Transcript

1. Pyramid Makerの作成 2022/03/12 NSEEM
2. 自己紹介 HN: 朱雀 匠 ( 本名 : 鈴木 拓眞 ) 　学部 2 年 ( 新 3 年 ) Twitter: @suzakutakumi3 Portfolio: http://suzakutakumi.mydns.jp/
5. PyramidMakerとは 右図のようなピラミッド図を作成するツール 探しても無かったので作りました
6. 作成手順 今回は React を用いて作成し、 GitHub Pages で公開した 1. canvas を用いてピラミッドを書く 2. 1 つの領域の高さを変えられるようにする 3. 領域を増やせるようにする 4. 領域の色を変えられるようにする 5. ダウンロードボタンをつける ※ CSS はわかりません
7. canvasを用いてピラミッドを書く 三角を領域の数だけ書いていく 高さから左下、右下の点を計算して三角を書いています context[i].beginPath(); context[i].moveTo(canvasWidth / 2, 0);　//一番上 context[i].lineTo(canvasWidth / 2 - height * Math.sin(Math.PI / 6),height);　　//左下 context[i].lineTo(canvasWidth / 2 + height * Math.sin(Math.PI / 6),height);　　//右下 context[i].closePath(); context[i].stroke(); context[i].fillStyle = colors[i]; context[i].fill();
8. 1つの領域の高さを変えられるようにする sizes( パーセンテージのリスト ) の数だけ、 map でスライダーを設置していきます 下のサイトを参考に、スライダーを複数設置しました https://qiita.com/taku_u9501/items/37c36cf9ad321b29302b {props.sizes.map((v, i) => { return ( <input　key={i}　className="thmub"　type="range"　value={v} min="0"　max="100" step="1" style={i === 0 ? {width: props.size, backgroundColor: "rgba(0, 0, 0, 0)" , border: "1px solid"}: { width: props.size, backgroundColor: "rgba(0, 0, 0, 0)" } } onChange={(e) => { props.onChange(e, i); }} /> ); })}
9. 領域を増やせるようにする 色とサイズ ( 全部初期化 ) 、数をひとつ増やす <button onClick={() => { setColors([...colors, "#eb7012"]); setSize([...Array(num)].map((_, i) => (100 / (num + 1)) * (i + 1))); setNum(num + 1); }} />
10. 領域の色を変えられるようにする colors の数だけ map で input type=”color” を設置する {props.colors.map((c, i) => { return ( <> <input key={i} type="color" value={c} onChange={(e) => { props.onChange(e, i); }} /> <br /> </> ); })}
11. ダウンロードボタンをつける url に canvas の toDataURL 関数の返り値を設定する props.setURL(document.getElementById("canvas").toDataURL("image/png")); a タグに href と download を設定する <a href={props.url} download="pyramid.png"> <button>ダウンロード</button> </a>
12. デモ https://suzakutakumi.github.io/PyramidMaker/
13. 今後 - 領域を減らせるようにする - 枠線の大きさを変えられるようにする - 色に透明度を追加する