primer

primer copied to clipboard

            #####  #####   ### ##     ## ##### #####   
             #   #  #   #   #   ##   ##   #  #  #   #  
             #   #  #   #   #   ##   ##   #     #   #  
             ####   ####    #   # # # #   ###   ####   
             #      #  #    #   # # # #   #     #  #   
             #      #   #   #   #  #  #   #  #  #   #  
            ###    ###  ## ### ### # ### ##### ###  ## 

Primer. By Tom Preston-Werner.

Primer is a Flash-like API layered on top of Canvas.

INSTALL

Just include jQuery and Primer libraries on your page.

BASIC DRAWING EXAMPLE

In your html create an empty div with an id you can reference later:

In your JavaScript, create a new Primer object for the div, specifying width and height.

$(function() { var primer = new Primer("#primer", 100, 100)

...

})

Now that you have a Primer instance, you can start adding layers to it. Start by creating an instance of Primer.Layer:

var square = new Primer.Layer()

Now you can draw on the layer. Let's draw a 20x20 pixel gray square.

square.fillStyle = "#888888" square.fillRect(0, 0, 20, 20)

The square won't be drawn until it is added to the Primer instance.

primer.addChild(square)

BASIC ANIMATION EXAMPLE

If you follow the instructions in [Basic Drawing Example], you'll have an object called square that has been drawn to the screen. Moving the square to another place is as easy as setting its x and y values.

square.x = 10 square.y = 10

The square has now moved to its new location. Contrary to raw Canvas work, Primer layers redraw themselves any time they're moved. If we'd like the square to move slowly across the screen, we can simply increase the x value on an interval.

function go() { square.x += 1 }

setInterval(go, 100)

BASIC EVENTS EXAMPLE

In Primer it's easy to attach event listeners to your Layers. Let's say we want to log "in" and "out" when you mouse over and mouse out of your gray square.

square.mouseover(function() { console.log("in") })

square.mouseout(function() { console.log("out") })

BASIC TEXT EXAMPLE

Primer implements a basic version of Canvas' text api with standard DOM elements since no major browser release yet offers this. Let's draw the text "Hello, World!" in 12px Monaco in red at (0, 0) with a max width of 100px:

var text = Primer.Layer() text.font = "12px Monaco" text.fillStyle = "#FF0000" text.textAlign = "center" text.fillText("Hello, World!", 0, 0, 100)

The signature of fillText() is (text, x, y, width). The font attribute takes standard CSS font values.

The text API currently does not support any transformations except translation.