creativescala / doodle

Compositional vector graphics in Scala / Scala.JS
https://creativescala.org/doodle/
Apache License 2.0
327 stars 75 forks source link

Question: How do we set a shape position relative to a Frame origin #142

Closed hmf closed 10 months ago

hmf commented 10 months ago

I need to place shapes in random spots of a Frame of fixed width. I have read the documentation and it seems that all layout operations are relative to each shape's bounding box. In addition to this, a single shape is always placed with its origin in the center of the Picture's frame.

Is their any way I can place a shape in a fixed (x,y) within a frame without using a reference shape (size of frame, no margin) ?

TIA

hmf commented 10 months ago

The trick of using a "reference shape" also does not work perfectly. The final image tries to show as much of the 2 shapes as possible. In doing so it shifts the frame shape by several pixels (5 pixels in the example below).

Is their any "magic" call I can use to ensure a shape is never clipped?

Here is the output I get (I expect the origin to be at the bottom left corner of the frame):

circle

Here are the code snippets:

  val width = 100
  val height = 100

  def frameSquare() =
    val picture = Picture.rectangle(width, height)
          .strokeColor(Color.black)
          .margin(0)
          // .originAt(-width/2, -height/2)
          .originAt(Landmark.bottomLeft)
          .at(0,0)
          .debug
    picture

  def randomSquare(frame: Picture[Unit]) =
    frame.on(
      Picture.square(20)
          .strokeColor(Color.black)
          .margin(0)
          .originAt(0, 0)
          .at(0,0)
          .debug
    )

    val framePicture = frameSquare()
    val picture = randomSquare(frame = framePicture )

    val frame = Frame.default.withSize(width , height).withBackground(Color.white)

    val out1 = os.pwd / "circle.png"
    println(out1.toIO)
    picture.write[Png](out1.toIO, frame)

TIA

noelwelsh commented 10 months ago

I think you want withCenterAtOrigin: https://www.javadoc.io/doc/org.creativescala/doodle-docs_3/latest/doodle/java2d/effect/Frame.html

This sets the origin of the frame to the origin of the Picture. From that you can do layout in terms of absolute coordinates.

hmf commented 10 months ago

@noelwelsh Worked perfectly. Thank you.

noelwelsh commented 10 months ago

Great!