Module Ext_draw_Sprite

module Ext_draw_Sprite: sig .. end

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.

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