Vanilla Jsを使用したパネルの作成

27269 ワード
frontend JavaScript html vanilla js CSS テキストリンク
💙 Vanilla Jsを使用して画板を作成します.
✔ 0. 完成本

こんな感じの絵板を作ります.
✔ 1. reset.cssを使用して初期化します.
各Webブラウザは異なるデフォルトスタイルを指定しており、初期化することで、異なるWebブラウザに同じスタイルを適用することができます.
<u>원하는 부분에 밑줄이 그어진다.</u>
Webドキュメントリンク:CSS Tools: Reset CSS
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
reset.cssファイルを作成し、上のコード、styleを貼り付けます.cssにリセットします.cssを読み込みます.
@import "reset.css"
✔ 2. Html&Css&Jsファイルを作成して接続します.
  • idおよび
    • クラス
    id : Javascript에 이용할 것이다.
class: Css에 이용할 것이다.
    各ドキュメントに
  • という名前を付けます.
    • index painting alone.html
style painting alone.css
app painting alone.js
    ✔ 3. Canvasを作成します.
    Canvas APIを使用します.
    HTMLとJavascriptの要素を利用して、描画手段のAPIを提供します.
    <canvas id="jsCanvas" class="canvas"></canvas>
    そして次の配色システムを作ります.
     <body>
    <script src="app painting alone.js"></script>
    <canvas id="jsCanvas" class="canvas"></canvas> // 캔버스 만들기.
    <div class="controls"> // 컨트롤러 만들기.
      <div class="controls_colors" id="jsColors"> // 색상 하나하나 다 넣어주기.
        <div class="controls_color" style="background-color: black"></div>
        <div class="controls_color" style="background-color: white"></div>
        <div class="controls_color" style="background-color: red"></div>
        <div class="controls_color" style="background-color: orange"></div>
        <div class="controls_color" style="background-color: yellow"></div>
        <div class="controls_color" style="background-color: yellowgreen"></div>
        <div class="controls_color" style="background-color: green"></div>
        <div class="controls_color" style="background-color: aqua"></div>
        <div class="controls_color" style="background-color: blue"></div>
        <div class="controls_color" style="background-color: purple"></div>
      </div>
    </div>
  </body>
    * canvas
* controls > controls_colors > controls_color
    これで、cssでシェイプをトリミングし、位置を調整します.
  • font-family 
    • font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
'Helvetica Neue', sans-serif;
  • display: flex 
    • display: flex;
  • flex-direction: column 
    • flex-direction: column
    列の方向に並ぶ.
    =上から下へ~!
  • align-items: center 
    • align-items: center;
    中央に位置を調整します.

    最初は左へ
    endは右側に寄ります
    真ん中にすると真ん中に貼ります
    😡 でもなぜかそれならrow方向でしょうか?
    ✔ 4. コントロールを作成します.
    コントロールも配置して画面に表示します.
    // 위에서 처럼 body를 가운데 정렬한 것 처럼 똑같이 이용하기.

.controls { 
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

// controls 안에 포함된 영역 또한 flex로 바꿔주기.

.controls_colors {
  display: flex;
}

// 색상 표기하기.

.controls_colors .controls_color {
  width: 50px;
  height: 50px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
  border-radius: 25px;
  cursor: pointer;
}
  • cursor: pointer
    リンクへのポインタ.通常は片側の手を指す.
    • cursor: pointer;
    ✔ 5. Buttonsを作成します.
    FillとSaveボタンを作成します.
    <div class="controls">
  <div class="controls_btns">
     <button id="jsFill">Fill</button>
     <button id="jsSave">Save</button>
  </div>
</div>
    .controls_btns button {
  all: unset;
  cursor: pointer;
  background-color: white;
  padding: 5px 10px;
  width: 80px;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11);
  margin-bottom: 40px;
}

.controls_btns button:active {
  transform: scale(0.98); 
  /* 누르면 작아지기 때문에 애니메이션 효과도 줄 수 있다. */
}
  • all: unset
    reset.cssと同じ存在.buttonのデフォルトスタイルを一度に削除できます.
    • all: unset;
  • ボタン:アクティブ-仮想クラス
  • 仮想クラス:選択者に追加され、選択者が満たされるには特別な状態にある必要があります.
  • 仮想クラスactive:マウスボタンを押してからマウスボタンを放した瞬間を表す.
    • .controls_btns button:active{
  transform: scale(0.98)
}
  • 変換:scale(比率)またはscale(横比率、縦比率)
    以上の条件を満たすと、押した瞬間にアニメーション効果が発生します.
    • transform: scale(0.98)
    ✔ 6. Range Inputを作成します.
    カラーブラシのサイズを調整するRange Barを作成します.
    <div class="controls_range">
        <label for="jsRange">Brush Line Thickness</label>
        <input
          type="range"
          id="jsRange"
          max="5"
          min="0"
          step="0.1"
          value="2.5"
        />
</div>
    .controls_range {
  margin-bottom: 40px;
}

