React 갈고리가 있는 HTML 캔버스를 어떻게 사용합니까

React로 색상 선택기 웹 응용 프로그램을 만들고 있습니다.웹에서 색상 선택기와 유사한 래스터 이미지를 그리려면 <canvas> HTML 요소가 필요합니다.그러나 HTML 캔버스와 리액트는 나란히 나아가기가 쉽지 않다.
나는 이 주제에 관한 웹 기사를 많이 발견했는데, 대부분이 React 클래스 구성 요소를 사용하기 때문에 유행이 지난 것이다.React 갈고리가 달린 것은 유용하지만, 완전히 정확하지는 않다.그래서 나는 나의 웹 개발 프로젝트에서 그것을 실현하는 데 매우 오랜 시간이 걸렸다.
리액션 프로그램에서 캔버스 요소를 설정하는 데 시간을 절약하기 위해 리액션 연결된 HTML 캔버스의 최종 버전 (내 프레젠테이션을 가리키는 링크) 을 사용하는 방법을 공유합니다.

TL；박사 01 명

먼저 <canvas> 요소로 React 구성 요소를 생성합니다.

// src/components/Canvas.js

import React from 'react';
import PropTypes from 'prop-types';

const Canvas = ({draw, height, width}) => {
  const canvas = React.useRef();

  React.useEffect(() => {
    const context = canvas.current.getContext('2d');
    draw(context);
  });

  return (
    <canvas ref={canvas} height={height} width={width} />
  );
};

Canvas.propTypes = {
  draw: PropTypes.func.isRequired,
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
};

export default Canvas;

그리고 이 구성 요소를 props과 함께 사용하면 이미지 그리기 기능(draw)과 이미지 해상도 및 가로세로비(width 및 height)를 참조할 수 있습니다.

// src/App.js

import Canvas from './components/Canvas';

const draw = context => {
  // Insert your canvas API code to draw an image
};

function App() {
  return (
    <Canvas draw={draw} height={100} width={100} />
  );
}

export default App;

위 코드에 대한 프레젠테이션은 my CodeSandbox으로 문의하십시오.
다음은 제가 상술한 코드를 6단계로 분해하여 당신이 현재 발생하고 있는 일을 이해하는 데 도움을 드리겠습니다.; -)
주의: canvas 요소를 사용하여 그림을 그리는 방법을 알고 싶으면 MDN의 튜토리얼 (MDN Contributors 2019) 을 추천합니다.

단계 1: 캔버스 요소 렌더링

// src/components/Canvas.js

import React from 'react';

const Canvas = () => {
  return (
    <canvas
      width="100"
      height="100"
    />
  )
};

export default Canvas;

width과 height 속성은 canvas 요소가 만든 이미지의 두 가지 측면을 결정한다. 그것이 바로 이미지 해상도와 종횡비이다.

이미지 해상도

위 예에서 이미지는 100 x 100 픽셀로 구성됩니다.이 경우 이미지 너비의 1/100보다 작은 선을 그리면 아상소가 렌더링되므로 성능 때문에 피하십시오(MDN Contributors 2019b 참조).만약 가장 가는 선이 이미지 너비의 1/200이라면 width="200"을 설정해야 한다.

종횡비

위의 예에서는 이미지의 세로 비율을 1:1(즉, 사각형)으로 정의합니다.만약 우리가 width과 height 속성을 지정하지 않았다면 (HTML 화보의 많은 문장과 같이) 기본 가로는 2:1 (300px 너비, 150px 높이) 보다 적용될 것입니다.이 경우 CSS를 사용하는 스타일에 따라 이미지가 확장될 수 있습니다(MDN Contributors 2019a 참조).Corey's (2019)React 갈고리 렌더링 요소를 어떻게 사용하는지에 대한 유용한 글은 width과 height의 속성을 지정하지 못해 이 함정에 빠진 것 같다.
지금까지 반응과는 무관하다.HTML 캔버스를 사용할 때마다 width과 height 속성을 설정해야 합니다.

2단계:canvas 요소 참조

