在Scala.js上绘制画布

在服务器端，我创建了一个简单的页面，用帆布：现在

import scalatags.Text.all._ 

html(
    body(
    div(
     h3("Let's draw something ️"), 
     canvas("canvas-id") 
    ) 
) 
)

，在客户端，我想用户能够绘制在画布上的老鼠。

我该怎么做？

来源

2017-05-08 Matthias Braun

在客户端，我通过ID获取画布，借鉴它，当用户在将鼠标移动到：

get[Canvas]("canvas-id").fold(
    errorMsg => logger.warn("Could not find canvas. Error is {}", errorMsg), 
    canvas => drawOnCanvasWhenMouseMoved(canvas) 
)

这是get方法，它返回一个类型的元素：

/** 
    * Gets an element of type `T` by an `elementId`. Returns either the element if found 
    * or an [[ErrorMsg]]. 
    */ 
def get[T: ClassTag](elementId: String): Either[ErrorMsg, T] = { 
    val queryResult = document.querySelector(s"#$elementId") 
    queryResult match { 
    case elem: T => Right(elem) 
    case other => Left(ErrorMsg(s"Element with ID $elementId is $other")) 
    } 
}

其中ErrorMsg是一个简单的值类：

case class ErrorMsg(value: String) extends AnyVal { 
    override def toString: String = value 
}

我画使用CanvasRenderingContext2D：

private def drawOnCanvasWhenMouseMoved(canvas: Canvas) = { 
    getContext2D(canvas).fold(
    errorMsg => logger.warn("Couldn't get rendering context of canvas: {}. Error: {}", canvas, errorMsg), 
    context => canvas.onmousemove = { e: MouseEvent => drawOnCanvas(e, context) } 
) 

    def drawOnCanvas(e: MouseEvent, context: CanvasRenderingContext2D) = { 
    val x = e.clientX - canvas.offsetLeft 
    val y = e.clientY - canvas.offsetTop 

    context.fillStyle = "green" 
    context.fillRect(x, y, 2, 2) 
    } 
}

最后，得到的渲染下，我用getContext：

/** Returns either this [[Canvas]]' [[CanvasRenderingContext2D]] or 
    * an [[ErrorMsg]] if that fails. */ 
private def getContext2D(canvas: Canvas): Either[ErrorMsg, CanvasRenderingContext2D] = 
    if (canvas != null) 
    canvas.getContext("2d") match { 
     case context: CanvasRenderingContext2D => Right(context) 
     case other => Left(ErrorMsg(s"getContext(2d) returned $other")) 
    } 
    else 
    Left(ErrorMsg("Can't get rendering context of null canvas"))

结果：

来源

2017-05-08 18:26:58

在Scala.js上绘制画布

回答

相关问题