label {
  font-weight: bold;
  padding: 15px;
  color: black;
}
    ✔ 7. Jsでイベントを処理します.
  • 参考文書|MDN
  • イベント参照||MDN
  • Web API | | MDN
  • Canvas API || MDN
  • マウスイベント
    • 😀 ちょっと紛らわしい部分
    mouseup:マウスを移動するとき、マウスを移動する瞬間に線を描きます.
    mousedown:マウスを押してから
  • イベントを実施します.
  • マウスを認識する必要があります.>"mousemove"
  • マウスを押して直線を描画します.>"mousedown"
  • マウスを外すと、線はもう描けません.つまり、そこに線を引くということです.>"mouseup"
  • キャンバスの外に出ると描かれます.>"mouseleave"
    • canvasを読み込み、変数として指定します.>getElementById()~!
    canvasが存在するかどうかを確認し、イベントの関数を作成して接続します.>addEventListener(type,関数名)~!
    // event 제작하기.
// 1. 마우스를 클릭하면 인지하기.
// 2. 마우스를 클릭하면 선 긋기.
// 3. 마우스를 클릭하지 않으면 선 긋지 않기.
// 4. 캔버스를 넘어가면 선 긋지 않기.

const canvas = document.getElementById("jsCanvas"); // canvas
let painting = false; // painting

function stopPainting() {
  painting = false; // 반복을 없애기 위해 제작된 함수이다.
}

function onMouseMove(event) {
  // console.log(event);
  const x = event.offsetX;
  const y = event.offsetY;
  // console.log(x, y);
}

function onMouseDown(event) {
  // console.log(event);
  painting = true;
}

function onMouseUp(event) {}
// 나중에 마우스 떼는 순간 선이 그려져야 하기 때문이다. 

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", onMouseDown);
  canvas.addEventListener("mouseup", onMouseUp);
  canvas.addEventListener("mouseleave", stopPainting);
}
    ✔ 8. Jsを使用してcontextを作成します.
    contextを使用してAPIとスクリプト関数を使用して線を引くことができます.
  • 参照ドキュメント
    Canvas API || MDN
  • は、まずcontext 2 Dを作成する.
    • const ctx = canvas.getContext('2d');
  • lineの色と太さを指定します.
    • ctx.strokeStyle = "black";
ctx.lineWidth = 2.5;
  • MouseMoveでは、関数を完了して直線を描画します.
    • function onMouseMove(event) {
  // console.log(event);
  const x = event.offsetX;
  const y = event.offsetY;
  // console.log(x, y);
  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }
}
  • 線を描くためのスクリプト関数:Canvas Contextを使用します.

    • 😡 注意事項:canvasサイズを必ず再指定してください.
    再指定しないとcanvasでは線は表示されません.
    canvas.width = 700;
canvas.height = 700;
    ✔ 9. Jsでカラーメタをクリックすると色が変わります.
    カラーリングを押すときは、線の色を変更します.
    まず、Arrayオブジェクトが必要なので変更したいのですが、エラーが発生しているので大変です、ㅠㅠ
    Array.from()をArrayオブジェクトとして使用します.
    Array.forEach()は、アレイ要素の各要素を出力することができる.
     Array.from(colors).forEach((element) => console.log(element));
    各要素は出力できます.
    document.addEventListener("DOMContentLoaded", function (e) {
  //  console.log(colors);
  // console.log(Array.from(colors));
  Array.from(colors).forEach((color) =>
    color.addEventListener("click", handleColorClick)
  );
});
    addEventListener(type、関数名)は、どのイベントが発生したときにどのような操作を実行するかを指定します.
    そして機能を創造します.
    function handleColorClick(event) {
  // console.log(event.target.style.backgroundColor);
  const bgColor = event.target.style.backgroundColor;
  ctx.strokeStyle = bgColor;
}
  • target:イベントが発生したオブジェクトを表します.
  • スタイル:スタイル内に背景色があり、指定する必要があります.
    • bgColor変数を指定し、コンテキストで直線を描く方法に関連付けます.
    整理する
    ターゲット:異なる色をクリックするたびに、ペンの色が変更されます.
  • 線の描画方法を指定します.
  • 色ごとにArrayオブジェクトを作成します.配置オブジェクトの選択を許可します.
  • イベントがクリックされるたびに、それは変色処理されます.
  • は、これを変数として、直線を描く方法に関連付けます.
    • キャンバスイベントを設定するときと同様にif文を使用しても返されます.
    document.addEventListener("DOMContentLoaded", function (e) {
  //  console.log(colors);
  // console.log(Array.from(colors));
  // Array.from(colors).forEach((element) => console.log(element));
  if (colors) { // colors가 있는지 없는지 꼭 확인해주기.
    Array.from(colors).forEach((color) =>
      color.addEventListener("click", handleColorClick)
    );
  }
});
    ✔ 10. jsを使用して、直線の太さを変更します.
    MySQL-ビューとストレージ・プロシージャ
    Android簡易柱状図と曲線グラフ実現