Readers : Users with basic idea on how to work with Ext Js can take this blog as a reference for the Ext js Sprites.
Overview
Charting Packages offered by Sencha Ext Js is a more interactive feature that enables user to create great visualizations such as “3D Column Charts or 3D Pie Charts” etc.
However in spite of these charts being available, there is always a demand in more creative visualizations. A few to quote ” Flowcharts, Schematic or even a Interactive Animation”.
We can use HTML Canvas5 or SVG directly to obtain the interactive features, however usage of these may sometimes lead to issues with “Cross-platform compatibility”.
Overcoming this scenario, Ext js provided a powerful feature (Drawing package) that allows you to create arbitrary graphics and animations without worrying about which technology a particular browser uses for rendering. It automatically selects the most appropriate renderer (Canvas, SVG, or VML) depending on your browser.
Introduction to SPRITE
A Sprite is a basic primitive that represents a graphical object that can be drawn. We can create our own image by combining multiple images together . There are many kinds of sprites available in the Draw package. Each sprite type has various attributes that define how it should be represented.
A simple example to demonstrate how a sprite can be created
Code:
Ext.onReady(function () {
var container = new Ext.Container({
renderTo: Ext.getBody(),
items: {
xtype: ‘draw’,
width: 250,
height: 250,
sprites: [{ type: ‘rect’, x: 50, y: 50, width: 100, height: 100, lineWidth: 2, strokeStyle: ‘yellow’, fillStyle: ‘blue’}]
}
});
});
Output:
List of available sprites in Sencha Ext Js
- Ext.draw.sprite.Path – A sprite that represents a path.
- Ext.draw.sprite.Rect – A sprite that represents a rectangle.
- Ext.draw.sprite.Circle – A sprite that represents a circle.
- Ext.draw.sprite.Sector – A sprite representing a pie slice.
- Ext.draw.sprite.Arc – A sprite that represents a circular arc.
- Ext.draw.sprite.Ellipse – A sprite that represents an ellipse.
- Ext.draw.sprite.EllipticalArc – A sprite that represents an elliptical arc.
- Ext.draw.sprite.Text – A sprite that represents text.
- Ext.draw.sprite.Image – A sprite that represents an image.
- Ext.draw.sprite.Instancing – A sprite that represents multiple instances based on the given template.
- Ext.draw.sprite.Composite – Represents a group of sprites.
A Sprite can have the following features to it
- Translate : Translate can be used to position your sprite after it’s been rendered.
- Rotate : Rotate can be used to rotate a sprite
- Scale : Scale can be used to dynamically resize your sprite
Sprite Animations
We have this unique feature in Sencha Ext Js that enables animating the Sprite content.
Using Animation modifiers, we modify the Sprite Attributes. With the help of “getAnimation” accessor method, we can access the “Animation Modifier” of the sprite.
Example:
Ext.onReady(function () {
var container = new Ext.draw.Container({
renderTo: Ext.getBody(),
width: 550,
height: 550
});
var mainSurface = container.getSurface();
var circleSprite = mainSurface.add({
type: ‘circle’,
cx: 75,
cy: 75,
r: 35,
fillStyle: ‘blue’,
strokeStyle: ‘black’
});
circleSprite.setAnimation({
duration: 1000,
easing: ‘elasticOut’
});
circleSprite.setAttributes({
cx: 200,
cy: 200
});
});
Since this involves animating the “Sprite Attribute” you can try out this example in sencha fiddle
Link : https://fiddle.sencha.com/#fiddle/r0b
Illustration on Adding Custom Sprite image to the application.
Now that we have basic idea of how to work with sprites, we can create custom sprites and add to the applications.
My demonstration includes adding “Custom Sprites” to the application.
I have created a simple Shape, Text and Image rendering sprite, which includes a rectangle shape with random text and an image incorporated.
Code:
Ext.application({
name: ‘Fiddle’,
launch: function() {
Ext.create(‘Ext.Container’, {
extend: ‘Ext.draw.Matrix’,
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: ‘fit’,
items: {
xtype: ‘draw’,
sprites: [{
type: ‘image’, x: 50, y: 50, width: 450, height: 250,
src:’https://confluence.atlassian.com/fisheye/files/298976800/299139803/2/1444173711999/FishEye_Charts_Pa’
}, {
type: ‘text’, x: 100, y: 80, text: ‘Username’,fontSize: 18, fillStyle: ‘white’}, {
type: ‘image’,x: 60,y: 255,width: 40,height: 40,
src: ‘https://cdn4.iconfinder.com/data/icons/meBaze-Freebies/512/user.png’
},{
type: ‘circle’,
fillStyle: ‘red’,
radius: 20,
x: 100,
y: 200
}]}
});
}});
Outcome:
As you can see the sprite image being inserted to the sprite object. An image from different source is merged to the sprite object resulting in a single combined image.
As a result, a single image with multiple images coupled to it is obtained. You can provide separate set of functionalities to the individual image by referring a single image.
References