<canvas> 요소를 사용하여 이미지를 그리려면 먼저 JavaScript에서 참조해야 합니다.HTML 캔버스의 입문 강좌(예를 들어 MDN Contributors 2019a)는 document.getElementById(id)을 사용하라고 알려줍니다. 그 중에서 id은 캔버스 요소의 id 속성 값입니다.
그러나React에서 useRef 갈고리를 사용하는 것은 방법(Farmer 2018 원인 파악 참조)이다.useRef()을 가리키는 변수를 만들고 이 변수를 canvas 요소의 ref 속성의 값으로 사용합니다.

// src/components/Canvas.js

import React from 'react';

const Canvas = () => {
  const canvas = React.useRef(); // ADDED

  return (
    <canvas
      ref={canvas} // ADDED
      width="100"
      height="100"
    />
  )
}

export default Canvas;

이렇게 하면 캔버스 요소가 화면에 나타나면 자바스크립트 코드에서 이를 canvas.current이라고 할 수 있다.상세한 것은 React (2020a)을 보십시오.

3단계: 캔버스 컨텍스트 작성

canvas 요소에서 그림을 그리려면 CanvasRenderingContext2D 대상을 만들어야 합니다. (코드에는 context 또는 ctx 같은 변수 이름이 지정됩니다.)
이 단계는 React에서 HTML 캔버스를 사용하는 데 가장 까다로운 부분이다.솔루션은 useEffect 연계:

// src/components/Canvas.js

import React from 'react';

const Canvas = () => {
  const canvas = React.useRef();

  // ADDED
  React.useEffect(() => {                             
    const context = canvas.current.getContext('2d'); 
  });

  return (
    <canvas
      ref={canvas}
      width="100"
      height="100"
    />
  )
}

export default Canvas;

앞에서 말한 바와 같이 canvas.current은 상기 코드 중의 <canvas> 요소를 가리킨다.그러나 React가 실제 화면에 캔버스 요소를 나타내기 전에는 null이었다.React에서 구성 요소를 보여준 후에 코드를 실행하려면 useEffect 갈고리로 묶어야 한다(West 2019, useEffect 코드 블록이 React 구성 요소의 생명 주기 내에 운행하는 시간을 참조하십).
따라서 코드 블록에서 canvas.current은 <canvas> 요소를 인용했다.이것은 내가 Corey (2019), Nanda 2020과 van Gilst (2019)에서 배운 기교다.

4. 그림 한 장 그리기

현재 우리는 context 대상의 각종 방법을 사용하여 그림을 그릴 준비가 되어 있다(MDN Contributors 2020 참조).
그러나 지금까지 작성한 코드를 다시 사용하려면 그림을 그리는 코드와 분리하는 것이 좋습니다.따라서 우리는 함수를 도구로 Canvas 구성 요소에 전달한다(나는 Nanda 2020의 생각을 빌려 썼다).

// src/components/Canvas.js

import React from 'react';
import PropTypes from 'prop-types'; // ADDED

const Canvas = ( {draw} ) => { // CHANGED
  const canvas = React.useRef();

  React.useEffect(() => {                             
    const context = canvas.current.getContext('2d'); 
    draw(context); // ADDED
  });

  return (
    <canvas
      ref={canvas}
      width="100"
      height="100"
    />
  )
};

// ADDED
Canvas.propTypes = {
  draw: PropTypes.func.isRequired,
};

export default Canvas;

draw() 함수는 다른 파일에 정의할 그림을 그리는 데 사용됩니다.다양한 드로잉 방법에 액세스하기 위해 context을 매개변수로 사용합니다.Canvas 부품은 현재 도구를 사용하기 때문에 저는 PropTypes을 추가하여 각 도구의 데이터 유형을 명확하게 했습니다(React 2020b 참조).

5단계: 구성 요소 재사용 가능

현재, 만약 우리가 이 Canvas 구성 요소를 다시 사용하고 싶다면, 우리는 그것의 width과 height 속성을 하드코딩하고 싶지 않다.서로 다른 이미지는 서로 다른 해상도와 종횡비를 가지고 있다.
따라서 두 값을 다른 도구로 변환합니다.

