FlowLayout-situation.scala

// 점과 면이 있다.
case class Point(x: Double, y: Double)
case class Dimension(width: Double, height: Double) {
  override def toString: String = s"Dimension(width: $width, height: $height)"
}

// 요소와 경계가 있다.
case class Element(x: Double, y: Double, width: Double, height: Double)
case class Bounds(x: Double, y: Double, width: Double, height: Double) {

  def location = Point(x, y)

  def center = Point(x + width / 2, y + height / 2)

  def size = Dimension(width, height)

}


object ScalaJSExample extends js.JSApp{
  println("Flow Layout!!")
  
  // 선을 그린다.
  def drawLine(x1:Int,y1:Int,x2:Int,y2:Int) {
    Page.renderer.beginPath();
    Page.renderer.moveTo(x1,y1);
    Page.renderer.strokeStyle="#FF0000";
    Page.renderer.lineTo(x2,y2);
    Page.renderer.stroke();
  }
  
  // 사각형을 그린다.
  def drawBound(e:Bounds) {
    Page.renderer.strokeStyle="#FF0000";
    Page.renderer.strokeRect(e.x,e.y,e.x+e.width,e.y+e.height);
  }
  
  // 사각형을 그린다.
  def fillRect(e:Element) {
      // 랜덤 수 생성
      def r = scala.util.Random.nextInt(256)
      Page.renderer.fillStyle = s"rgb("+r+","+r+","+r+")"
      Page.renderer.fillRect(e.x,e.y,e.width,e.height)
  }
  
  
  // 플로우 레이아웃을 만드는 것
  def main() = {
    
    // 페이지 높이, 넓이
    val (h, w) = (Page.canvas.height,Page.canvas.width)
    var x = 0.0 // 초기좌표
    
    // 랜덤 수 생성
    def rp = scala.util.Random.nextInt(200)
    def rd = scala.util.Random.nextInt(40)
    //val rd = 4
    def re: Element = {
      val x = rp 
      val y = rp
      val w = rd 
      val h = w 
      Element(x,y,w,h)
    }
    
    // 요소의 묶음과 경계설정
    val elements = Seq(re, re, re,re,re,re,re,re,re,re,re,re,re)
    val bound = Bounds(50, 50, w/3, h/3)

    for (element <- elements) {
      fillRect(element)  
    }
    drawBound(bound)
  }
}

FlowLayout-try-1.scala

// 점과 면이 있다.
case class Point(x: Double, y: Double)
case class Dimension(width: Double, height: Double) {
  override def toString: String = s"Dimension(width: $width, height: $height)"
}

// 요소와 경계가 있다.
case class Element(x: Double, y: Double, width: Double, height: Double)
case class Bounds(x: Double, y: Double, width: Double, height: Double) {

  def location = Point(x, y)

  def center = Point(x + width / 2, y + height / 2)

  def size = Dimension(width, height)

}


object ScalaJSExample extends js.JSApp{
  println("Flow Layout!!")
  
  // 선을 그린다.
  def drawLine(x1:Int,y1:Int,x2:Int,y2:Int) {
    Page.renderer.beginPath();
    Page.renderer.moveTo(x1,y1);
    Page.renderer.strokeStyle="#FF0000";
    Page.renderer.lineTo(x2,y2);
    Page.renderer.stroke();
  }
  
  // 사각형을 그린다.
  def drawBound(e:Bounds) {
    Page.renderer.strokeStyle="#FF0000";
    Page.renderer.strokeRect(e.x,e.y,e.x+e.width,e.y+e.height);
  }
  
  // 사각형을 그린다.
  def fillRect(e:Element) {
      // 랜덤 수 생성
      def r = scala.util.Random.nextInt(256)
      Page.renderer.fillStyle = s"rgb("+r+","+r+","+r+")"
      Page.renderer.fillRect(e.x,e.y,e.width,e.height)
  }
  
  
  // 플로우 레이아웃을 만드는 것
  def main() = {
    
    // 페이지 높이, 넓이
    val (h, w) = (Page.canvas.height,Page.canvas.width)
    var x = 0.0 // 초기좌표
    
    // 랜덤 수 생성
    def rp = scala.util.Random.nextInt(200)
    def rd = scala.util.Random.nextInt(40)
    //val rd = 4
    def re: Element = {
      val x = rp 
      val y = rp
      val w = rd 
      val h = w 
      Element(x,y,w,h)
    }
    
    // 요소의 묶음과 경계설정
    val elements = Seq(re, re, re,re,re,re,re,re,re,re,re,re,re)
    val bound = Bounds(100, 50, w/3, h/3)

    for (element <- elements) {
      fillRect(element)  
    }
    drawBound(bound)
  }
}