ext js改变颜色，宽度和复制精灵

Question

我是新手，很难学习它。如何更改颜色，宽度以及能够复制图纸。我希望能够更改自由手绘图的颜色，更改线宽，并能够选择和复制精灵或绘图。

我的代码到目前为止：

这是视图

Ext.define('SketchApp.view.main.Shapes', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainShapes',

requires: [
'Ext.draw.Component',
'SketchApp.view.main.ShapesDrawComponent'
],

layout: 'anchor',
width: 650,
style: {borderColor:'black', borderStyle:'solid'},

tbar: ['->', {
    text: 'Clear',
    handler: function () {
        // Remove all the sprites and redraw.
        var draw = Ext.getCmp('free-draw');
        draw.getSurface().removeAll(true);
        draw.renderFrame();
    }
}],

items: [{
    xtype: 'free-draw-component',
    id: 'free-draw',
    anchor: '100%',
    height: 500
}],

onAdded: function(container, pos, instanced) { 
    this.callParent([container, pos, instanced]); 
    container.setScrollable(false);
},

onRemoved: function(destroying) {
    this.ownerCt.setScrollable(true);
    this.callParent([destroying]);
}

});

这是组件

Ext.define('SketchApp.view.main.ShapesDrawComponent', function () {

    function smoothList(points) {
        if (points.length < 3) {
            return ['M', points[0], points[1]];
        }

        var dx = [], dy = [], result = ['M'],
            i, ln = points.length;

        for (i = 0; i < ln; i += 2) {
            dx.push(points[i]);
            dy.push(points[i + 1]);
        }

        dx = Ext.draw.Draw.spline(dx);
        dy = Ext.draw.Draw.spline(dy);
        result.push(dx[0], dy[0], 'C');

        for (i = 1, ln = dx.length; i < ln; i++) {
            result.push(dx[i], dy[i]);
        }

        return result;
    }

    return {
        extend: 'Ext.draw.Container',
        xtype: 'free-draw-component',

        config: {
            background: 'white'
        },

        sprite: undefined,
        lastEventX: undefined,
        lastEventY: undefined,
        list: [],

        constructor: function () {
            var me = this;

            me.callParent(arguments);

            me.on({
                element: 'element',
                mousedown: 'onMouseDown',
                mousemove: 'onMouseMove',
                mouseup: 'onMouseUp',
                mouseleave: 'onMouseUp',
                scope: me
            });
        },

        onMouseDown: function (e) {
            var targetElement = this,
                me = Ext.getCmp(targetElement.id),
                surface = me.getSurface(),
                xy, x, y;

            if (!me.sprite) {
                xy = surface.getEventXY(e);
                x = xy[0];
                y = xy[1];

                me.list = [x, y, x, y];
                me.lastEventX = x;
                me.lastEventY = y;

                me.sprite = surface.add({
                    type: 'path',
                    path: ['M', me.list[0], me.list[1], 'L', me.list[0] + 1e-1, me.list[1] + 1e-1],
                    lineWidth: 20,
                    lineCap: 'round',
                    lineJoin: 'round',
                    strokeStyle: new Ext.util.Color(0,0,0)
                });
                surface.renderFrame();
            }
        },

        onMouseMove: function (e) {
            var targetElement = this,
                me = Ext.getCmp(targetElement.id),
                surface = me.getSurface(),
                path, xy, x, y, dx, dy, D;

            if (me.sprite) {
                xy = surface.getEventXY(e);
                x = xy[0];
                y = xy[1];
                dx = me.lastEventX - x;
                dy = me.lastEventY - y;
                D = 10;

                if (dx * dx + dy * dy < D * D) {
                    me.list.length -= 2;
                    me.list.push(x, y);
                } else {
                    me.list.length -= 2;
                    me.list.push(me.lastEventX = x, me.lastEventY = y);
                    me.list.push(me.lastEventX + 1, me.lastEventY + 1);
                }

                path = smoothList(me.list);

                me.sprite.setAttributes({
                    path: path
                });
                if (Ext.os.is.Android) {
                    Ext.draw.Animator.schedule(function () {
                        surface.renderFrame();
                    }, me);
                } else {
                    surface.renderFrame();
                }
            }
        },

        onMouseUp: function(e) {
            var targetElement = this,
                me = Ext.getCmp(targetElement.id);

            me.sprite = null;
        },

        onResize: function() {
            var size = this.element.getSize();

            this.getSurface().setRect([0, 0, size.width, size.height]);
            this.renderFrame();
        }
    };
});

Answer 1

对于width和colour，你可以使用ComboBox和ColorPicker。

在这个FIDDlE中，我使用您的代码创建了一个演示，并在您的代码中进行了一些修改。我希望这能帮助您或指导您实现您的要求。对于copy和paste我仍在工作如果我会成功，那么我将在这里更新我的答案。

