Blazor를 사용하여 DEV의 오프라인 페이지 만들기

나는 창설 페이지에서 재미있는 게시물을 보았다.

개발자의 오프라인 페이지에서 드로잉 상호 작용을 생성하는 방법

아리 스피텔・ 2019년 7월 3일・ 4분 읽기

#javascript #art #showdev

내가 이미 몇 가지 일을 한 것을 감안하여 나는 웹 Assembly에서 자신의 실현을 시도하기로 결정했다. 특히 Blazor.

입문

경고: Blazor는 클라이언트 웹 응용 프로그램을 구축하는 플랫폼을 사용합니다.NET 스택, 특히 C 언어.이것은 고도의 실험성이기 때문에 글을 쓸 때 존재하는 상황을 바꿀 수 있다.
우선, setup guide for Blazor을 따라야 합니다. 완성된 후에 가장 좋아하는 편집기에서 새 프로젝트를 만듭니다. (저는 VS 코드를 사용합니다.)
그리고 3.0.0-preview6.19307.2 및 Pages 폴더의 모든 템플릿 코드 (모든 Shared 파일 제외) 와 _Imports.razor 폴더와 css의 안내를 삭제했습니다.지금 우리는 완전히 비어 있는 Blazor 프로젝트가 하나 있다.

우리의 레이아웃 만들기

우리가 해야 할 첫 번째 일은 Layout file을 만드는 것이다.Blazor, 예를 들어 ASP.NET MVC, 레이아웃 파일을 모든 페이지의 기본 템플릿으로 사용합니다. (음, 이 레이아웃을 사용하는 모든 페이지는 여러 개의 레이아웃을 가질 수 있습니다.)따라서 sample-data에 Shared이라는 새 파일을 만들고 이를 정의합니다.전체 화면이 됐으면 좋겠다는 생각에 간단합니다.

@inherits LayoutComponentBase

@Body

이 파일은 레이아웃에 Blazor가 제공하는 기본 클래스 MainLayout.razor을 계승합니다. 이 기본 클래스는 페이지 내용을 원하는 HTML에 놓을 수 있도록 LayoutComponentBase 속성에 접근할 수 있도록 합니다.우리는 그 주위의 어떤 것도 필요로 하지 않기 때문에, 우리는 페이지에 @Body을 놓아야만 한다.

오프라인 페이지 만들기

오프라인 페이지를 만들 시간이 되었습니다. @Body 폴더에 새 파일을 만들 때부터 Pages이라고 합니다.

@page "/"

<h3>Offline</h3>

이것은 우리의 출발점이다. 우선 Offline.html 지령이 있다. 이것은 Blazor가 우리가 내비게이션할 수 있는 페이지라고 알려주고 응답할 URL은 @page이다.HTML에 자리 표시자가 있습니다. 다음 자리를 대체합니다.

캔버스 시동

오프라인 페이지는 본질적으로 그릴 수 있는 큰 캔버스입니다. 캔버스 요소로 "/"을 업데이트할 수 있도록 만들어야 합니다.

@page "/"

<canvas></canvas>

캔버스 크기 설정

우리는 화포의 크기를 전체 화면으로 설정해야 한다. 지금은 Offline.razor이다. 이것은 이상적이지 않다.이상적인 상황에서 우리는 브라우저의 0x0과 innerWidth을 얻기를 희망합니다. 이를 위해 우리는 Blazor의 JavaScript interop을 사용해야 합니다.
상호 작용을 위해 새 JavaScript 파일을 신속하게 생성합니다(innerHeight으로 이름 지정하고 helper.js에 넣고 wwwroot에서 index.html을 업데이트하여 참조합니다).

window.getWindowSize = () => {
    return { height: window.innerHeight, width: window.innerWidth };
};

다음은 C#wwwroot을 만들어서 이 데이터를 표시할 것입니다. (프로젝트 루트에 struct이라는 파일을 추가했습니다.

namespace Blazor.DevToOffline
{
    public struct WindowSize
    {
        public long Height { get; set; }
        public long Width { get; set; }
    }
}