// src/components/Canvas.js

import React from 'react';
import PropTypes from 'prop-types';

const Canvas = ( {draw, height, width} ) => { // CHANGED
  const canvas = React.useRef();

  React.useEffect(() => {                             
    const context = canvas.current.getContext('2d'); 
    draw(context);
  });

  return (
    <canvas
      ref={canvas}
      width={width}   // CHANGED
      height={height} // CHANGED
    />
  )
}

// ADDED
Canvas.propTypes = {
  draw: PropTypes.func.isRequired,
  height: PropTypes.number.isRequired, // ADDED
  width: PropTypes.number.isRequired, // ADDED
};

export default Canvas;

PropTypes을 사용하는 장점 중 하나는 .isRequired을 추가하면 도구 값을 설정하는 것을 잊지 않도록 컨트롤러에서 경보를 받을 수 있다는 것이다.위에서 설명한 바와 같이 width 및 height 속성은 성능 및 이미지 왜곡을 방지하기 위해 가장 적합한 속성입니다.상술한 코드를 사용하면, 우리가 그것들의 값을 지정하는 것을 잊어버리면, 우리는 경보를 받을 것이다.

6단계: 캔버스 어셈블리 렌더링

마지막으로, 상위 어셈블리에서는 Canvas 어셈블리를 표시하고 draw() 함수를 지정합니다.

// src/App.js

import React from 'react';
import Canvas from './components/Canvas'; // Change the path according to the directory structure of your project

const draw = context => {
  // Insert your code to draw an image
};

function App() {
  return (
    <Canvas draw={draw} height={100} width={100} />
  );
}

export default App;

데모

my CodeSandbox demo과 어떻게 협동하여 일을 하는지 봅시다.
본문과 위의 설명은 웹 응용 프로그램 프로젝트에서React를 사용하여 캔버스 그림을 그리는 데 도움을 줄 수 있기를 바랍니다.
본고는 내가 웹 개발에 관한 일련의 블로그 글 Web Dev Survey from Kyoto의 일부분이다.그것은 인터넷 개발 회의에 일본 교토로 독자들이 초청되는 것을 모의할 계획이다.그러므로 본고는 이번 시즌 교토의 한 장의 사진으로 끝난다. 마치 당신이 회의가 끝난 후에 관광하는 것과 같다.
오늘, 내가 너희들을 데리고 성현의 입구 화원으로 갈게. 이것은 암석 화원으로 유명한 용척사의 자묘야.

2020년 12월 1일 오전 9시 54분, 성제사 입구 화원.Masa Kudamatsu가 촬영했습니다.
오늘 뭔가 배웠으면 좋겠어!즐거운 코딩!

각주

본고에서 저는 Author-Date referencing system을 사용하여 웹 개발에 관한 각종 문장을 참고합니다.

도구책

코리(2019)'Animating a Canvas with React Hooks', 피터 코리.com, 2019년 8월 19일.
Farmer, Andrew H.(2018) "Why to use refs instead of IDs", JavaScript Stuff, 2018년 1월 27일.
MDN 기여자(2019a)'Basic usage of canvas', MDN 네트워크 문서, 2019년 12월 5일.
MDN 기고자(2019b)'Optimizing canvas', MDN 네트워크 문서, 2019년 4월 7일.
MDN 기여자(2019c)'Canvas tutorial', MDN 네트워크 문서, 2019년 12월 1일.
MDN 기여자(2020)'Drawing shapes with canvas', MDN 네트워크 문서, 2020년 8월 5일.
남달, Souradeep(2020)'An answer to ‘Rendering / Returning HTML5 Canvas in ReactJS’', 창고가 넘쳐흐르고 2020년 8월 2일.
React(2020a)'Hooks API Reference', React 파일, 2020년 3월 9일.
React(2020b)'Typechecking with PropTypes', React 파일, 2020년 11월 25일.
판길스터(2019)'Using React Hooks with canvas', 블로그.코빈 바기스트.2019년 3월 16일 네덜란드.
도나폰 서부(2019)'React Hook Flow Diagram', 지트후브, 2019년 3월 12일.