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

增加初始化设置

Browse Source
This commit is contained in:
kekee000
2014-11-16 21:49:44 +08:00
parent 5f91700cc9
commit 3693d0186d
13 changed files with 179 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/common/ico.less
View File

@@ -3,15 +3,18 @@
// fontface
@font-face {
font-family: 'fonteditor';
src: url('../font/iconfont.ttf') format('truetype');
src: url('../../font/iconfont.ttf') format('truetype');
}
.ico() {
display: inline-block;
&:before,
&:after {
font-family: 'fonteditor';
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.1px;
}
}
.i-ico(@unicode) {

28
demo/css/editor.css
View File

@@ -17,16 +17,21 @@ a:hover {
}
@font-face {
font-family: 'fonteditor';
src: url('../font/iconfont.ttf') format('truetype');
src: url('../../font/iconfont.ttf') format('truetype');
}
.i-edit,
.i-del {
display: inline-block;
font-size: 12px;
}
.i-edit:before,
.i-del:before,
.i-edit:after,
.i-del:after {
font-family: 'fonteditor';
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.1px;
font-size: 12px;
}
.i-edit:hover,
.i-del:hover {
@@ -41,6 +46,9 @@ a:hover {
}
.i-github {
display: inline-block;
}
.i-github:before,
.i-github:after {
font-family: 'fonteditor';
font-style: normal;
-webkit-font-smoothing: antialiased;
@@ -51,10 +59,6 @@ a:hover {
}
.close-editor {
display: inline-block;
font-family: 'fonteditor';
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.1px;
position: absolute;
right: 0;
top: 0;
@@ -65,6 +69,13 @@ a:hover {
border-left: 1px solid #000;
display: none;
}
.close-editor:before,
.close-editor:after {
font-family: 'fonteditor';
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.1px;
}
.close-editor:before {
content: '\e611';
}
@@ -133,11 +144,14 @@ a:hover {
}
.editor-contextmenu li[data-tag="selected"] {
display: inline-block;
display: block;
}
.editor-contextmenu li[data-tag="selected"]:before,
.editor-contextmenu li[data-tag="selected"]:after {
font-family: 'fonteditor';
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.1px;
display: block;
}
.editor-contextmenu li[data-tag="selected"]:after {
content: '\e610';

2
src/editor/Editor.js
View File

@@ -23,6 +23,7 @@ define(
var initBinder = require('./controller/initBinder');
var initAxis = require('./controller/initAxis');
var initFont = require('./controller/initFont');
var initSetting = require('./controller/initSetting');
/**
* Render控制器
@@ -42,6 +43,7 @@ define(
Editor.prototype.setRender = function(render) {
this.render = render;
initSetting.call(this);
initFont.call(this);
initRender.call(this);
initLayer.call(this);

35
src/editor/command/support.js
View File

@@ -232,18 +232,34 @@ define(
},
/**
* 是否打开智能吸附
* 是否打开网格吸附
*/
sorption: function(open) {
open = !!open;
menuUtil.setSelected(commandList.editor, 'sorption', open);
this.options.sorption.enable = open;
gridsorption: function(enabled) {
menuUtil.setSelected(commandList.editor, 'setting.gridsorption', !!enabled);
this.options.sorption.enableGrid = this.sorption.enableGrid = !!enabled;
},
/**
* 是否打开轮廓吸附
*/
shapesorption: function(enabled) {
menuUtil.setSelected(commandList.editor, 'setting.shapesorption', !!enabled);
this.options.sorption.enableShape = this.sorption.enableShape = !!enabled;
},
/**
* 是否打开轮廓吸附
*/
showgrid: function(enabled) {
menuUtil.setSelected(commandList.editor, 'setting.showgrid', !!enabled);
this.options.axis.showGrid = this.axis.showGrid = !!enabled;
this.axisLayer.refresh();
},
/**
* 设置字体信息
*/
font: function() {
setfont: function() {
// 计算边界
var box = computeBoundingBox.computePathBox.apply(null, this.fontLayer.shapes.map(function(shape) {
@@ -267,6 +283,13 @@ define(
name: this.font.name
}
});
},
/**
* 更多设置
*/
moresetting: function(enabled) {
this.fire('setting:more', this.options);
}
};

11
src/editor/controller/initRender.js
View File

@@ -56,9 +56,14 @@ define(
var type = e.args.type;
this.execCommand('addsupportshapes', type);
}
else if (e.command == 'sorption') {
var selected = e.args.selected;
this.execCommand('sorption', !selected);
else if (e.command == 'gridsorption') {
this.execCommand('gridsorption', !e.args.selected);
}
else if (e.command == 'shapesorption') {
this.execCommand('shapesorption', !e.args.selected);
}
else if (e.command == 'showgrid') {
this.execCommand('showgrid', !e.args.selected);
}
else {
this.execCommand(e.command, e);

37
src/editor/controller/initSetting.js Normal file
View File

@@ -0,0 +1,37 @@
/**
* @file initSetting.js
* @author mengke01
* @date
* @description
* 初始化设置
*/
define(
function(require) {
var menuUtil = require('../menu/util');
var commandList = require('../menu/commandList');
/**
* 初始化设置选项
*/
function initSetting() {
menuUtil.setSelected(
commandList.editor, 'setting.gridsorption',
!!this.options.sorption.enableGrid
);
menuUtil.setSelected(
commandList.editor, 'setting.shapesorption',
!!this.options.sorption.enableShape
);
menuUtil.setSelected(
commandList.editor, 'setting.showgrid',
!!this.options.axis.showGrid
);
}
return initSetting;
}
);

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

@@ -60,7 +60,7 @@ define(
this.boundControl.hide();
// 设置吸附选项
if (this.mode === 'move' && this.shapes.length && this.editor.options.sorption.enable) {
if (this.mode === 'move' && this.editor.sorption.isEnable()) {
var sorptionShapes = [];
var shapes = this.shapes;
@@ -84,7 +84,7 @@ define(
this, camera,
key.ctrlKey ? false : key.altKey,
key.ctrlKey ? false : key.shiftKey,
this.editor.options.sorption.enable
this.editor.sorption.isEnable()
);
}
else if (this.mode === 'scale') {
@@ -110,7 +110,7 @@ define(
this.editor.coverLayer.removeShape('bound');
this.editor.coverLayer.removeShape('boundcenter');
this.editor.fontLayer.refresh();
if (this.mode === 'move' && this.editor.options.sorption.enable) {
if (this.mode === 'move' && this.editor.sorption.isEnable()) {
this.editor.coverLayer.removeShape('sorptionX');
this.editor.coverLayer.removeShape('sorptionY');
this.editor.sorption.clear();

6
src/editor/group/moveTransform.js
View File

@@ -46,9 +46,8 @@ define(
sorptionShapeX = coverLayer.addShape({
type: 'line',
id: 'sorptionX',
dashed: true,
style: {
strokeColor: 'red'
strokeColor: '#4AFF4A'
},
p0: {},
p1: {}
@@ -82,9 +81,8 @@ define(
sorptionShapeY = coverLayer.addShape({
type: 'line',
id: 'sorptionY',
dashed: true,
style: {
strokeColor: 'red'
strokeColor: '#4AFF4A'
},
p0: {},
p1: {}

25
src/editor/menu/editor.js
View File

@@ -62,9 +62,26 @@ define(
title: '切割轮廓'
},
{
name: 'sorption',
title: '智能吸附',
selected: true
name: 'setting',
title: '设置',
items: [
{
name: 'gridsorption',
title: '吸附到网格线'
},
{
name: 'shapesorption',
title: '吸附到轮廓'
},
{
name: 'showgrid',
title: '显示网格'
},
{
name: 'moresetting',
title: '更多..'
}
]
},
{
name: 'add_referenceline',
@@ -79,7 +96,7 @@ define(
title: '重置缩放'
},
{
name: 'font',
name: 'setfont',
title: '字形信息'
}
];

10
src/editor/options.js
View File

@@ -17,10 +17,10 @@ define(
// 吸附选项
sorption: {
enable: true, // 是否启用
grid: true, // 吸附到网格
shape: true, // 吸附到对象
delta: 5 // 吸附delta
enableGrid: false, // 吸附到网格
enableShape: true, // 吸附到对象
gridDelta: 4, // 网格delta
delta: 5 // 对象delta
},
// 辅助线
@@ -45,7 +45,7 @@ define(
// 轴线
axis: {
showGrid: true, // 显示网格
gapColor: '#A6A6FF',
gridColor: 'red',
emColor: 'red',

18
src/editor/widget/Sorption.js
View File

@@ -49,9 +49,10 @@ define(
* @param {Object} options 参数选项
*/
function Sorption(options) {
this.gridDelta = options.gridDelta || 4; // 吸附检查offset
this.delta = options.delta || 5; // 吸附检查offset
this.enableGrid = true;
this.enableShape = true;
this.enableGrid = options.enableGrid || false;
this.enableShape = options.enableShape || true;
}
/**
@@ -135,7 +136,7 @@ define(
if (this.enableGrid) {
var delta = (x - this.axis.x) % this.axis.gap;
if (Math.abs(delta) < this.delta) {
if (Math.abs(delta) < this.gridDelta) {
return {
axis: x - delta,
y: 0
@@ -162,7 +163,7 @@ define(
if (this.enableGrid) {
var delta = (y - this.axis.y) % this.axis.gap;
if (Math.abs(delta) < this.delta) {
if (Math.abs(delta) < this.gridDelta) {
return {
axis: y - delta,
x: 0
@@ -173,6 +174,15 @@ define(
return false;
};
/**
* 结束吸附检测
*
* @return {this}
*/
Sorption.prototype.isEnable = function() {
return this.enableShape || this.enableGrid;
};
/**
* 结束吸附检测
*

2
src/render/shape/support.js
View File

@@ -16,7 +16,7 @@ define(
rect: require('./Rect'),
polygon: require('./Polygon'),
font: require('./Font'),
glyf: require('./Glyf'),
//glyf: require('./Glyf'),
path: require('./Path'),
axis: require('./Axis'),
graduation: require('./Graduation'),

3
src/render/util/drawAxis.js
View File

@@ -26,6 +26,8 @@ define(
var x = Math.round(config.x);
var y = Math.round(config.y);
// 显示网格线
if (false !== config.showGrid) {
ctx.beginPath();
ctx.strokeStyle = config.gapColor || '#A6A6FF';
@@ -53,6 +55,7 @@ define(
}
ctx.stroke();
}
ctx.beginPath();
ctx.strokeStyle = config.gridColor || 'red';