wslでelixir その170

概要

wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

練習問題

Livebookの、kino.jsで、黒板を動作させよ。

写真

サンプルコード

defmodule KinoHTML.Drawline do
  use Kino.JS
	def new(toolbox) do
		Kino.JS.new(__MODULE__, toolbox)
	end
	asset "main.js" do
		"""
		export async function init(ctx, toolbox) {
      ctx.root.innerHTML = `
            <canvas id="canvas" style="height: 400px; width: 400px;"></canvas>
			`;
    let canvas = document.getElementById("canvas");
    let ctx2 = canvas.getContext("2d");
    let clickFlg = 0;
    canvas.width = 400
    canvas.height = 400
    function setBgColor() {
      ctx2.fillRect(0, 0, 400, 400);
    }    
    setBgColor();
    function draw(x, y) {
      ctx2.lineWidth = 10;
      ctx2.strokeStyle = 'rgba(255, 255, 255, 1)';
      if (clickFlg == "1") 
      {
        clickFlg = "2";
        ctx2.beginPath();
        ctx2.lineCap = "round";
        ctx2.moveTo(x, y);
      } 
      else 
      {
        ctx2.lineTo(x, y);
      }
      ctx2.stroke();
    };
    canvas.addEventListener("mousedown",() => {
      clickFlg = 1;
    })
    canvas.addEventListener("mouseup", () => {
      clickFlg = 0;
    })
    canvas.addEventListener("mousemove", (e) => {
      if (!clickFlg) 
        return false;
      var t = e.currentTarget.getBoundingClientRect();
    	var x = e.offsetX - t.left;
    	var y = e.offsetY - t.top;
      draw(x, y);
    });    
  }
    """
  end
end

KinoHTML.Drawline.new(0)

以上。