Clear Up
SharpKit Reference

Ext.draw Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Color

Represents an RGB color and provides helper functions get color components in HSL color space.

ColorConfig
ColorEvents
Component

The Draw Component is a surface in which sprites can be rendered. The Draw Component manages and holds an Ext.draw.Surface instance where Sprites can be appended.

One way to create a draw component is:

  
var drawComponent = Ext.create('Ext.draw.Component', {
            viewBox: false,
            items: [{
            type: 'circle',
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
            }]
            });
            Ext.create('Ext.Window', {
            width: 215,
            height: 235,
            layout: 'fit',
            items: [drawComponent]
            }).show();
            

In this case we created a draw component and added a sprite to it. The type of the sprite is circle so if you run this code you'll see a yellow-ish circle in a Window. When setting viewBox to false we are responsible for setting the object's position and dimensions accordingly.

You can also add sprites by using the surface's add method:

  
drawComponent.surface.add({
            type: 'circle',
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
            });
            

Larger example

  
var drawComponent = Ext.create('Ext.draw.Component', {
            width: 800,
            height: 600,
            renderTo: document.body
            }), surface = drawComponent.surface;
            surface.add([{
            type: 'circle',
            radius: 10,
            fill: '#f00',
            x: 10,
            y: 10,
            group: 'circles'
            }, {
            type: 'circle',
            radius: 10,
            fill: '#0f0',
            x: 50,
            y: 50,
            group: 'circles'
            }, {
            type: 'circle',
            radius: 10,
            fill: '#00f',
            x: 100,
            y: 100,
            group: 'circles'
            }, {
            type: 'rect',
            width: 20,
            height: 20,
            fill: '#f00',
            x: 10,
            y: 10,
            group: 'rectangles'
            }, {
            type: 'rect',
            width: 20,
            height: 20,
            fill: '#0f0',
            x: 50,
            y: 50,
            group: 'rectangles'
            }, {
            type: 'rect',
            width: 20,
            height: 20,
            fill: '#00f',
            x: 100,
            y: 100,
            group: 'rectangles'
            }]);
            // Get references to my groups
            circles = surface.getGroup('circles');
            rectangles = surface.getGroup('rectangles');
            // Animate the circles down
            circles.animate({
            duration: 1000,
            to: {
            translate: {
            y: 200
            }
            }
            });
            // Animate the rectangles across
            rectangles.animate({
            duration: 1000,
            to: {
            translate: {
            x: 200
            }
            }
            });
            

For more information on Sprites, the core elements added to a draw component's surface, refer to the Ext.draw.Sprite documentation.

ComponentConfig
ComponentEvents
CompositeSprite

A composite Sprite handles a group of sprites with common methods to a sprite such as hide, show, setAttributes. These methods are applied to the set of sprites added to the group.

CompositeSprite extends Ext.util.MixedCollection so you can use the same methods in MixedCollection to iterate through sprites, add and remove elements, etc.

In order to create a CompositeSprite, one has to provide a handle to the surface where it is rendered:

  
var group = Ext.create('Ext.draw.CompositeSprite', {
            surface: drawComponent.surface
            });
            

Then just by using MixedCollection methods it's possible to add Ext.draw.Sprites:

  
group.add(sprite1);
            group.add(sprite2);
            group.add(sprite3);
            

And then apply common Sprite methods to them:

  
group.setAttributes({
            fill: '#f00'
            }, true);
            
CompositeSpriteConfig
CompositeSpriteEvents
Draw

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Base Drawing class. Provides base drawing functions.

DrawConfig
DrawEvents
Matrix

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

MatrixConfig
MatrixEvents
Sprite

A Sprite is an object rendered in a Drawing surface.

Types

The following sprite types are supported:

Rect

Rectangle requires width and height attributes:

  
    Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            items: [{
            type: 'rect',
            width: 100,
            height: 50,
            radius: 10,
            fill: 'green',
            opacity: 0.5,
            stroke: 'red',
            'stroke-width': 2
            }]
            });
            

Circle

Circle requires x, y and radius attributes:

  
    Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            items: [{
            type: 'circle',
            radius: 90,
            x: 100,
            y: 100,
            fill: 'blue',
            }]
            });
            

Ellipse

Ellipse requires x, y, radiusX and radiusY attributes:

  
    Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            items: [{
            type: "ellipse",
            radiusX: 100,
            radiusY: 50,
            x: 100,
            y: 100,
            fill: 'red'
            }]
            });
            

Path

Path requires the path attribute:

  
    Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            items: [{
            type: "path",
            path: "M-66.6 26C-66.6 26 -75 22 -78.2 18.4C-81.4 14.8 -80.948 19.966 " +
            "-85.8 19.6C-91.647 19.159 -90.6 3.2 -90.6 3.2L-94.6 10.8C-94.6 " +
            "10.8 -95.8 25.2 -87.8 22.8C-83.893 21.628 -82.6 23.2 -84.2 " +
            "24C-85.8 24.8 -78.6 25.2 -81.4 26.8C-84.2 28.4 -69.8 23.2 -72.2 " +
            "33.6L-66.6 26z",
            fill: "purple"
            }]
            });
            

Text

Text requires the text attribute:

  
    Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            items: [{
            type: "text",
            text: "Hello, Sprite!",
            fill: "green",
            font: "18px monospace"
            }]
            });
            

Image

Image requires width, height and src attributes:

  
    Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            items: [{
            type: "image",
            src: "http://www.sencha.com/img/apple-touch-icon.png",
            width: 200,
            height: 200
            }]
            });
            

Creating and adding a Sprite to a Surface

See Ext.draw.Surface documentation.

Transforming sprites

See setAttributes method documentation for examples on how to translate, scale and rotate the sprites.

SpriteConfig
SpriteDD

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

DD implementation for Panels.

SpriteDDConfig
SpriteDDEvents
SpriteEvents
Surface

A Surface is an interface to render methods inside Ext.draw.Component.

Most of the Surface methods are abstract and they have a concrete implementation in VML or SVG engines.

A Surface contains methods to render sprites, get bounding boxes of sprites, add sprites to the canvas, initialize other graphic components, etc.

Adding sprites to surface

One of the most used methods for this class is the add method, to add Sprites to the surface. For example:

  
drawComponent.surface.add({
            type: 'circle',
            fill: '#ffc',
            radius: 100,
            x: 100,
            y: 100
            });
            

The configuration object passed in the add method is the same as described in the Ext.draw.Sprite class documentation.

Sprites can also be added to surface by setting their surface config at creation time:

  
var sprite = Ext.create('Ext.draw.Sprite', {
            type: 'circle',
            fill: '#ff0',
            surface: drawComponent.surface,
            radius: 5
            });
            

In order to properly apply properties and render the sprite we have to show the sprite setting the option redraw to true:

  
sprite.show(true);
            
SurfaceConfig
SurfaceEvents
Text

This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be then used anywhere in an ExtJS application just like any other Component.

Example usage

  
    Ext.create('Ext.panel.Panel', {
            title: 'Panel with VerticalTextItem',
            width: 300,
            height: 200,
            lbar: {
            layout: {
            align: 'center'
            },
            items: [{
            xtype: 'text',
            text: 'Sample VerticalTextItem',
            degrees: 90
            }]
            },
            renderTo: Ext.getBody()
            });
            
TextConfig
TextEvents
© Copyright 2005-2011 SharpKit. All rights reserved.