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

增加调整字形

Browse Source
This commit is contained in:
kekee000
2014-10-20 22:14:09 +08:00
parent d2bfcb5967
commit 70deab9d7f
16 changed files with 204 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -41,8 +41,9 @@
<ul class="dropdown-menu" role="menu">
<li><a data-action="setting-unicode">代码点</a></li>
<li><a data-action="setting-name">字体信息</a></li>
<li><a data-action="setting-glyf">调整字形</a></li>
<li><a data-action="setting-adjust-pos">调整位置</a></li>
<li><a data-action="setting-adjust-glyf">调整字形</a></li>
<li><a data-action="setting-adjust-glyf">缩放字形</a></li>
<li><a data-action="setting-metrics">调整字体度量</a></li>
</ul>
</div>

6
src/editor/Editor.js
View File

@@ -13,6 +13,7 @@ define(
var modeSupport = require('./mode/support');
var ContextMenu = require('./menu/ContextMenu');
var commandSupport = require('./command/support');
var clipboard = require('./util/clipboard');
var History = require('./util/History');
// editor 的控制器
@@ -149,8 +150,7 @@ define(
* @return {this}
*/
Editor.prototype.setClipBoard = function(shapes) {
Editor.ClipBoardData = null;
Editor.ClipBoardData = shapes;
clipboard.set(shapes, 'editor-shape');
return this;
};
@@ -170,7 +170,7 @@ define(
* @return {this}
*/
Editor.prototype.getClipBoard = function() {
return Editor.ClipBoardData ? lang.clone(Editor.ClipBoardData) : null;
return clipboard.get('editor-shape');
};
/**

8
src/editor/controller/initFont.js
View File

@@ -29,7 +29,10 @@ define(
// 不需要在此保存contours
delete font.contours;
font.rightSideBearing = font.advanceWidth - font.xMax;
var advanceWidth = font.advanceWidth || this.options.unitsPerEm;
font.rightSideBearing = advanceWidth - (font.xMax || advanceWidth);
this.font = font;
// 设置字形
@@ -61,7 +64,7 @@ define(
fontLayer.refresh();
// 设置参考线
this.rightSideBearing.p0.x = originX + font.advanceWidth * scale;
this.rightSideBearing.p0.x = originX + advanceWidth * scale;
this.axisLayer.refresh();
this.setMode();
@@ -230,6 +233,7 @@ define(
this.font.name = options.name;
}
this.fire('change');
return this;
}

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

@@ -199,14 +199,15 @@ define(
if (this.currentPoint) {
this.currentGroup.finishTransform(this.currentPoint, this.render.camera);
this.currentPoint = null;
this.fire('change');
}
else if (this.currentGroup.mode == 'move') {
this.currentGroup.finishTransform(this.currentPoint, this.render.camera);
this.currentGroup.setMode('scale');
this.fire('change');
}
this.render.setCursor('default');
this.fire('change');
},
/**

0
src/fonteditor/widget/clipboard.js → src/editor/util/clipboard.js
View File

4
src/fonteditor/controller/default.js
View File

@@ -10,7 +10,7 @@
define(
function(require) {
var lang = require('common/lang');
var clipboard = require('../widget/clipboard');
var clipboard = require('editor/util/clipboard');
var string = require('common/string');
// 获取ttf的编辑选项
@@ -139,7 +139,7 @@ define(
if (program.editor.isEditing()) {
// 如果是正在编辑的
if (program.data.editingIndex !== -1) {
program.ttfManager.updateGlyf(program.editor.getFont(), program.data.editingIndex);
program.ttfManager.replaceGlyf(program.editor.getFont(), program.data.editingIndex);
}
// 否则新建font
else {

2
src/fonteditor/controller/ttf.js
View File

@@ -10,7 +10,7 @@
define(
function(require) {
var lang = require('common/lang');
var clipboard = require('../widget/clipboard');
var clipboard = require('editor/util/clipboard');
var string = require('common/string');
return {

2
src/fonteditor/dialog/setting-adjust-pos.js
View File

@@ -35,7 +35,7 @@ define(
return require('./setting').derive({
title: '调整字形',
title: '调整字形位置',
getTpl: function() {
return tpl;

72
src/fonteditor/dialog/setting-glyf.js Normal file
View File

@@ -0,0 +1,72 @@
/**
* @file setting-adjust-pos.js
* @author mengke01
* @date
* @description
* 设置自动调整字形位置
*/
define(
function(require) {
var tpl = ''
+ '<div class="form-inline">'
+ '<div class="input-group input-group-sm">'
+ '<span class="input-group-addon">unicode</span>'
+ '<input data-field="unicode" data-type="unicode" id="glyf-unicode" class="form-control">'
+ '</div>'
+ '&nbsp;&nbsp;<span>可以设置多个unicode，例如："$21,$22,$23"</span>'
+ '</div>'
+ '<div class="form-inline">'
+ '<div class="input-group input-group-sm">'
+ '<span class="input-group-addon">左边轴</span>'
+ '<input data-field="leftSideBearing" type="number"'
+ ' min="-16384" max="16384" step="1" class="form-control">'
+ '</div>'
+ '</div>'
+ '<div class="form-inline">'
+ '<div class="input-group input-group-sm">'
+ '<span class="input-group-addon">右边轴</span>'
+ '<input data-field="rightSideBearing" type="number"'
+ ' min="-16384" max="16384" step="1" class="form-control">'
+ '</div>'
+ '</div>';
return require('./setting').derive({
title: '调整字形',
getTpl: function() {
return tpl;
},
set: function(setting) {
this.setFields(setting || {});
},
validate: function() {
var unicode = $('#glyf-unicode').val();
if (unicode && !unicode.match(/^(?:\$[A-F0-9]+)(?:\,\$[A-F0-9]+)*$/i)) {
alert('unicode设置不正确!');
return false;
}
var setting = this.getFields();
if(setting.leftSideBearing === undefined
&& setting.rightSideBearing === undefined
&& setting.unicode === undefined
) {
alert('没有设置项目!');
return false;
}
else {
return setting;
}
}
});
}
);

2
src/fonteditor/dialog/setting-unicode.js
View File

@@ -15,7 +15,7 @@ define(
+ '<button type="button" class="btn btn-default dropdown-toggle"'
+ ' data-toggle="dropdown">起始代码点 <span class="caret"></span></button>'
+ '<ul class="dropdown-menu" role="menu">'
+ '<li><a href="javascript:$(\'#setting-text-unicode\').val(\'$20\')">ascii</a></li>'
+ '<li><a href="javascript:$(\'#setting-text-unicode\').val(\'$21\')">ascii</a></li>'
+ '<li><a href="javascript:$(\'#setting-text-unicode\').val(\'$E001\')">'
+ 'unicode private data</a></li>'
+ '</ul>'

23
src/fonteditor/dialog/setting.js
View File

@@ -89,15 +89,20 @@ define(
this.getDialog().find('[data-field]').each(function(i, item) {
var field = item.getAttribute('data-field');
var type = item.getAttribute('data-type') || item.type;
if (undefined === setting[field]) {
return;
}
if (item.type == 'checkbox') {
if (type == 'checkbox') {
item.checked = setting[field] ? 'checked' : '';
}
else if (item.type == 'datetime-local') {
else if (type == 'unicode') {
item.value = (setting[field] || []).map(function(u) {
return '$' + u.toString(16);
}).join(',');
}
else if (type == 'datetime-local') {
var val = setting[field];
var date;
if (typeof(val) === 'string') {
@@ -131,18 +136,24 @@ define(
this.getDialog().find('[data-field]').each(function(i, item) {
var field = item.getAttribute('data-field');
var type = item.getAttribute('data-type') || item.type;
if (item.type == 'checkbox') {
if (type == 'checkbox') {
if (item.checked) {
setting[field] = true;
}
}
else if (item.type == 'datetime-local') {
else if (type == 'unicode') {
setting[field] = item.value.trim() == '' ? [] : item.value.split(',').map(function(u) {
return Number('0x' + u.slice(1));
});
}
else if (type == 'datetime-local') {
if (item.value) {
setting[field] = Date.parse(item.value.replace('T', ' '));
}
}
else if (item.type == 'number') {
else if (type == 'number') {
if (item.value) {
var val = +item.value;
if (item.getAttribute('data-ceil')) {

53
src/fonteditor/widget/actions.js
View File

@@ -137,30 +137,53 @@ define(
dlg.show();
},
// 调整字形
'setting-glyf': function() {
var ttf = program.ttfManager.get();
if (ttf) {
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
if (selected.length) {
var glyf = program.ttfManager.getGlyf(selected)[0];
!new setting['glyf']({
onChange: function(setting) {
program.ttfManager.updateGlyf(setting, selected[0]);
}
}).show({
unicode: glyf.unicode,
leftSideBearing: glyf.leftSideBearing,
rightSideBearing: glyf.advanceWidth - glyf.xMax
});
}
}
},
// 调整字形位置
'setting-adjust-pos': function() {
var ttf = program.ttfManager.get();
if (ttf) {
var dlg = new setting['adjust-pos']({
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
var opt = {};
if (selected.length === 1) {
var glyf = program.ttfManager.getGlyf(selected)[0];
opt = {
unicode: glyf.unicode,
leftSideBearing: glyf.leftSideBearing,
rightSideBearing: glyf.advanceWidth - glyf.xMax
};
}
!new setting['adjust-pos']({
onChange: function(setting) {
setTimeout(function() {
program.ttfManager.adjustGlyfPos(setting, selected);
}, 20);
}
});
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
if (selected.length === 1) {
var glyf = program.ttfManager.getGlyf(selected)[0];
dlg.show({
leftSideBearing: glyf.leftSideBearing || '',
rightSideBearing: glyf.advanceWidth - glyf.xMax || ''
});
}
else {
dlg.show();
}
}).show(opt);
}
},

3
src/fonteditor/widget/setting.js
View File

@@ -14,7 +14,8 @@ define(
'adjust-pos': require('../dialog/setting-adjust-pos'),
'adjust-glyf': require('../dialog/setting-adjust-glyf'),
'metrics': require('../dialog/setting-metrics'),
'online': require('../dialog/font-online')
'online': require('../dialog/font-online'),
'glyf': require('../dialog/setting-glyf')
};
}
);

43
src/fonteditor/widget/ttfmanager.js
View File

@@ -183,14 +183,14 @@ define(
};
/**
* 更新指定的glyf
* 替换指定的glyf
*
* @param {Object} glyf glyfobject
* @param {string} index 需要替换的索引列表
* @return {this}
*/
Manager.prototype.updateGlyf = function(glyf, index) {
var list = this.ttf.updateGlyf(glyf, index);
Manager.prototype.replaceGlyf = function(glyf, index) {
var list = this.ttf.replaceGlyf(glyf, index);
if (list.length) {
list[0].modify = 'edit';
this.fireChange(true);
@@ -239,6 +239,43 @@ define(
return this;
};
/**
* 设置glyf
*
* @param {Object} setting 选项
* @param {Array} index 索引
* @return {boolean}
*/
Manager.prototype.updateGlyf = function(setting, index) {
var glyf = this.getGlyf([index])[0];
var changed = false;
if (setting.unicode.toString() != glyf.unicode.toString()) {
glyf.unicode = setting.unicode;
glyf.modify = 'edit';
changed = true;
}
if (
(undefined !== setting.leftSideBearing && setting.leftSideBearing != glyf.leftSideBearing)
|| (undefined !== setting.rightSideBearing && setting.rightSideBearing + (glyf.xMax || 0) != glyf.advanceWidth)
) {
var list = this.ttf.adjustGlyfPos(setting, [index]);
if (list.length) {
list.forEach(function(g) {
g.modify = 'edit';
});
changed = true;
}
}
changed && this.fireChange(true);
return this;
};
/**
* 获取glyfList
*

30
src/ttf/ttf.js
View File

@@ -293,21 +293,6 @@ define(
return result;
};
/**
* 更新指定的glyf
*
* @param {Object} glyf glyfobject
* @param {string} index 需要替换的索引列表
* @return {Array} 改变的glyf
*/
TTF.prototype.updateGlyf = function(glyf, index) {
if (index >=0 && index < this.ttf.glyf.length) {
this.ttf.glyf[index] = glyf;
return [glyf];
}
return [];
};
/**
* 调整glyf位置
@@ -500,6 +485,21 @@ define(
}
};
/**
* 更新指定的glyf
*
* @param {Object} glyf glyfobject
* @param {string} index 需要替换的索引列表
* @return {Array} 改变的glyf
*/
TTF.prototype.replaceGlyf = function(glyf, index) {
if (index >=0 && index < this.ttf.glyf.length) {
this.ttf.glyf[index] = glyf;
return [glyf];
}
return [];
};
/**
* 设置glyf
*

3
ttf.html
View File

@@ -41,8 +41,9 @@
<ul class="dropdown-menu" role="menu">
<li><a data-action="setting-unicode">代码点</a></li>
<li><a data-action="setting-name">字体信息</a></li>
<li><a data-action="setting-glyf">调整字形</a></li>
<li><a data-action="setting-adjust-pos">调整位置</a></li>
<li><a data-action="setting-adjust-glyf">调整字形</a></li>
<li><a data-action="setting-adjust-glyf">缩放字形</a></li>
<li><a data-action="setting-metrics">调整字体度量</a></li>
</ul>
</div>