DisplayScript

Drawable Function Index

This is an alphabetical listing of all built-in drawable functions.

at

The at drawable function places a drawable at a particular position and size.

draw at(10, 10, 100, 100, fill(black))
draw at(10, 200, 10, 200, fill(red))

The first two arguments are horizontal and vertical offsets. The third and fourth arguments are a width and a height. The last argument is a drawable to place at the indicated offset and size.

If the offset or size changes due to an implicit animation, at will animate them.

buttonHandler

The buttonHandler drawable function makes it easier to implement buttons. It takes three functions as arguments: a "pressed" function, an "unpressed" function, and a "clicked" function.

draw at(10, 10, 100, 100, drawable button {
    state pressed = false
    if pressed {
        draw fill(red)
    } else {
        draw fill(black)
    }
    draw buttonHandler(function () {
        next pressed = true
    }, function () {
        next pressed = false
    }, function () {
        // The button was actually clicked!
    })
})

When the mouse or a touch goes down in the buttonHandler, it calls the "pressed" function. If the mouse or touch leaves the buttonHandler's bounds, it calls the "unpressed" function. If the mouse or touch re-enters the bounds, the "pressed" function is called again. If you release the mouse or finish a touch inside the buttonHandler's bounds, the "clicked" function is called.

centered

Use centered to center a drawable within its bounds.

draw centered(text("Centered!"))

centered measures its argument, then draws its argument centered at that measured size.

clickHandler

The clickHandler drawable function calls its argument when the mouse or a touch goes down within its bounds.

state clicked = false
draw clickHandler(function () {
    next clicked = true
})
if clicked {
    draw fill(red)
}

clip

By default, drawables can draw outside their bounds. Apply clip to a drawable to clip its drawing to its bounds.

drawable box {
    draw fill(gray(0.7))
    draw text("Why hello there!")
}
draw at(10, 10, 50, 50, box)
draw at(10, 70, 50, 50, clip(box))

dragHandler

The dragHandler drawable function tracks the mouse or a touch through three stages: down, moved, and up. It takes three function arguments corresponding to these stages.

state boxX = 10
state boxY = 10
drawable box {
    state pressed = false
    var color = black
    if pressed {
        color = red
    }
    draw fill(color)
    draw dragHandler(function (x, y) {
        next pressed = true
    }, function (dx, dy) {
        next boxX = boxX + dx
        next boxY = boxY + dy
    }, function () {
        next pressed = false
    })
}
draw at(boxX, boxY, 100, 100, box)

The first function is called when the mouse or a touch goes down in the drag handler bounds. It takes two arguments: the x and y offset of the interaction.

The second function is called as the mouse or touch moves. Its two arguments are the distance that the mouse or touch moved.

The third function is called when the mouse or touch goes up.

ellipse

Use ellipse to draw a filled ellipse.

draw at(10, 10, 100, 100, ellipse(black))

fill

The fill drawable function fills its bounds with a solid color.

draw at(10, 10, 100, 100, fill(black))

image

Use image to load and draw images. image takes the image's URL string as an argument.

var img = image("http://i.imgur.com/rpDedDI.jpg")
draw centered(img)
draw at(10, 10, 100, 200, img)

The image will be stretched to fill its bounds. Measuring an image yields its pixel width and height.

inset

The inset drawable function applies padding around its drawable argument.

draw inset(10, fill(red))

The first argument is the number of pixels of padding to add.

leftAligned

Use leftAligned to left-align a drawable while centering it vertically.

draw leftAligned(text("Left aligned!"))

Like centered, leftAligned measures its argument to determine its placement.

mask

Use mask to restrict one drawable to draw only in the opaque areas of another.

draw centered(mask(ellipse(white),
    image("http://i.imgur.com/8qNhOfg.jpg")))

mask takes two arguments: the first is the "mask" drawable, and the second is the "source" drawable. The "source" drawable is drawn only where the "mask" drawable is opaque.

When measured, mask returns the measurement of its second argument, the "source" drawable.

mouseWheelHandler

Use mouseWheelHandler to respond to mouse wheel events.

state boxX = 10
state boxY = 10
draw mouseWheelHandler(function (dx, dy) {
    next boxX = boxX + dx
    next boxY = boxY + dy
})
draw at(boxX, boxY, 100, 100, fill(black))

multiline

The multiline drawable function draws text that can wrap to multiple lines. See Text Rendering for details.

opacity

Use opacity to blend a drawable with its background. The first parameter is the opacity and the second is the drawable to blend.

draw at(50, 50, 100, 100, opacity(0.5, fill(black)))
draw at(100, 100, 100, 100, opacity(0.5, fill(red)))

rightAligned

Use rightAligned to right-align a drawable while centering it vertically.

draw rightAligned(text("Right aligned!"))

Like centered and leftAligned, rightAligned measures its argument to determine its placement.

stretchableImage

The stretchableImage drawable function loads and draws a "9-part image". The first and second parameters select a pixel to be stretched. The third parameter is a URL string specifying the image to load.

var img = stretchableImage(72, 72, "http://i.imgur.com/ZQbQDnE.png")
draw at(50, 50, 200, 200, img)

When drawn, a stretchable image grows to fill its bounds by stretching around its center pixel.

text

The text drawable function draws a single line of text. See Text Rendering for details.