function smoothList(points) {
    if (points.length < 3) {
        return ['M', points[0], points[1]];
    }

    var dx = [],
        dy = [],
        result = ['M'],
        i, ln = points.length;

    for (i = 0; i < ln; i += 2) {
        dx.push(points[i]);
        dy.push(points[i + 1]);
    }

    dx = Ext.draw.Draw.spline(dx);
    dy = Ext.draw.Draw.spline(dy);
    result.push(dx[0], dy[0], 'C');

    for (i = 1, ln = dx.length; i < ln; i++) {
        result.push(dx[i], dy[i]);
    }

    return result;
}

Ext.define('ShapesDrawComponent', {
    extend: 'Ext.draw.Component',
    alias: 'widget.free-draw-component',
    config: {
        background: 'white',
        strokeStyle: '000000',
        lineWidth: 5
    },

    sprite: undefined,
    lastEventX: undefined,
    lastEventY: undefined,
    list: [],

    constructor: function () {
        var me = this;

        me.callParent(arguments);

        me.on({
            element: 'element',
            mousedown: 'onMouseDown',
            mousemove: 'onMouseMove',
            mouseup: 'onMouseUp',
            mouseleave: 'onMouseUp',
            scope: me
        });
    },

    onMouseDown: function (e) {
        var targetElement = this,
            me = Ext.getCmp(targetElement.id),
            surface = me.getSurface(),
            xy, x, y;

        if (!me.sprite) {
            xy = surface.getEventXY(e);
            x = xy[0];
            y = xy[1];

            me.list = [x, y, x, y];
            me.lastEventX = x;
            me.lastEventY = y;

            me.sprite = surface.add({
                type: 'path',
                path: ['M', me.list[0], me.list[1], 'L', me.list[0] + 1e-1, me.list[1] + 1e-1],
                lineWidth: me.getLineWidth(),
                lineCap: 'round',
                lineJoin: 'round',
                strokeStyle: `#${me.getStrokeStyle()}`
            });
            surface.renderFrame();
        }
    },

    onMouseMove: function (e) {
        var targetElement = this,
            me = Ext.getCmp(targetElement.id),
            surface = me.getSurface(),
            path, xy, x, y, dx, dy, D;

        if (me.sprite) {
            xy = surface.getEventXY(e);
            x = xy[0];
            y = xy[1];
            dx = me.lastEventX - x;
            dy = me.lastEventY - y;
            D = 10;

            if (dx * dx + dy * dy < D * D) {
                me.list.length -= 2;
                me.list.push(x, y);
            } else {
                me.list.length -= 2;
                me.list.push(me.lastEventX = x, me.lastEventY = y);
                me.list.push(me.lastEventX + 1, me.lastEventY + 1);
            }

            path = smoothList(me.list);

            me.sprite.setAttributes({
                path: path
            });
            if (Ext.os.is.Android) {
                Ext.draw.Animator.schedule(function () {
                    surface.renderFrame();
                }, me);
            } else {
                surface.renderFrame();
            }
        }
    },

    onMouseUp: function (e) {
        var targetElement = this,
            me = Ext.getCmp(targetElement.id);

        me.sprite = null;
    },

    onResize: function () {
        var size = this.element.getSize();

        this.getSurface().setRect([0, 0, size.width, size.height]);
        this.renderFrame();
    }
});

Ext.create('Ext.panel.Panel', {
    layout: 'anchor',
    itemId: 'mypanel',
    requires: [
        'Ext.draw.Component',
        'ShapesDrawComponent'
    ],
    renderTo: Ext.getBody(),
    style: {
        borderColor: 'black',
        borderStyle: 'solid'
    },

    tbar: ['->', {
        xtype: 'combo',
        fieldLabel: 'Choose width',
        emptyText: 'Select Width',
        store: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        value: 5,
        listeners: {
            select: function (combo) {
                this.up('#mypanel').down('free-draw-component').setLineWidth(combo.getValue());
            }
        }
    }, {
        text: 'Choose a color',
        menu: {
            xtype: 'menu',
            items: [{
                text: 'Choose a color',
                xtype: 'colorpicker',
                value: "000000",
                listeners: {
                    select: function (picker, color) {
                        this.up('#mypanel').down('free-draw-component').setStrokeStyle(color);
                        this.up('button').blur();
                    }
                }
            }]
        }
    }, {
        text: 'Clear',
        handler: function () {
            // Remove all the sprites and redraw.
            var draw = Ext.getCmp('free-draw');
            draw.getSurface().removeAll(true);
            draw.renderFrame();
        }
    }],

    items: [{
        xtype: 'free-draw-component',
        id: 'free-draw',
        anchor: '100%',
        height: window.innerHeight
    }],

    onAdded: function (container, pos, instanced) {
        this.callParent([container, pos, instanced]);
        container.setScrollable(false);
    },

    onRemoved: function (destroying) {
        this.ownerCt.setScrollable(true);
        this.callParent([destroying]);
    }
});

对于copy和paste这里是链接，因为我已经搜索希望这将帮助你JSFiddle。