Dojo-0.9 gfx basics : fill property - theory

Read more on dojo

Goal of this post:

• fill property
  • examples

Fill property : this object defines how to fill shapes

• fill types:
  • solid color fill: color specified as a fill property
  • linear gradient:
    • properties:
      • x1, y1: start point of the linear gradient (default: 0, 0)
      • x2, y2: end point of the linear gradient (default: 100, 100)
      • colors: is an array of stop objects
        • offset: a number between 0 and 1 defining color’s position
          • 0 -> x1, y1 point
          • 1 -> x2, y2 point
        • color: the color of the stop
    • examples:

      • var lg = {
        type: "linear",
        x1: 0, y1: 0, x2: 75, y2: 50,
        colors: [
        { offset: 0, color: "#F60" },
        { offset: 1, color: "#FF6" }
        ]
        };

• radial gradient: smooth transition between stops on a circle
  • properties:
    • cx, cy: center of the radial gradient (defaults: 0, 0)
    • r: radius of the radial gradient.
    • colors: array of stops objects
      • 0 corresponds to the center of the circle
      • 1 corresponds to the border of the circle
  • examples:

    • var rg = {
      type: "radial",
      cx: 100, cy: 100, r: 100,
      colors: [
      { offset:   0, color: "red" },
      { offset: 0.5, color: "green" },
      { offset:   1, color: "blue" }
      ]
      };

• Pattern defines an infinite tiling of an image. Following properties are recognized:
  • x, y: offset of the scaled image (default: 0, 0)
  • width, height: size of the scaled image (default: 0, 0)
  • src: URL of the image
  • examples:

    • var pattern = {
      type: "pattern",
      x: 0, y: 0, width: 333, height: 80,
      src: "images/my_image.jpg"
      };