Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pyramid Makerの作成

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Pyramid Makerの作成

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

Avatar for suzakutakumi

suzakutakumi

March 12, 2022
Tweet

More Decks by suzakutakumi

Other Decks in Technology

Transcript

  1. 自己紹介 HN: 朱雀 匠 ( 本名 : 鈴木 拓眞 )

     学部 2 年 ( 新 3 年 ) Twitter: @suzakutakumi3 Portfolio: http://suzakutakumi.mydns.jp/
  2. 作成手順 今回は React を用いて作成し、 GitHub Pages で公開した 1. canvas を用いてピラミッドを書く

    2. 1 つの領域の高さを変えられるようにする 3. 領域を増やせるようにする 4. 領域の色を変えられるようにする 5. ダウンロードボタンをつける ※ CSS はわかりません
  3. 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();
  4. 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); }} /> ); })}
  5. 領域を増やせるようにする 色とサイズ ( 全部初期化 ) 、数をひとつ増やす <button onClick={() => {

    setColors([...colors, "#eb7012"]); setSize([...Array(num)].map((_, i) => (100 / (num + 1)) * (i + 1))); setNum(num + 1); }} />
  6. 領域の色を変えられるようにする 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 /> </> ); })}