Ext.draw: как управлять спрайтами? - PullRequest
Новая
       8

Ext.draw: как управлять спрайтами?

4 голосов
/ 16 августа 2011

Я пытаюсь создать приложение для рисования с 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).

Ответы [ 2 ]

4 голосов
/ 16 мая 2012

В дополнение к моему предыдущему ответу вы можете добавить прослушиватель для спрайта и запустить событие для какого-либо объекта.Тогда вы можете поймать его в контроллере.

Пример: 

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);
}
3 голосов
/ 16 мая 2012

Я возился с тем же.Похоже, что вы не можете сделать это, потому что это объект 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;
}

Вы можете видеть, где я просто передаю параметр для слушателей, и я могу определить объект в другом месте.Вы можете сделать это в своей собственной функции или где-нибудь в контроллере.В то время как фактический спрайт должен быть в представлении, это делает их немного более динамичными и позволяет вам немного легче ими манипулировать.

...