Dojo-0.9 gfx basics : color, stroke - theory

Read more on dojo
Goal of this post:

• dojo.Color : how to create a color object
  • examples
• stroke property : how to create strokes
  • examples

dojo.Color(opts)

• opts could be:
  • a named color (which RGB values are defined in dojo.Color.named ) as:
    • black: [0,0,0]
    • silver: [192,192,192]
    • gray: [128,128,128]
    • white: [255,255,255]
    • maroon: [128,0,0]
    • red: [255,0,0]
    • purple: [128,0,128]
    • fuchsia: [255,0,255]
    • green: [0,128,0]
    • lime: [0,255,0]
    • olive: [128,128,0]
    • yellow: [255,255,0]
    • navy: [0,0,128]
    • blue: [0,0,255]
    • teal: [0,128,128]
    • aqua: [0,255,255]
  • a valid CSS color code, e.g., “#FFFFF” or “#FFF”
  • an array of RGB or RGBA (A = alpha) values, e.g, [255, 0, 0] or [255, 0, 0, 1.0].
  • a valid dojo.Color object
• examples:

  • var c = new dojo.Color([255, 0, 0]);

  • var c = new dojo.Color("#FFFFFF");

  • var c = new dojo.Color("white");

Stroke: object that defines an outline

• dojo.gfx.defaultStroke: {type: “stroke”, color: “black”, style: “solid”, width: 1, cap: “butt”, join: 4}
  • defines defaults values of stroke properties
• if a stroke property is speficied as a string it will be interpreted as a color
• stroke properties:
  • type: it is always set to “stroke”
  • color: defines the color of the outline
  • style: defines dash pattern (e.g: “none”, “Solid”, “ShortDash”, “ShortDot”, “ShortDashDot”, “ShortDashDotDot”, “Dot”, “Dash”, “LongDash”, “DashDot”, “LongDashDot”, “LongDashDotDot”)
  • width: defines pixel width of the stroke
  • join: can be one of “round”, “bevel”, or a numeric miter value
• examples:

  • t.setStroke("red"); // default stroke with red color

  • t.setStroke({color: white,  style: "ShortDash"});