마지막으로 Blazor 구성 요소에서 사용해야 합니다.

@page "/"
@inject IJSRuntime JsRuntime

<canvas height="@windowSize.Height" width="@windowSize.Width"></canvas>

@code {
    WindowSize windowSize;

    protected override async Task OnInitAsync()
    {
        windowSize = await JsRuntime.InvokeAsync<WindowSize>("getWindowSize");
    }
}

이것은 추가된 코드입니다. 우리가 분해해 봅시다.

@inject IJSRuntime JsRuntime

여기서 우리는 Dependency Injection을 사용하여 WindowSize.cs을 IJSRuntime이라는 속성으로 우리 구성 요소에 주입합니다.

<canvas height="@windowSize.Height" width="@windowSize.Width"></canvas>

다음은 JsRuntime 요소의 height과 width 속성을 <canvas> 실례의 필드 값으로 설정합니다. 이 실례의 이름은 struct입니다.windowSize 접두사를 주의하십시오. 이것은 컴파일러가 정적 문자열이 아니라 C 변수를 가리키는 것을 알려 줍니다.

@code {
    WindowSize windowSize;

    protected override async Task OnInitAsync()
    {
        windowSize = await JsRuntime.InvokeAsync<WindowSize>("getWindowSize");
    }
}

현재, 우리는 구성 요소에 코드 블록을 추가했다.이것은 변수 @을 포함하고 있습니다. (초기화되지 않았지만 구조이기 때문에 기본값이 있습니다.) 그리고 Lifecycle method, windowSize을 다시 씁니다. 그 중에서 자바스크립트를 호출하여 창 크기를 가져와 국부 변수에 분배합니다.
축하해, 너 지금 풀 스크린 캔버스 하나 생겼어!🎉

연결 이벤트

우리는 캔버스를 등장시킬 수도 있지만, 아직 아무것도 하지 않았기 때문에 이벤트 처리 프로그램을 추가해서 이 문제를 해결하자.

@page "/"
@inject IJSRuntime JsRuntime

<canvas height="@windowSize.Height"
        width="@windowSize.Width"
        @onmousedown="@StartPaint"
        @onmousemove="@Paint"
        @onmouseup="@StopPaint"
        @onmouseout="@StopPaint" />

@code {
    WindowSize windowSize;

    protected override async Task OnInitAsync()
    {
        windowSize = await JsRuntime.InvokeAsync<WindowSize>("getWindowSize");
    }

    private void StartPaint(UIMouseEventArgs e)
    {
    }

    private async Task Paint(UIMouseEventArgs e)
    {
    }

    private void StopPaint(UIMouseEventArgs e)
    {
    }
}

Blazor에서 이벤트를 귀속할 때 이벤트 이름 앞에 OnInitAsync, 예를 들어 @을 추가한 다음 이벤트 발생 시 호출할 함수의 이름을 @onmousedown과 같이 제공해야 합니다.이 함수의 서명은 @StartPaint으로 되돌아가든지, void으로 되돌아가든지, 이것은 비동기적인지에 달려 있다.함수의 매개 변수는 DOM 등가물(Task, UIMouseEventArgs 등)에 비치는 적절한 유형의 이벤트 매개 변수가 필요합니다.
참고 JavaScript 참조와 비교할 경우 UIKeyboardEventArgs 이벤트를 사용하지 않았음을 알 수 있습니다.오늘 제 실험에서 Blazor에서 터치 이벤트를 연결하는 버그가 있었기 때문입니다.기억해라, 이것은 미리보기다!

캔버스 컨텍스트 가져오기

주의: 저는 Blazor 설정에서 touch과의 상호작용을 어떻게 하는지 토론할 것입니다. 그러나 실제 응용 프로그램에서 BlazorExtensions/Canvas을 사용하길 원할 수도 있습니다.
캔버스의 2D 컨텍스트를 처리해야 하기 때문에 액세스해야 합니다.문제는 JavaScript API입니다. 저희는 C/WebAssembly에서 재미있을 것입니다.
결국 우리는 자바스크립트에서 이 점을 실현하고 Blazor의 자바스크립트 상호작용 기능에 의존해야 하기 때문에 자바스크립트 작성을 피할 수 없습니다!
작은 JavaScript 모듈을 작성하여 사용할 수 있는 API를 제공합니다.

