This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

borderImage

Draws a border using an image - similar to css border-image. It's a great tool to make expandable GUI elements.

Note that this is a rather expensive operation and you should cache the result

Simple form

.borderImage (image, x, y, w, h, t, r, b, l, fill);

x, y, w, h Number position and dimensions of a rectangle

t, r, b, l Number top, right, bottom, left offsets - see this to understand

fill String to fill the content with color, true to stretch inner part of image, false to leave it empty

Flexible form

In this form you are able to define each edge and corner using specific regions in image. Since each corner is independent you are able to create more fancy borders.

.borderImage (image, x, y, w, h, border);

There is no sense in explaining it - just learn by example:

"stretch" or "repeat"

var layer = cq(800, 300).clear("#2a2a36").appendTo(document.body);

var border = {

  /* edges */

  "top": [86, 16, 18, 20, "stretch"],
  "left": [14, 46, 35, 24, "stretch"],
  "right": [117, 45, 11, 38, "repeat"],
  "bottom": [47, 110, 41, 29, "stretch"],

  /* corners */

  "topLeft": [14, 17, 35, 24],
  "topRight": [110, 16, 18, 21],
  "bottomLeft": [14, 77, 35, 62],
  "bottomRight": [97, 101, 31, 38]

  /* there can also be 
     fill: [x, y, w, h]
     which defines region to be used as a fill pattern
  */

}

loadImages("complex-border", function(images) {

  layer.borderImage(images['complex-border'], 32, 32, 720, 240, border);

});

Source image and regions visualization:



Have any questions? Don't hesitate to ask:

Post issues on github, support my work on gratipay author rezoner