Ext.draw：如何控制精灵？答案

【问题标题】：Ext.draw: how to control sprites?Ext.draw：如何控制精灵？
【发布时间】：2011-10-27 20:26:18
【问题描述】：

我正在尝试使用 ExtJS4（MVC 方式）制作绘图应用程序。

为此，我想制作几个小部件。这是我的小部件代码：

查看：

Ext.define('VP.view.fields.Field' ,{
    extend: 'Ext.draw.Sprite',
    alias: 'widget.field',

    constructor: function() {
        var parentConfig = {
            id: 'field',
            fill: '#FFFF00',
            type: 'rect',
            width: '100%',
            height: '100%',
            x: 0,
            y: 0
        };
        this.callParent([parentConfig]);
    }
});

控制器：

Ext.define('VP.controller.Fields', {
    extend: 'Ext.app.Controller',

    views: [
        'fields.Field'
    ],

    init: function() {
        console.log('Initialized Field controller!');
        var me = this;
        me.control({
            'field': { //trying to control the widget.field, this fails
            //'viewport > draw[surface]': { //this controls the surface successfully
            //'viewport > draw[surface] > field': { //fails
                click: this.addObject
            }
        });
    },

    addObject : function(event,el){
        console.log(el);
        //console.log(drawComponent);
    }
});

如何控制这个自定义精灵？只能由控制器控制 Ext.components 吗？（Ext.draw.Sprite 不扩展 Ext.component）。

【问题讨论】：

标签： javascript model-view-controller extjs extjs4

【解决方案1】：

我一直在搞同样的事情。看来您不能这样做，因为它是一个 svg 对象，Ext 只是“捕获”并向其添加了一些事件。因为它没有实际的别名（xtype），因为它不是组件，所以也无法查询。不幸的是，您必须在精灵上进行侦听器配置。

另外，我尝试使用您扩展精灵的方法。我无法让它工作，我猜是因为它不是一个组件。

我能够将它保存在控制器中，因为我在控制器中绘制了精灵。因此，我可以在那里手动定义侦听器，并且仍然使用所有控制器引用等。这是我的一个绘图函数的示例：

drawPath: function(canvas,points,color,opacity,stroke,strokeWidth, listeners) {
    // given an array of [x,y] coords relative to canvas axis, draws a path.
    // only supports straight lines
    if (typeof listeners == 'undefined' || listeners == "") {
        listeners = null;
    }
    if (stroke == '' || strokeWidth == '' || typeof stroke == 'undefined' || typeof strokeWidth == 'undefined') {
        stroke = null;
        strokeWidth = null;
    }
    var path = path+"M"+points[0][0]+" "+points[0][1]+" "; // start svg path parameters with given array
    for (i=1;i<points.length;i++) {
        path = path+"L"+points[i][0]+" "+points[i][1]+" ";
    }
    path = path + "Z"; // end svg path params
    var sprite = canvas.surface.add({
        type: 'path',
        opacity: opacity,
        fill:color,
        path: path,
        stroke:stroke,
        'stroke-width': strokeWidth,
        listeners: listeners
    }).show(true);
    this.currFill = sprite;
}

您可以看到我只是在哪里为侦听器传递了参数，我可以在其他地方定义对象。您可以在自己的函数中或在控制器中的任何位置执行此操作。虽然实际的 sprite 应该在视图中，但这会使它们更加动态，并允许您更轻松地操作它们。

【讨论】：

【解决方案2】：

除了我之前的回答之外，您还可以在精灵上添加侦听器并在某个对象上触发事件。然后你可以在控制器中捕捉它。

例子：

spriteObj....{
    listeners: {
        click: {
            var canvas = Ext.ComponentQuery.query('draw[id=something]')[0];
            var sprite = this;
            canvas.fireEvent('spriteclick',sprite);
        }
    }
}

在控制器中：

init: function() {
    console.log('Initialized Field controller!');
    var me = this;
    me.control({
        'draw[id=something]': {
            spriteclick: this.doSomething            
        }
    });
},

doSomething: function (sprite) {
    console.log(sprite);
}

【讨论】：