我是新手，很难学习它。如何更改颜色，宽度以及能够复制图纸。我希望能够更改自由手绘图的颜色，更改线宽，并能够选择和复制精灵或绘图。
到目前为止我的代码：
这是视图
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();
}
};
});
答案 0 :(得分：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。