Class type Ext_draw_Surface.t

class type t = object .. end

method add : 'a 'b. 'a Js.t -> 'b Js.t Js.meth

Adds a Sprite to the surface. See Ext.draw.Sprite for the configuration object to be passed into this method.

For example:

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

Parameters:

• args: _ Js.t

  One or more Sprite objects or configs.

Returns:

• _ Js.t

  The sprites added.

method addCls : 'c 'd. 'c Js.t -> 'd Js.t -> unit Js.meth

Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.

For example:

drawComponent.surface.addCls(sprite, 'x-visible');

Parameters:

• sprite: _ Js.t

  The sprite to add the class to.

• className: _ Js.t

  The CSS class to add, or an array of classes

method addGradient : 'e. 'e Js.t -> unit Js.meth

Adds a gradient definition to the Surface. Note that in some surface engines, adding a gradient via this method will not take effect if the surface has already been rendered. Therefore, it is preferred to pass the gradients as an item to the surface config, rather than calling this method, especially if the surface is rendered immediately (e.g. due to 'renderTo' in its config). For more information on how to create gradients in the Chart configuration object please refer to Ext.chart.Chart.

The gradient object to be passed into this method is composed by:

• id - string - The unique name of the gradient.
• angle - number, optional - The angle of the gradient in degrees.
• stops - object - An object with numbers as keys (from 0 to 100) and style objects as values.

For example:

drawComponent.surface.addGradient({ id: 'gradientId', angle: 45, stops: { 0: { color: '#555' }, 100: { color: '#ddd' } } });

Parameters:

• gradient: _ Js.t

  A gradient config.

method destroy : unit Js.meth

Destroys the surface. This is done by removing all components from it and also removing its reference to a DOM element.

For example:

 drawComponent.surface.destroy();

method getGroup : 'f. Js.js_string Js.t -> 'f Js.t Js.meth

Returns a new group or an existent group associated with the current surface. The group returned is a Ext.draw.CompositeSprite group.

For example:

var spriteGroup = drawComponent.surface.getGroup('someGroupId');

Parameters:

• id: Js.js_string Js.t

  The unique identifier of the group.

Returns:

• _ Js.t

  The Ext.draw.CompositeSprite.

method getId : unit Js.meth

Retrieves the id of this component. Will autogenerate an id if one has not already been set.

method remove : Ext_draw_Sprite.t Js.t -> bool Js.t -> unit Js.meth

Removes a given sprite from the surface, optionally destroying the sprite in the process. You can also call the sprite own remove method.

For example:

drawComponent.surface.remove(sprite);
//or...
sprite.remove();

Parameters:

• sprite: Ext_draw_Sprite.t Js.t
• destroySprite: bool Js.t

method removeAll : bool Js.t -> unit Js.meth

Removes all sprites from the surface, optionally destroying the sprites in the process.

For example:

drawComponent.surface.removeAll();

Parameters:

• destroySprites: bool Js.t

  Whether to destroy all sprites when removing them.

method removeCls : 'g 'h. 'g Js.t -> 'h Js.t -> unit Js.meth

Removes one or more CSS classes from the element.

For example:

drawComponent.surface.removeCls(sprite, 'x-visible');

Parameters:

• sprite: _ Js.t

  The sprite to remove the class from.

• className: _ Js.t

  The CSS class to remove, or an array of classes

method setSize : Js.number Js.t -> Js.number Js.t -> unit Js.meth

Sets the size of the surface. Accomodates the background (if any) to fit the new size too.

For example:

drawComponent.surface.setSize(500, 500);

This method is generally called when also setting the size of the draw Component.

Parameters:

• w: Js.number Js.t

  The new width of the canvas.

• h: Js.number Js.t

  The new height of the canvas.

method setStyle : 'i 'j. 'i Js.t -> 'j Js.t -> unit Js.meth

Sets CSS style attributes to an element.

For example:

drawComponent.surface.setStyle(sprite, {
    'cursor': 'pointer'
});

Parameters:

• sprite: _ Js.t

  The sprite to add, or an array of classes to

• styles: _ Js.t

  An Object with CSS styles.

method setText : 'k. 'k Js.t -> Js.js_string Js.t -> unit Js.meth

Changes the text in the sprite element. The sprite must be a text sprite. This method can also be called from Ext.draw.Sprite.

For example:

var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');

Parameters:

• sprite: _ Js.t

  The Sprite to change the text.

• text: Js.js_string Js.t

  The new text to be set.