((window) => {
    let canvasContextCache = {};

    let getContext = (canvas) => {
        if (!canvasContextCache[canvas]) {
            canvasContextCache[canvas] = canvas.getContext('2d');
        }
        return canvasContextCache[canvas];
    };

    window.__blazorCanvasInterop = {
        drawLine: (canvas, sX, sY, eX, eY) => {
            let context = getContext(canvas);

            context.lineJoin = 'round';
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(eX, eY);
            context.lineTo(sX, sY);
            context.closePath();
            context.stroke();
        },

        setContextPropertyValue: (canvas, propertyName, propertyValue) => {
            let context = getContext(canvas);

            context[propertyName] = propertyValue;
        }
    };
})(window);

나는 익명 자동 실행 함수에 패키지 작용 영역을 만들었다. 이렇게 하면 <canvas>이 노출되지 않고 상하문을 계속 가져오는 것을 피할 수 있다.
이 모듈은 우리에게 두 가지 기능을 제공했다. 첫 번째는 화포에 두 점 사이에 선을 긋는 것이다. (우리는 그것을 낙서해야 한다!)두 번째는 상하문의 속성을 업데이트했습니다. (색을 바꾸기 위해 필요합니다!)
너는 아마도 내가 지금까지 canvasContextCache을 쳐 본 적이 없다는 것을 알아차렸을 것이다. 나는 단지 어떤 방식으로 화보를 신기하게 얻었을 뿐이다.이것은 C#의 capturing a component reference을 통해 인용을 전달할 수 있습니다.
그러나 이것은 여전히 JavaScript입니다. 우리는 C에서 무엇을 합니까?좋아, 우리는 C#포장기 종류를 만들었어!

public class Canvas2DContext
{
    private readonly IJSRuntime jsRuntime;
    private readonly ElementRef canvasRef;

    public Canvas2DContext(IJSRuntime jsRuntime, ElementRef canvasRef)
    {
        this.jsRuntime = jsRuntime;
        this.canvasRef = canvasRef;
    }

    public async Task DrawLine(long startX, long startY, long endX, long endY)
    {
        await jsRuntime.InvokeAsync<object>("__blazorCanvasInterop.drawLine", canvasRef, startX, startY, endX, endY);
    }

    public async Task SetStrokeStyleAsync(string strokeStyle)
    {
        await jsRuntime.InvokeAsync<object>("__blazorCanvasInterop.setContextPropertyValue", canvasRef, "strokeStyle", strokeStyle);
    }
}

이것은 포획된 인용과 자바스크립트 상호작용 API를 받아들여 더 좋은 프로그래밍 인터페이스를 제공하는 일반적인 클래스입니다.

컨텍스트 연결

이제 컨텍스트를 연결하고 캔버스에 선을 그릴 수 있습니다.

@page "/"
@inject IJSRuntime JsRuntime

<canvas height="@windowSize.Height"
        width="@windowSize.Width"
        @onmousedown="@StartPaint"
        @onmousemove="@Paint"
        @onmouseup="@StopPaint"
        @onmouseout="@StopPaint"
        @ref="@canvas" />

@code {
    ElementRef canvas;

    WindowSize windowSize;

    Canvas2DContext ctx;
    protected override async Task OnInitAsync()
    {
        windowSize = await JsRuntime.InvokeAsync<WindowSize>("getWindowSize");
        ctx = new Canvas2DContext(JsRuntime, canvas);
    }

    private void StartPaint(UIMouseEventArgs e)
    {
    }

    private async Task Paint(UIMouseEventArgs e)
    {
    }

    private void StopPaint(UIMouseEventArgs e)
    {
    }
}

document.getElementById을 @ref="@canvas" 요소에 추가함으로써 필요한 인용을 만들었고, <canvas> 함수에서 사용할 OnInitAsync을 만들었습니다.

캔버스에 그리기

