Question

我正在尝试使用Sencha Touch和Ext.draw.Component将画布绘制到屏幕上。我无法做任何渲染。

这是我的主视图，已被设置为初始视图。

Ext.define('Booking.view.panelOne', {
    extend: 'Ext.Panel',
    alias: 'widget.panelOne',
    requires: [
        'Booking.view.drawComponent'
    ],
    config: {
        itemId: 'panelOne',
        ui: 'light',
        layout: {
           type: 'card'
        },
        scrollable: 'horizontal',
        items: [
            {
                xtype: 'drawComponent'
            }
        ]
    }
});

这是我的draw.Component的代码，我正试图将基本形状渲染到屏幕上。

Ext.define('Booking.view.drawComponent', {
    extend: 'Ext.draw.Component',
    alias: 'widget.drawComponent',

    config: {
        docked: 'left',
        height: '100%',
        itemId: 'myComponent',
        width: '100%'
    },

    initialize: function() {
        this.callParent();

        Booking.view.drawComponent.getSurface('main').add({
            type: 'circle',
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
        }).show(true);

        Booking.view.drawComponent.surface.add({
            type: 'circle',
            fill: '#000',
            radius: 100,
            x: 300,
            y: 300
        }).show(true);
    }

});

我对此感到非常困惑，并发现它非常不愉快。感谢任何帮助。谢谢。

Answer 1

使用getSurface方法而不是Booking.view.drawComponent

this.getSurface('main').add({
    type: 'circle',
    fill: '#79BB3F',
    radius: 100,
    x: 100,
    y: 100
}).show(true);

Here is a link to th fiddle.

Answer 2

Booking.view.drawComponent没有surface属性。因此，在add上调用Booking.view.drawComponent.surface方法会引发错误。

See working demo here

Sencha Touch：Ext.draw.Component根本不起作用

2 个答案: