|
6#
楼主 |
发表于 2012-6-29 00:41:58
|
只看该作者
- Interacting with a Sprite
- Now that we've created a draw surface with a sprite in it, let's dive into how to interact with the sprite. We can get a handle to the sprite we want to modify by adding that sprite imperatively to the surface:
- // Create a draw component
- var drawComponent = Ext.create('Ext.draw.Component', {
- viewBox: false
- });
- // Create a window to place the draw component in
- Ext.create('Ext.Window', {
- width: 220,
- height: 230,
- layout: 'fit',
- items: [drawComponent]
- }).show();
- // Add a circle sprite
- var myCircle = drawComponent.surface.add({
- type: 'circle',
- x: 100,
- y: 100,
- radius: 100,
- fill: '#cc5'
- });
- // Now do stuff with the sprite, like changing its properties:
- myCircle.setAttributes({
- fill: '#ccc'
- }, true);
- // or animate an attribute on the sprite
- myCircle.animate({
- to: {
- fill: '#555'
- },
- duration: 2000
- });
- // Add a mouseup listener to the sprite
- myCircle.addListener('mouseup', function() {
- alert('mouse upped!');
- });
复制代码 |
|