github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modify group scale

Browse Source
This commit is contained in:
mkwiser 2014-10-13 00:39:06 +08:00
parent c037efc122
commit 6c3955144b
6 changed files with 201 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/editor/group/ShapesGroup.js
View File

@ -12,8 +12,11 @@ define(
var pathAdjust = require('graphics/pathAdjust');
var lang = require('common/lang');
var computeBoundingBox = require('graphics/computeBoundingBox');
var moveTransform = require('./moveTransform');
var scaleTransform = require('./scaleTransform');
var rotateTransform = require('./rotateTransform');
var updateControls = require('./updateControls');
@ -36,29 +39,46 @@ define(
/**
* 选择组控制器
*/
function ShapesGroup(shapes, editor, mode) {
function ShapesGroup(shapes, editor) {
this.editor = editor;
this.setShapes(shapes);
this.setMode(mode);
}
/**
* 根据控制点做图形变换
*/
ShapesGroup.prototype.beginTransform = function(point) {
ShapesGroup.prototype.beginTransform = function(point, camera) {
this.bound = getBound(this.shapes);
this.originShapes = lang.clone(this.shapes);
this.editor.coverLayer.clearShapes();
this.coverShapes = lang.clone(this.shapes);
var coverLayer = this.editor.coverLayer;
coverLayer.clearShapes();
this.coverShapes.forEach(function(shape) {
shape.id = 'cover-' + shape.id;
shape.selectable = false;
coverLayer.addShape(shape);
});
coverLayer.addShape({
type: 'polygon',
dashed: true,
id: 'bound'
});
};
/**
* 根据控制点做图形变换
*/
ShapesGroup.prototype.transform = function(point, camera) {
if (this.mode === 'scale') {
if (this.mode === 'move') {
moveTransform.call(this, camera);
}
else if (this.mode === 'scale') {
scaleTransform.call(this, point, camera);
}
else {
else if (this.mode === 'rotate') {
rotateTransform.call(this, point, camera);
}
};
@ -66,24 +86,21 @@ define(
/**
* 刷新Shapesgroup信息
*/
ShapesGroup.prototype.finishTransform = function() {
delete this.originShapes;
delete this.bound;
this.refresh();
};
ShapesGroup.prototype.finishTransform = function(point, camera) {
/**
* 移动到指定位置
*/
ShapesGroup.prototype.move = function(mx, my) {
this.shapes.forEach(function(shape) {
pathAdjust(shape.points, 1, 1, mx, my);
var coverLayer = this.editor.coverLayer;
this.coverShapes.forEach(function(shape) {
coverLayer.removeShape(shape);
});
this.coverShapes = this.shapes;
this.transform(point, camera);
delete this.coverShapes;
delete this.bound;
this.editor.fontLayer.refresh();
this.editor.coverLayer.move(mx, my);
this.editor.coverLayer.refresh();
this.refresh();
};
/**
@ -111,10 +128,24 @@ define(
* 设置操作的shapes
*/
ShapesGroup.prototype.setMode = function(mode) {
this.mode = mode || 'scale'; // 两种变化模式，scale和rotate
this.mode = mode; // 两种变化模式，scale和rotate
};
/**
* 移动到指定位置
*/
ShapesGroup.prototype.move = function(mx, my) {
this.shapes.forEach(function(shape) {
pathAdjust(shape.points, 1, 1, mx, my);
});
this.editor.fontLayer.refresh();
this.editor.coverLayer.move(mx, my);
this.editor.coverLayer.refresh();
};
/**
* refresh
*/

57
src/editor/group/moveTransform.js Normal file
View File

@ -0,0 +1,57 @@
/**
* @file moveTransform.js
* @author mengke01
* @date
* @description
* 移动对象
*/
define(
function(require) {
var lang = require('common/lang');
var pathAdjust = require('graphics/pathAdjust');
/**
* 移动对象
*
* @param {Object} camera 镜头对象
*/
function moveTransform (camera) {
var x = camera.x - camera.startX;
var y = camera.y - camera.startY;
// 更新shape
var shapes = this.shapes;
this.coverShapes.forEach(function(coverShape, index) {
var shape = lang.clone(shapes[index]);
pathAdjust(shape.points, 1, 1, x, y);
lang.extend(coverShape, shape);
});
// 更新边界
var coverLayer = this.editor.coverLayer;
var boundShape = coverLayer.getShape('bound');
var bound = this.bound;
boundShape.points = pathAdjust(
[
{x: bound.x, y:bound.y},
{x: bound.x + bound.width, y:bound.y},
{x: bound.x + bound.width, y:bound.y + bound.height},
{x: bound.x, y:bound.y + bound.height}
],
1, 1, x, y
);
coverLayer.refresh();
}
return moveTransform;
}
);

18
src/editor/group/rotateTransform.js
View File

@ -30,29 +30,17 @@ define(
// 更新shape
var shapes = this.shapes;
this.originShapes.forEach(function(originShape, index) {
var shape = lang.clone(originShape);
this.coverShapes.forEach(function(coverShape, index) {
var shape = lang.clone(shapes[index]);
transformer(shape.points, matrix[2], matrix[0], matrix[1]);
lang.extend(shapes[index], shape);
lang.extend(coverShape, shape);
});
this.editor.fontLayer.refresh();
// 更新边界
var coverLayer = this.editor.coverLayer;
var boundShape = coverLayer.getShape('bound');
if(!boundShape) {
boundShape = {
type: 'polygon',
dashed: true,
id: 'bound'
};
coverLayer.addShape(boundShape);
}
var bound = this.bound;
boundShape.points = transformer(
[

20
src/editor/group/scaleTransform.js
View File

@ -35,9 +35,9 @@ define(
// 更新shape
var shapes = this.shapes;
this.originShapes.forEach(function(originShape, index) {
this.coverShapes.forEach(function(coverShape, index) {
var shape = lang.clone(originShape);
var shape = lang.clone(shapes[index]);
pathAdjust(shape.points, matrix[2], matrix[3], -matrix[0], -matrix[1]);
pathAdjust(shape.points, 1, 1, matrix[0], matrix[1]);
@ -48,26 +48,12 @@ define(
if (matrix[3] < 0 && matrix[2] >= 0) {
shape.points = shape.points.reverse();
}
lang.extend(shapes[index], shape);
lang.extend(coverShape, shape);
});
this.editor.fontLayer.refresh();
// 更新边界
var coverLayer = this.editor.coverLayer;
var boundShape = coverLayer.getShape('bound');
if(!boundShape) {
boundShape = {
type: 'polygon',
dashed: true,
id: 'bound'
};
coverLayer.addShape(boundShape);
}
var bound = this.bound;
var points = pathAdjust(
[

8
src/editor/mode/referenceline.js
View File

@ -42,7 +42,7 @@ define(
x: e.x
}
});
this.render.setCursor('e-resize');
this.render.setCursor('col-resize');
}
else if (e.startY <= 20 && e.y > 20) {
this.currentLine = this.axisLayer.addShape('line', {
@ -50,7 +50,7 @@ define(
y: e.y
}
});
this.render.setCursor('n-resize');
this.render.setCursor('row-resize');
}
this._dragMode == mode.dragLine;
@ -93,10 +93,10 @@ define(
if (m === mode.dragLine) {
var line = arguments[1];
if(undefined !== line.p0.x) {
this.render.setCursor('e-resize');
this.render.setCursor('col-resize');
}
else {
this.render.setCursor('n-resize');
this.render.setCursor('row-resize');
}
this.currentLine = line;

89
src/editor/mode/shapes.js
View File

@ -118,14 +118,14 @@ define(
var result = render.getLayer('cover').getShapeIn(e);
if(result) {
if (this.currentGroup) {
this.currentPoint = lang.clone(result[0]);
}
}
else {
if (this.currentGroup) {
this.currentPoint = null;
result = render.getLayer('font').getShapeIn(e);
if(result) {
var shape = result[0];
if (result.length > 1) {
@ -139,10 +139,10 @@ define(
this.currentGroup.setShapes([shape]);
this.currentGroup.setMode('scale');
this.currentGroup.refresh();
this.clicked = false;
return;
}
}
}
// 框选模式
this.setMode('range');
@ -154,12 +154,9 @@ define(
*/
dragstart: function(e) {
if (this.currentGroup) {
// 点拖动模式
if (this.currentPoint) {
this.currentGroup.beginTransform(this.currentPoint);
this.currentGroup.beginTransform(this.currentPoint, this.render.camera);
}
// 复制模式
else if (e.ctrlKey && e.altKey) {
@ -172,23 +169,19 @@ define(
this.currentGroup.setShapes(shapes);
}
else {
this.currentGroup.setMode('move');
this.currentGroup.beginTransform(this.currentPoint, this.render.camera);
}
},
/**
* 拖动事件
*/
drag: function(e) {
var render = this.render;
var camera = render.camera;
if(this.currentGroup) {
if (this.currentPoint) {
this.currentGroup.transform(this.currentPoint, camera);
}
else {
this.currentGroup.move(camera.mx, camera.my);
}
this.currentGroup.transform(this.currentPoint, this.render.camera);
}
},
@ -196,35 +189,29 @@ define(
* 拖动结束事件
*/
dragend: function(e) {
if (this.currentGroup) {
if (this.currentPoint) {
this.currentGroup.finishTransform(this.currentPoint);
this.currentPoint = null;
}
this.fire('change');
}
},
/**
* 点击
*/
click: function(e) {
// 变换编辑模式
if (e.time > 400 && this.currentGroup && !this.currentPoint) {
this.currentGroup.setMode(this.currentGroup.mode == 'scale' ? 'rotate' : 'scale');
this.currentGroup.refresh();
}
else {
if (this.currentPoint) {
this.currentGroup.finishTransform(this.currentPoint, this.render.camera);
this.currentPoint = null;
}
else if (this.currentGroup.mode == 'move') {
this.currentGroup.finishTransform(this.currentPoint, this.render.camera);
this.currentGroup.setMode('scale');
}
this.render.setCursor('default');
this.fire('change');
},
/**
* 移动
*/
move: function(e) {
var shapes = this.coverLayer.getShapeIn(e);
if(shapes) {
var mode = this.currentGroup.mode;
if(shapes && mode != 'move' ) {
this.render.setCursor(POS_CUSOR[this.currentGroup.mode][shapes[0].pos] || 'default');
}
else {
@ -237,14 +224,22 @@ define(
*/
rightdown: function(e) {
// 对单个shape进行操作
if (this.currentGroup) {
this.contextMenu.onClick = lang.bind(onContextMenu, this);
this.contextMenu.show(e,
this.currentGroup.shapes.length > 1
? commandList.shapes
: commandList.shape
);
},
click: function(e) {
if (this.clicked) {
// 变换编辑模式
var mode = this.currentGroup.mode;
this.currentGroup.setMode(mode == 'scale' ? 'rotate' : 'scale');
this.currentGroup.refresh();
}
this.clicked = true;
},
/**
@ -252,27 +247,28 @@ define(
*/
keyup: function(e) {
// esc键，重置model
if (e.key == 'delete' && this.currentGroup) {
if (e.key == 'delete') {
this.execCommand('removeshapes', this.currentGroup.shapes);
this.setMode();
this.fire('change');
}
else if(e.keyCode == 65 && e.ctrlKey && this.currentGroup) {
// 全选
else if(e.keyCode == 65 && e.ctrlKey) {
this.currentGroup.setShapes(this.fontLayer.shapes.slice());
this.currentGroup.refresh();
}
// 剪切
else if (e.keyCode == 88 && e.ctrlKey && this.currentGroup) {
else if (e.keyCode == 88 && e.ctrlKey) {
this.execCommand('cutshapes', this.currentGroup.shapes);
this.setMode();
this.fire('change');
}
// 复制
else if (e.keyCode == 67 && e.ctrlKey && this.currentGroup) {
else if (e.keyCode == 67 && e.ctrlKey) {
this.execCommand('copyshapes', this.currentGroup.shapes);
}
// 移动
else if(stepMap[e.key] && this.currentGroup) {
else if(stepMap[e.key]) {
this.fire('change');
}
else if (e.key == 'esc') {
@ -285,7 +281,7 @@ define(
*/
keydown: function(e) {
// 移动
if(stepMap[e.key] && this.currentGroup) {
if(stepMap[e.key]) {
this.currentGroup.move(stepMap[e.key][0], stepMap[e.key][1]);
}
},
@ -296,6 +292,8 @@ define(
begin: function(shapes) {
this.currentGroup = new ShapesGroup(shapes, this);
this.currentGroup.refresh();
this.currentGroup.setMode('scale');
this.clicked = false;
},
@ -304,14 +302,9 @@ define(
*/
end: function() {
if (this.currentGroup) {
if (this.currentPoint) {
this.currentGroup.finishTransform(this.currentPoint);
this.currentPoint = null;
}
this.currentGroup.dispose();
this.currentGroup = null;
}
this.render.setCursor('default');
}