우리는 마침내 캔버스에 도형을 그릴 준비가 되었다. 이것은 우리가 이러한 이벤트 처리 프로그램을 실현해야 한다는 것을 의미한다.

    bool isPainting = false;
    long x;
    long y;
    private void StartPaint(UIMouseEventArgs e)
    {
        x = e.ClientX;
        y = e.ClientY;
        isPainting = true;
    }

    private async Task Paint(UIMouseEventArgs e)
    {
        if (isPainting)
        {
            var eX = e.ClientX;
            var eY = e.ClientY;

            await ctx.DrawLine(x, y, eX, eY);
            x = eX;
            y = eY;
        }
    }

    private void StopPaint(UIMouseEventArgs e)
    {
        isPainting = false;
    }

물론 이것은 자바스크립트의 실현과 크게 다르지 않다. 그들이 해야 할 일은 마우스 이벤트에서 좌표를 얻고 이를 캔버스 상하문 패키지에 전달하는 것이다. 후자는 적당한 자바스크립트 함수를 반대로 호출하는 것이다.

결론

🎉 우리 끝났어!running here을 볼 수 있습니다. 코드는 GitHub에 있습니다.

앨런 바벨 / blazor devto 오프라인

Blazor를 사용하여 DEV.to의 오프라인 페이지를 만드는 방법 설명

이 저장소에는 Blazor을 사용하여 만든 예가 들어 있습니다.
너는 이곳에서 https://blazordevtooffline.z23.web.core.windows.net/을 찾을 수 있다.
View on GitHub
이것은 Blazor에 대한 신속한 이해이다. 그러나 더욱 중요한 것은 우리가 자바스크립트와 더 많은 상호작용을 해야 할 장면에서 Blazor를 어떻게 사용하는가이다. 이것은 많은 장면에 필요한 것이다.
나는 네가 그것을 좋아하고 자신의 Blazor 실험을 처리할 준비가 되어 있기를 바란다. 그리고!

상금, 색상 선택기

위의 예시에서 우리가 하지 않은 일이 하나 있다. 그것은 바로 색 선택기를 실현하는 것이다.
나는 그것을 일반적인 구성 요소로 하고 싶다. 이렇게 하면 우리는 할 수 있다.

<ColourPicker OnClick="@SetStrokeColour"
              Colours="@colours" />

Canvas2DContext이라는 새 파일에서 (파일 이름은 매우 중요합니다. 이것은 구성 요소의 이름이기 때문에) 우리는 우리의 구성 요소를 만들 것입니다.

<div class="colours">
    @foreach (var colour in Colours)
    {
        <button class="colour"
                @onclick="@OnClick(colour)"
                @key="@colour">
        </button>
    }
</div>

@code {
    [Parameter]
    public Func<string, Action<UIMouseEventArgs>> OnClick { get; set; }

    [Parameter]
    public IEnumerable<string> Colours { get; set; }
}

우리 구성 요소는 두 개의 매개 변수가 있습니다. 부모 설정, 색 집합, 단추를 눌렀을 때 호출할 수 있는 함수입니다.내가 만든 이벤트 처리 프로그램에 대해 되돌아오는 함수를 전송할 수 있습니다. 따라서 ColourPicker.razor 요소를 만들 때 색의 이름으로 귀속됩니다.
이것은 우리가 이런 용법을 가지고 있다는 것을 의미한다.

@page "/"
@inject IJSRuntime JsRuntime

<ColourPicker OnClick="@SetStrokeColour"
              Colours="@colours" />

// snip

@code {
    IEnumerable<string> colours = new[] { "#F4908E", "#F2F097", "#88B0DC", "#F7B5D1", "#53C4AF", "#FDE38C" };

    // snip

    private Action<UIMouseEventArgs> SetStrokeColour(string colour)
    {
        return async _ =>
        {
            await ctx.SetStrokeStyleAsync(colour);
        };
    }
}

지금, 만약 당신이 맨 위의 색 선택기를 클릭한다면, 당신은 다른 색 펜을 얻을 수 있을 것이다.
낙서 즐거움!