增加对齐方式
This commit is contained in:
mkwiser
parent
b1550e3be5
commit
22f361f390
121
src/editor/command/align.js
Normal file
121
src/editor/command/align.js
Normal file
@ -0,0 +1,121 @@
|
||||
/**
|
||||
* @file align.js
|
||||
* @author mengke01
|
||||
* @date
|
||||
* @description
|
||||
* 轮廓对齐方式
|
||||
*/
|
||||
|
||||
|
||||
define(
|
||||
function(require) {
|
||||
var lang = require('common/lang');
|
||||
var computeBoundingBox = require('graphics/computeBoundingBox');
|
||||
var pathAdjust = require('graphics/pathAdjust');
|
||||
|
||||
var support = {
|
||||
|
||||
/**
|
||||
* 对齐方式
|
||||
*
|
||||
* @param {Array} shapes 形状集合
|
||||
* @param {string} align 对齐方式
|
||||
*/
|
||||
align: function(shapes, align) {
|
||||
|
||||
if (!shapes.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var contours = shapes.map(function(shape) {
|
||||
return shape.points;
|
||||
});
|
||||
|
||||
// 求边界线
|
||||
var bound = computeBoundingBox.computePath.apply(null, contours);
|
||||
bound.x1 = bound.x + bound.width;
|
||||
bound.y1 = bound.y + bound.height;
|
||||
bound.xc = bound.x + bound.width / 2;
|
||||
bound.yc = bound.y + bound.height / 2;
|
||||
|
||||
var xOffset;
|
||||
var yOffset;
|
||||
contours.forEach(function(contour) {
|
||||
var b = computeBoundingBox.computePath(contour);
|
||||
xOffset = 0;
|
||||
yOffset = 0;
|
||||
|
||||
if ('left' === align) {
|
||||
xOffset = bound.x - b.x;
|
||||
}
|
||||
else if ('center' === align) {
|
||||
xOffset = bound.xc - b.x - b.width / 2;
|
||||
}
|
||||
else if ('right' === align) {
|
||||
xOffset = bound.x1 - b.x - b.width;
|
||||
}
|
||||
else if ('top' === align) {
|
||||
yOffset = bound.y - b.y;
|
||||
}
|
||||
else if ('middle' === align) {
|
||||
yOffset = bound.yc - b.y - b.height / 2;
|
||||
}
|
||||
else if ('bottom' === align) {
|
||||
yOffset = bound.y1 - b.y - b.height;
|
||||
}
|
||||
pathAdjust(contour, 1, 1, xOffset, yOffset);
|
||||
});
|
||||
|
||||
this.fontLayer.refresh();
|
||||
},
|
||||
|
||||
/**
|
||||
* 字体垂直对齐
|
||||
*
|
||||
* @param {Array} shapes 形状集合
|
||||
* @param {string} align 对齐方式
|
||||
*/
|
||||
verticalalign: function(shapes, align) {
|
||||
|
||||
if (!shapes.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var contours = shapes.map(function(shape) {
|
||||
return shape.points;
|
||||
});
|
||||
|
||||
var metrics = this.axis.metrics;
|
||||
var ybaseline = this.axis.y; // 基线
|
||||
var yascent = ybaseline - metrics.ascent; // 上升
|
||||
var ydescent = ybaseline - metrics.descent; // 下降
|
||||
var ymiddle = (yascent + ydescent) / 2; // 中间
|
||||
|
||||
// 求边界线
|
||||
var bound = computeBoundingBox.computePath.apply(null, contours);
|
||||
var yOffset = 0;
|
||||
|
||||
if ('ascent' === align) {
|
||||
yOffset = yascent - bound.y;
|
||||
}
|
||||
else if ('middle' === align) {
|
||||
yOffset = ymiddle - bound.y - bound.height / 2;
|
||||
}
|
||||
else if ('descent' === align) {
|
||||
yOffset = ydescent - bound.y - bound.height;
|
||||
}
|
||||
else if ('baseline' === align) {
|
||||
yOffset = ybaseline - bound.y - bound.height;
|
||||
}
|
||||
|
||||
contours.forEach(function(contour) {
|
||||
pathAdjust(contour, 1, 1, 0, yOffset);
|
||||
});
|
||||
|
||||
this.fontLayer.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
return support;
|
||||
}
|
||||
);
|
||||
@ -261,6 +261,7 @@ define(
|
||||
|
||||
lang.extend(support, require('./transform'));
|
||||
lang.extend(support, require('./shapes'));
|
||||
lang.extend(support, require('./align'));
|
||||
|
||||
return support;
|
||||
}
|
||||
|
||||
@ -27,8 +27,8 @@ define(
|
||||
title: '复制'
|
||||
},
|
||||
{
|
||||
name: 'position',
|
||||
title: '排列',
|
||||
name: 'order',
|
||||
title: '顺序',
|
||||
items: [
|
||||
{
|
||||
name: 'top',
|
||||
|
||||
@ -45,20 +45,89 @@ define(
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'rotate_left',
|
||||
title: '向左旋转'
|
||||
name: 'transform',
|
||||
title: '变换',
|
||||
items: [
|
||||
{
|
||||
name: 'rotate_left',
|
||||
title: '向左旋转'
|
||||
},
|
||||
{
|
||||
name: 'rotate_right',
|
||||
title: '向右旋转'
|
||||
},
|
||||
{
|
||||
name: 'reverse_shapes',
|
||||
title: '翻转'
|
||||
},
|
||||
{
|
||||
name: 'mirror_shapes',
|
||||
title: '镜像'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: 'shapes_align',
|
||||
title: '对齐形状',
|
||||
items: [
|
||||
{
|
||||
name: 'shapes_align',
|
||||
type: 'left',
|
||||
title: '左对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_align',
|
||||
type: 'center',
|
||||
title: '居中对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_align',
|
||||
type: 'right',
|
||||
title: '右对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_align',
|
||||
type: 'top',
|
||||
title: '顶部对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_align',
|
||||
type: 'middle',
|
||||
title: '中间对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_align',
|
||||
type: 'bottom',
|
||||
title: '底部对齐'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'rotate_right',
|
||||
title: '向右旋转'
|
||||
},
|
||||
{
|
||||
name: 'reverse_shapes',
|
||||
title: '翻转'
|
||||
},
|
||||
{
|
||||
name: 'mirror_shapes',
|
||||
title: '镜像'
|
||||
name: 'shapes_verticalalign',
|
||||
title: '垂直方向',
|
||||
items: [
|
||||
{
|
||||
name: 'shapes_verticalalign',
|
||||
type: 'ascent',
|
||||
title: '顶端对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_verticalalign',
|
||||
type: 'middle',
|
||||
title: '居中对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_verticalalign',
|
||||
type: 'descent',
|
||||
title: '低端对齐'
|
||||
},
|
||||
{
|
||||
name: 'shapes_verticalalign',
|
||||
type: 'baseline',
|
||||
title: '基线对齐'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'add_referenceline',
|
||||
|
||||
@ -128,6 +128,16 @@ define(
|
||||
else if (command == 'copy') {
|
||||
this.execCommand('copyshapes', shapes);
|
||||
}
|
||||
else if (command == 'shapes_align') {
|
||||
this.execCommand('align', shapes, e.args.type);
|
||||
this.currentGroup.setShapes(shapes);
|
||||
this.currentGroup.refresh();
|
||||
}
|
||||
else if (command == 'shapes_verticalalign') {
|
||||
this.execCommand('verticalalign', shapes, e.args.type);
|
||||
this.currentGroup.setShapes(shapes);
|
||||
this.currentGroup.refresh();
|
||||
}
|
||||
this.fire('change');
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user