elm-canvas에서 Canvas API를 사용합시다!
오늘은 크리스마스입니다. 어떻습니까?
나는 이 어드벤트 캘린더를 서둘러 쓰고 있습니다.
갑작스럽지만 elm에서 캔버스를 사용하고 싶을 때가 있습니다.
내가 있습니다.
그래서 elm-canvas을 소개하고 싶습니다.
도입 방법
$ npm i elm-canvas
$ elm install joakin/elm-canvas
// main.js
import 'elm-canvas';
or
<!-- index.html -->
<head>
<script src="https://unpkg.com/elm-canvas/elm-canvas.js"></script>
</head>
ellie 에서 사용하고 싶은 사람은 CDN에서 import하는 방법으로 합시다.
사용법
ImageData 를 만지는 시스템의 API 이외는 제공되고 있기 때문에 보통의 canvas 와 같이 취급할 수 있습니다.
직사각형 그리기
기본적인 곳에서 갑시다.
사각형의 그리기는
rectRender : Renderable
rectRender =
shapes
[ fill Color.red ]
[ rect (100, 100) 50 50 ]
이런 느낌으로 쓰면 座標(100, 100) 곳에 50 x 50 의 구형을 赤で塗りつぶし 로 그릴 수 있습니다.
자세히 살펴 보겠습니다.
기본 함수는 shapes : List Setting -> List Shape -> Renderable 입니다.Setting 는 주로 채우기 테두리의 색, 이동·회전·확대 등 외형에 관계되는 부분을 취급합니다. Html.Attribute 같은 느낌이네요.Shape 는 구형이나 원, path 등의 형태의 정보입니다.
이것들을 shapes 함수에 넣는 것으로 그려줍니다. 같은 외형이 되는 형태는 1개의 shapes 함수로 묘화 하면 좋은 것 같습니다.
원 그리기
그럼, 座標(100, 100) 의 곳에 半径50 의 원을 緑で縁取り 그려 봅시다.
위의 설명에서 생각하면 List Setting 곳에 緑で縁取り 를 List Shape 곳에 座標(100, 100)のところに半径50の円 를 넣으면 좋을 것 같습니다.
따라서 정답은 이런 느낌입니다.
circleRender : Renderable
circleRender =
shapes
[ stroke Color.green ]
[ circle (100, 100) 50 ]
테두리는 보통 canvas 같이 stroke 에서 할 수 있습니다.
원은 circle 함수를 사용하여 표현할 수 있습니다. 간단하죠?
브라우저에 그리기
이것만으로는 그릴 수 없습니다. html로합시다. toHtml 함수를 사용합니다.toHtml : Point -> List (Html.Attribute msg) -> List Renderable -> Html msg 이므로 view 함수의 임의의 위치에 넣어 봅시다.
view : Model -> Html msg
view model =
div []
[ toHtml (model.width, model.height)
[]
[ clear
, render
]
]
같은 느낌
주의점
이 package는 어디까지나 elm용으로 CanvasAPI를 사용할 수 있도록 한 것이므로 스스로 화면의 갱신을 해야 합니다.
화면 업데이트는 이전 프레임에서 그린 내용을 지우는 것입니다. canvas에는 clearRect가 있지만이 패키지에는 없습니다. 캔버스의 영역을 임의의 색으로 채우는 함수를 만들어 두면 편리합니다.
게다가 shapes 이나 toHtml 의 Renderable 의 순서는 묘화의 순서입니다.
그래서 위의 예에서 clear 와 render 를 반대로 쓰면 원하는 결과가 되지 않을 것입니다. 거기에 생각하고 코딩합시다.
마지막으로 좌표 지정이 (Float, Float)인 튜플입니다. 이 부분에 대해서는 특별히 말하지 않습니다. 최선을 다합시다.
요약
이 외에도 path 를 이용한 복잡한 도형이나 텍스트 등을 그릴 수 있습니다.
나 자신도 이 기사를 위해서 크리스마스 같은 것을 만들려고 했습니다만, 기사를 쓰려고 한 8일전에 이 package가 갱신되어 사양이 완전히 바뀌고 있었습니다. . .
혼란의 근원이 되기 때문에 소스 코드는 싣지 않습니다만, 되어 있는 것은 싣고 싶습니다.
눈이 내렸다 피 c. 라고 r. 이 m / T96 또는 gJ3 — 우지마루🐣 (@uzimaru0601) December 3, 2018
아직 모든 기능을 접할 수 없으므로 수시로 업데이트하고 싶습니다.
갱신전과 갱신후의 변경으로서는, 선언적으로 쓸 수 있게 되었습니다. 아마도 업데이트 빈도가 높은 라이브러리이므로 사용할 때는 문서를 읽으십시오.
그럼 좋은 해가 
Reference
이 문제에 관하여(elm-canvas에서 Canvas API를 사용합시다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uzimaru0000/items/80bf1f04bf4faf219f21
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npm i elm-canvas
$ elm install joakin/elm-canvas
// main.js
import 'elm-canvas';
<!-- index.html -->
<head>
<script src="https://unpkg.com/elm-canvas/elm-canvas.js"></script>
</head>
ImageData 를 만지는 시스템의 API 이외는 제공되고 있기 때문에 보통의 canvas 와 같이 취급할 수 있습니다.직사각형 그리기
기본적인 곳에서 갑시다.
사각형의 그리기는
rectRender : Renderable
rectRender =
shapes
[ fill Color.red ]
[ rect (100, 100) 50 50 ]
이런 느낌으로 쓰면
座標(100, 100) 곳에 50 x 50 의 구형을 赤で塗りつぶし 로 그릴 수 있습니다.자세히 살펴 보겠습니다.
기본 함수는
shapes : List Setting -> List Shape -> Renderable 입니다.Setting 는 주로 채우기 테두리의 색, 이동·회전·확대 등 외형에 관계되는 부분을 취급합니다. Html.Attribute 같은 느낌이네요.Shape 는 구형이나 원, path 등의 형태의 정보입니다.이것들을
shapes 함수에 넣는 것으로 그려줍니다. 같은 외형이 되는 형태는 1개의 shapes 함수로 묘화 하면 좋은 것 같습니다.원 그리기
그럼,
座標(100, 100) 의 곳에 半径50 의 원을 緑で縁取り 그려 봅시다.위의 설명에서 생각하면
List Setting 곳에 緑で縁取り 를 List Shape 곳에 座標(100, 100)のところに半径50の円 를 넣으면 좋을 것 같습니다.따라서 정답은 이런 느낌입니다.
circleRender : Renderable
circleRender =
shapes
[ stroke Color.green ]
[ circle (100, 100) 50 ]
테두리는 보통 canvas 같이
stroke 에서 할 수 있습니다.원은
circle 함수를 사용하여 표현할 수 있습니다. 간단하죠?브라우저에 그리기
이것만으로는 그릴 수 없습니다. html로합시다.
toHtml 함수를 사용합니다.toHtml : Point -> List (Html.Attribute msg) -> List Renderable -> Html msg 이므로 view 함수의 임의의 위치에 넣어 봅시다.view : Model -> Html msg
view model =
div []
[ toHtml (model.width, model.height)
[]
[ clear
, render
]
]
같은 느낌
주의점
이 package는 어디까지나 elm용으로 CanvasAPI를 사용할 수 있도록 한 것이므로 스스로 화면의 갱신을 해야 합니다.
화면 업데이트는 이전 프레임에서 그린 내용을 지우는 것입니다. canvas에는 clearRect가 있지만이 패키지에는 없습니다. 캔버스의 영역을 임의의 색으로 채우는 함수를 만들어 두면 편리합니다.
게다가 shapes 이나 toHtml 의 Renderable 의 순서는 묘화의 순서입니다.
그래서 위의 예에서 clear 와 render 를 반대로 쓰면 원하는 결과가 되지 않을 것입니다. 거기에 생각하고 코딩합시다.
마지막으로 좌표 지정이 (Float, Float)인 튜플입니다. 이 부분에 대해서는 특별히 말하지 않습니다. 최선을 다합시다.
요약
이 외에도 path 를 이용한 복잡한 도형이나 텍스트 등을 그릴 수 있습니다.
나 자신도 이 기사를 위해서 크리스마스 같은 것을 만들려고 했습니다만, 기사를 쓰려고 한 8일전에 이 package가 갱신되어 사양이 완전히 바뀌고 있었습니다. . .
혼란의 근원이 되기 때문에 소스 코드는 싣지 않습니다만, 되어 있는 것은 싣고 싶습니다.
눈이 내렸다 피 c. 라고 r. 이 m / T96 또는 gJ3 — 우지마루🐣 (@uzimaru0601) December 3, 2018
아직 모든 기능을 접할 수 없으므로 수시로 업데이트하고 싶습니다.
갱신전과 갱신후의 변경으로서는, 선언적으로 쓸 수 있게 되었습니다. 아마도 업데이트 빈도가 높은 라이브러리이므로 사용할 때는 문서를 읽으십시오.
그럼 좋은 해가
Reference
이 문제에 관하여(elm-canvas에서 Canvas API를 사용합시다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/uzimaru0000/items/80bf1f04bf4faf219f21
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이 외에도
path 를 이용한 복잡한 도형이나 텍스트 등을 그릴 수 있습니다.나 자신도 이 기사를 위해서 크리스마스 같은 것을 만들려고 했습니다만, 기사를 쓰려고 한 8일전에 이 package가 갱신되어 사양이 완전히 바뀌고 있었습니다. . .
혼란의 근원이 되기 때문에 소스 코드는 싣지 않습니다만, 되어 있는 것은 싣고 싶습니다.
눈이 내렸다 피 c. 라고 r. 이 m / T96 또는 gJ3 — 우지마루🐣 (@uzimaru0601) December 3, 2018
아직 모든 기능을 접할 수 없으므로 수시로 업데이트하고 싶습니다.
갱신전과 갱신후의 변경으로서는, 선언적으로 쓸 수 있게 되었습니다. 아마도 업데이트 빈도가 높은 라이브러리이므로 사용할 때는 문서를 읽으십시오.
그럼 좋은 해가
Reference
이 문제에 관하여(elm-canvas에서 Canvas API를 사용합시다!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uzimaru0000/items/80bf1f04bf4faf219f21텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
