|
|
Ext.draw Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
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 a Surface instance: an interface that has
an SVG or VML implementation depending on the browser capabilities and 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
});
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
|
|
|
|
Sprite
|
A Sprite is an object rendered in a Drawing surface. There are different options and types of sprites.
The configuration of a Sprite is an object with the following properties: type - (String) The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'. group - (String/Array) The group that this sprite belongs to, or an array of groups. Only relevant when added to a Ext.draw.Surface. width - (Number) Used in rectangle sprites, the width of the rectangle. height - (Number) Used in rectangle sprites, the height of the rectangle. size - (Number) Used in square sprites, the dimension of the square. radius - (Number) Used in circle sprites, the radius of the circle. x - (Number) The position along the x-axis. y - (Number) The position along the y-axis. path - (Array) Used in path sprites, the path of the sprite written in SVG-like path syntax. opacity - (Number) The opacity of the sprite. fill - (String) The fill color. stroke - (String) The stroke color. stroke-width - (Number) The width of the stroke. font - (String) Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter. text - (String) Used with text type sprites. The text itself. translate - (Object) Defines a translation for the Sprite. There's more information on this property below. rotate - (Object) Defines a rotation for the Sprite. There's more information on this property below. scale - (Object) Defines a scaling for the Sprite. There's more information on this property below. Translation For translate, the configuration object contains x and y attributes that indicate where to
translate the object. For example: sprite.setAttributes({
translate: {
x: 10,
y: 10
}
}, true);
Rotation For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
and a degrees attribute that specifies the rotation in degrees. For example: sprite.setAttributes({
rotate: {
degrees: 90
}
}, true);
That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas: sprite.setAttributes({
rotate: {
x: 0,
y: 0,
degrees: 90
}
}, true);
will create a rotation around the (0, 0) axis. Scaling For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example: sprite.setAttributes({
scale: {
x: 10,
y: 3
}
}, true);
You can also specify the center of scaling by adding cx and cy as properties: sprite.setAttributes({
scale: {
cx: 0,
cy: 0,
x: 10,
y: 3
}
}, true);
That last example will scale a sprite taking as centers of scaling the (0, 0) coordinate. Creating and adding a Sprite to a Surface Sprites can be created with a reference to a Ext.draw.Surface var drawComponent = Ext.create('Ext.draw.Component', options here...);
var sprite = Ext.create('Ext.draw.Sprite', {
type: 'circle',
fill: '#ff0',
surface: drawComponent.surface,
radius: 5
});
Sprites can also be added to the surface as a configuration object: var sprite = drawComponent.surface.add({
type: 'circle',
fill: '#ff0',
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);
The constructor configuration object of the Sprite can also be used and passed into the Ext.draw.Surface
add method to append a new sprite to the canvas. For example: drawComponent.surface.add({
type: 'circle',
fill: '#ffc',
radius: 100,
x: 100,
y: 100
});
|
|
|
SpriteConfig
|
|
|
|
SpriteEvents
|
|
|
|
Surface
|
A Surface is an interface to render methods inside a draw Ext.draw.Component.
A Surface contains methods to render sprites, get bounding boxes of sprites, add
sprites to the canvas, initialize other graphic components, etc. One of the most used
methods for this class is the add method, to add Sprites to the surface. Most of the Surface methods are abstract and they have a concrete implementation
in VML or SVG engines. A Surface instance can be accessed as a property of a draw component. 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. Listeners You can also add event listeners to the surface using the Observable listener syntax. Supported events are: mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave click For example: drawComponent.surface.on({
'mousemove': function() {
console.log('moving the mouse over the surface');
}
});
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
}
}
});
|
|
|
SurfaceConfig
|
|
|
|
SurfaceEvents
|
|
|
SharpKit.AspNetAjax
Ext