O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Applying gradients to shapes

Gradients can help add realism to drawings or provide the final polish for a design. They can be easily added to any sprite created with the Ext.draw package.

We will continue to work on our map-pin example from the previous recipe and add gradients to its sprites to make them appear a little more realistic.

How to do it...

  1. We will start with our finished map pin from the first recipe:
    var mapPin = Ext.create('Ext.draw.Component', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 500,
        viewBox: false,
    
        items: [{
            type: 'rect',
            x: 52,
            y: 58,
            width: 3,
            height: 30,
            fill: '#999',
            rotate: {
                degrees: -7
            }
        }, {
            type: 'circle',
            x: 50,
            y: 50,
            radius: 10,
            fill: '#2D00B3'
        }]
    });
  2. We now define a gradient for the map pin's pin. We want a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required