Dev's는 재미있고 우리는 .

이동은 간단합니다. Go와 WebAssembly에서 할 수 있습니까? 대답은 예입니다...



샘플 애플리케이션here이 있습니다. 처음부터 작성하려면 .

소스코드만 보고 싶다면 check out this branch .

코드 코드 코드

먼저 go/main.go 에서 "syscall/js"및 "fmt"를 가져옵니다.

The "syscall/js" package gives access to the WebAssembly host environment when using the js/WASM architecture. Its API is based on JavaScript semantics. This package is EXPERIMENTAL. 🦄 🦄

package main 


import( 
    "fmt"
    "syscall/js"
)

전역적으로 사용 가능한 몇 가지 변수를 추가합니다. 이러한 변수는 JavaScript 랜드 또는 브라우저에서 함수를 호출할 때 사용해야 할 수 있는 변수입니다.

var (
    isPainting bool
    x          float64
    y          float64
    ctx        js.Value
    color      string
)

out/index.html 에 캔버스 요소를 수동으로 추가합니다.

<canvas id="canvas"> </canvas>

Hello World 함수 내에서 main 줄을 제거하고 다음으로 바꿉니다.

브라우저에서 document 개체를 가져옵니다. document를 사용하여 방금 추가한 canvas 요소를 가져옵니다.
syscall/js API를 사용하여 이를 수행할 수 있습니다.

func main() {

    doc := js.Global().Get("document")
    canvasEl := doc.Call("getElementById", "canvas")
}

API는 간단합니다. JavaScript의 전역 네임스페이스에서 문서를 가져옵니다.

문서 내에서 Id로 캔버스 요소를 호출합니다.

너비, 높이와 같은 canvasEl의 일부 속성을 설정합니다. 우리는 또한 캔버스'context를 얻을 것입니다.

bodyW := doc.Get("body").Get("clientWidth").Float()
bodyH := doc.Get("body").Get("clientHeight").Float()
canvasEl.Set("width", bodyW)
canvasEl.Set("height", bodyH)
ctx = canvasEl.Call("getContext", "2d")

그런 다음 세 개의 이벤트 리스너를 정의합니다mousedown | mousemove | mouseup에서 canvasElement로 .

마우스 다운

마우스를 클릭하면 페인팅을 시작합니다.

startPaint := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
    e := args[0]
    isPainting = true

    x = e.Get("pageX").Float() - canvasEl.Get("offsetLeft").Float()
    y = e.Get("pageY").Float() - canvasEl.Get("offsetTop").Float()
    return nil
})


canvasEl.Call("addEventListener", "mousedown", startPaint)

Please note that return nil is important otherwise the program will not compile.

전체 API는 Reflect API 을 기반으로 합니다.

마우스 이동

페인트 기능을 정의합니다.

paint := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
    if isPainting {
        e := args[0]
        nx := e.Get("pageX").Float() - canvasEl.Get("offsetLeft").Float()
        ny := e.Get("pageY").Float() - canvasEl.Get("offsetTop").Float()

        ctx.Set("strokeStyle", color)
        ctx.Set("lineJoin", "round")
        ctx.Set("lineWidth", 5)

        ctx.Call("beginPath")
        ctx.Call("moveTo", nx, ny)
        ctx.Call("lineTo", x, y)
        ctx.Call("closePath")

        // actually draw the path*
        ctx.Call("stroke")

        // Set x and y to our new coordinates*
        x = nx
        y = ny
    }
    return nil
})
canvasEl.Call("addEventListener", "mousemove", paint)

마우스 업

마지막으로 Mouse Up 이벤트가 발생할 때 호출되는 종료 메소드를 정의합니다.

    exit := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        isPainting = false
        return nil
    })

    canvasEl.Call("addEventListener", "mouseup", exit)

마지막으로 색상 선택기를 정의합니다. out/index.html에 색상 div를 추가하고 필요한 CSS를 추가합니다.

<style>
     .color {
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            margin: 10px;
       }
</style>

<div id="colors></div>

색상을 배열로 정의합니다. 그런 다음 색상을 반복하고 색상 견본 노드를 만듭니다. 색상 견본에 클릭 이벤트 리스너를 추가합니다.

divEl := doc.Call("getElementById", "colors")

    colors := [6]string {"#F4908E", "#F2F097", "#88B0DC", "#F7B5D1", "#53C4AF", "#FDE38C"}

    for _, c := range colors {  
        node := doc.Call("createElement", "div")
        node.Call("setAttribute","class", "color")
        node.Call("setAttribute", "id", c)
        node.Call("setAttribute","style", fmt.Sprintf("background-color: %s", c))

        setColor := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
                e := args[0]
                color = e.Get("target").Get("id").String()
                return nil;
        })


        node.Call("addEventListener", "click", setColor)


        divEl.Call("appendChild", node)


    }

그게 다야.

이제 go run webServer.go를 실행하여 웹 서버를 시작합니다.

다음을 사용하여 Go into WebAssembly 모듈을 컴파일합니다.

tinygo build -o ./out/main.wasm -target wasm -no-debug ./go/main.go

를 방문하여 창의력을 발휘할 수 있는 멋진 캔버스 보드를 확인하세요 🦄.

💡 생성된WebAssembly 모듈은 52KB에 불과합니다. TinyGo는 훌륭하고 매우 작은 WebAssembly 바이너리를 생성합니다. 어떻게 생성합니까? 이 시리즈의 다음 게시물을 기대해 주세요. 💡

Note: Use Firefox / Firefox Nightly. Chrome sometimes crash.

더 많은 최적화 ❤️

Remove the fmt import and replace fmt.Sprintf with a normal String concatenation, this will shave off another 26KB. Check the commit here.

이 팁을 공유해 주신 Justin Clift에게 감사드립니다 :)

당신은 ❤️ 녹슬나요? WebAssembly에 Rust를 사용하는 방법을 확인하세요.

이것이 멋진 WebAssembly 여정을 시작하는 동기가 되기를 바랍니다. 질문/제안/내가 뭔가를 놓친 느낌이 있으면 언제든지 의견을 추가하십시오.

에서 나를 팔로우할 수 있습니다.

이 글이 마음에 드셨다면 좋아요나 댓글을 남겨주세요. ❤️

감사


.ltag__user__id__38627 .follow-action-button {
배경색: #FFF2F5 !중요;
색상: #FF80AB !중요;
테두리 색상: #FFF2F5 !중요;
}

알리 스피텔

Passionate about education, Python, JavaScript, and code art.



에 대한 .