Ext.data.JsonP.drawing({"title":"Drawing","guide":"

Drawing

\n
\n

Contents

\n
    \n
  1. Creating a Drawing Surface
    2. \n
  2. Interacting with a Sprite
    3. \n
\n
\n\n

The drawing package enables you to draw\ngeneral purpose graphics and animations\nthat can be used with the\ncharting classes\nand other interfaces\nto create graphics that work\non all browsers and mobile devices.\nThis document guides you through\nthe overall design and implementation details\nof the Drawing package.

\n\n

The draw package provides a versatile tool\nthat creates custom graphics in a cross-browser/device manner\nand also performs rich animations with them.

\n\n

The Draw package contains a Surface class\nthat abstracts the underlying graphics implementation\nand enables the developer to create arbitrarily shaped Sprites or SpriteGroups\nthat respond to interactions like mouse events\nand also provide rich animations on all attributes like shape, color, size, etc.

\n\n

The underlying/concrete implementations for the Surface class\nare SVG (for SVG capable browsers) and\nVML (for the version 9 and earlier of the Internet Explorer family).\nSurface can be considered as an interface\nfor the SVG and VML rendering engines\nthat is agnostic to its underlying implementations.\nMost of the methods and ways to create sprites\nare heavily inspired by the SVG standard.

\n\n

Creating a Drawing Surface

\n\n

You can create a simple drawing surface\nwithout loading the Charting package at all.\nThis enables you to create arbitrary graphics\nthat work on all browsers/devices and animate well.\nFor example, you could create an interactive map of the United States\nwhere each state is a sprite,\nor an infographic where each element is also a sprite.\nWhat's interesting about making sprites and not images\nis that the document acquires a new level of interactivity\nbut also that, because the images are VML and SVG based,\nthey will never loose quality and can be printed correctly.

\n\n

In order to use the Draw package directly\nyou can create a Draw Component and\n(for example) append it to an Ext.Window:

\n\n
var drawComponent = Ext.create('Ext.draw.Component', {\n    viewBox: false,\n    items: [{\n        type: 'circle',\n        fill: '#ffc',\n        radius: 100,\n        x: 100,\n        y: 100\n    }]\n});\n\nExt.create('Ext.Window', {\n    width: 230,\n    height: 230,\n    layout: 'fit',\n    items: [drawComponent]\n}).show();\n
\n\n

In this case, we created a draw component\nand added a sprite to it.\nThe type of the sprite is circle\nso if you run this code you'll see a yellow-ish circle in a Window.\nWhen setting viewBox to false\nwe are responsible for setting\nthe object's position and dimensions accordingly.

\n\n

Sprites can have different types. Some of them are:

\n\n\n\n\n

A Sprite is an object rendered in a Drawing surface.\nThere are different options and types of sprites.\nThe configuration of a Sprite is an object with the following properties:

\n\n\n\n\n

Additionally there are three transform objects\nthat can be set with setAttributes\nwhich are translate, rotate and scale.

\n\n

For translate, the configuration object\ncontains x and y attributes for the translation. For example:

\n\n
sprite.setAttributes({\n  translate: {\n   x: 10,\n   y: 10\n  }\n}, true);\n
\n\n

For rotate, the configuration object\ncontains x and y attributes\nfor the center of the rotation (which are optional),\nand a degrees attribute\nthat specifies the rotation in degrees. For example:

\n\n
sprite.setAttributes({\n  rotate: {\n   degrees: 90\n  }\n}, true);\n
\n\n

For scale, the configuration object contains x and y attributes\nfor the x-axis and y-axis scaling. For example:

\n\n
sprite.setAttributes({\n  scale: {\n   x: 10,\n   y: 3\n  }\n}, true);\n
\n\n

Interacting with a Sprite

\n\n

Now that we've created a draw surface with a sprite in it,\nlet's dive into how to interact with the sprite.\nWe can get a handle to the sprite we want to modify\nby adding that sprite imperatively to the surface:

\n\n
// Create a draw component\nvar drawComponent = Ext.create('Ext.draw.Component', {\n    viewBox: false\n});\n\n// Create a window to place the draw component in\nExt.create('Ext.Window', {\n    width: 220,\n    height: 230,\n    layout: 'fit',\n    items: [drawComponent]\n}).show();\n\n// Add a circle sprite\nvar myCircle = drawComponent.surface.add({\n    type: 'circle',\n    x: 100,\n    y: 100,\n    radius: 100,\n    fill: '#cc5'\n});\n\n// Now do stuff with the sprite, like changing its properties:\nmyCircle.setAttributes({\n    fill: '#ccc'\n}, true);\n\n// or animate an attribute on the sprite\nmyCircle.animate({\n    to: {\n        fill: '#555'\n    },\n    duration: 2000\n});\n\n// Add a mouseup listener to the sprite\nmyCircle.addListener('mouseup', function() {\n    alert('mouse upped!');\n});\n
\n\n

In this example we've seen how we can add events,\nset sprite attributes and animate these attributes\nusing the draw package.\nAs you can see this package is a versatile abstraction layer\nover the graphics we can do.\nWhat's most interesting about this class\nis that we aren't tied to a specific shape or structure;\nalso all elements support events,\nsetting attributes and creating animations.\nMost important of all, all of this is compatible in all browsers and devices.

\n"});