[Extjs6] Ext.draw.Container 添加sprite并添加spriteevents事件处理函数

来源：互联网发布：淘宝首页html源代码编辑：程序博客网时间：2024/05/21 22:37
Ext.define('Admin.view.xxxxxx',{    extend: 'Ext.draw.Container',    xtype: 'smartdispatchlinestation',    requires: [        'Ext.draw.Component',        'Ext.draw.plugin.SpriteEvents'    ],    width: '100%',    height: 400,    plugins: ['spriteevents'],    fromtype: 1,  //用于业务区分  js中可以自定义添加一些额外的属性 以方便业务的处理    sprites: [],    initComponent:function(){        var draw = this,            surface = draw.getSurface();        var drawItems = [];        //添加初始化的车点        var topCarNo = Ext.Number.randomInt(1000,2000);        var topCarX = 750,  //200            topCarY = 100;  //200        var topCarSprite = {            type: 'path',            data: topCarNo,            cls: topCarX+'-'+topCarY,            id: 'topcar',  //定义ID  为了后面方便获取            path: 'M'+topCarX+','+topCarY+'L'+topCarX+','+(topCarY-10)+' L'+(topCarX+10)+','+topCarY+' L'+topCarX+','+(topCarY+10)+' L'+topCarX+','+topCarY,            strokeStyle: 'rgb('+Ext.Number.randomInt(50,200)+','+Ext.Number.randomInt(50,200)+','+Ext.Number.randomInt(50,200)+')',            lineDashOffset: 1,            lineWidth: 6,            animation: {                duration: 1000,                easing: 'elasticOut'            }        };        var topCarSpriteText = {            type: 'text',            id: 'topcartext',            x: topCarX - 10,            y: topCarY + 30,            text: topCarNo,            //text: '&#xf207;',            fontSize: 15,            fillStyle: 'red'        }        drawItems.push(topCarSprite);        drawItems.push(topCarSpriteText);        //surface.add(topCarSprite); //绘制到图形上        //surface.add(topCarSpriteText);        surface.add(drawItems);        //根据ID获取指定的sprite        topCarSprite = surface.get("topcar");        topCarSpriteText = surface.get("topcartext");        var id1 = setInterval(function(){            var xy = topCarSprite.cls;    // xy为 x-y            var xyArray = xy.split('-');            //var t = xyArray[0]-200 > 0? xyArray[0]-200:600;            var t = xyArray[0]-200;            topCarX = 200+((t+50)%600);            topCarSprite.cls = topCarX+'-'+xyArray[1];            //console.log('topCarSprite: '+ topCarSprite.cls);            topCarSprite.setAttributes({                path:'M'+topCarX+','+topCarY+'L'+topCarX+','+(topCarY-10)+' L'+(topCarX+10)+','+topCarY+' L'+topCarX+','+(topCarY+10)+' L'+topCarX+','+topCarY            });            topCarSpriteText.setAttributes({                x:topCarX - 10,                y:topCarY + 30            });            surface.renderFrame();        },1000);        draw.callParent(arguments);    },    listeners:{        spriteclick:function(item, event){            var sprite = item && item.sprite;            if(sprite.type == 'circle')            {                //绘制图片                var draw = this,                    surface = draw.getSurface();                var cx = sprite.cx,                    cy = 0,                    heightPic = 200,                    widthPic = 200;                if(sprite.cy < 150)                    cy = sprite.cy;                else                    cy = sprite.cy - heightPic;                var pic = Ext.create('Ext.draw.sprite.Image',{                    src: Ext.getResourcePath('images/img'+Ext.Number.randomInt(1,4)+'.jpg'),                    x: cx,                    y: cy,                    height: heightPic,                    width: widthPic,                    fx:{                        duration:300,                        easing: 'bounceOut'                    }                });                surface.add(pic);                setTimeout(function(){                    pic.destroy();                },2000);            }            else if(sprite.type == 'path'){                alert(sprite.data);            }            console.log("spriteclick....");            console.log(sprite);        }    }});
0 0