Module Ext_draw_Component

module Ext_draw_Component: sig .. end

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.

class type t = object .. end

class type configs = object .. end

class type events = object .. end

class type statics = object .. end

val of_configs : configs Js.t -> t Js.t

val to_configs : t Js.t -> configs Js.t