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

add glyf outout

Browse Source
This commit is contained in:
kekee000
2016-02-25 16:08:25 +08:00
parent 2c26601969
commit a430555105
19 changed files with 307 additions and 1008 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -344,6 +344,16 @@ define(
}
}).show();
})
.on('download-glyf', function (e) {
var SettingGlyfDownload = settingSupport['glyf-download'];
// 获取需要下载的图标，转换成简单字形
var list = program.ttfManager.getCopiedGlyf(e.list);
!new SettingGlyfDownload().show({
ttf: program.ttfManager.get(),
glyf: list[0]
});
})
.on('setting-unicode', function (e) {
var SettingUnicode = settingSupport.unicode;

52
src/fonteditor/dialog/colorpicker.js Normal file
View File

@@ -0,0 +1,52 @@
/**
* @file 颜色选择器
* @author mengke01(kekee000@gmail.com)
*/
define(function(require) {
var lang = require('common/lang');
var defaultOptions = {
customBG: '#222',
margin: '5px -2px 0',
doRender: 'div div',
cssAddon: // could also be in a css file instead
'.cp-color-picker{border:1px solid #999; padding:10px 10px 0;' +
'background:#eee; overflow:visible; border-radius:3px;}' +
'.cp-color-picker:after{content:""; display:block; ' +
'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
'border-color: transparent transparent #eee}' +
// simulate border...
'.cp-color-picker:before{content:""; display:block; ' +
'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
'border-color: transparent transparent #999}' +
'.cp-xy-slider:active {cursor:none;}' +
'.cp-xy-slider{border:1px solid #999; margin-bottom:10px;}' +
'.cp-xy-cursor{width:12px; height:12px; margin:-6px}' +
'.cp-z-slider{margin-left:10px; border:1px solid #999;}' +
'.cp-z-cursor{border-width:5px; margin-top:-5px;}' +
'.cp-color-picker .cp-alpha{margin:10px 0 0; height:6px; border-radius:6px;' +
'overflow:visible; border:1px solid #999; box-sizing:border-box;' +
'background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);}' +
'.cp-color-picker .cp-alpha{margin:10px 0}' +
'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
'width:14px; height:14px; margin:-5px -7px; border:1px solid #666!important;' +
'box-shadow:inset -2px -4px 3px #ccc}',
renderCallback: function (e, toggle) {
if (false === toggle) {
this.$trigger.trigger('change');
}
}
};
var exports = {
show: function(element, options) {
var picker = $(element).colorPicker($.extend({}, defaultOptions, options));
return picker;
}
};
return exports;
});

86
src/fonteditor/dialog/glyf-download.js Normal file
View File

@@ -0,0 +1,86 @@
/**
* @file 下载单个字形
* @author mengke01(kekee000@gmail.com)
*/
define(
function (require) {
var i18n = require('../i18n/i18n');
var glyf2svgfile = require('../widget/util/glyf2svgfile');
var svg2base64 = require('fonteditor-core/ttf/svg2base64');
var bytes2base64 = require('fonteditor-core/ttf/util/bytes2base64');
var colorpicker = require('./colorpicker');
var pixelRatio = require('common/getPixelRatio');
function getSvg(setting) {
var opt = {
fillColor: $('#glyf-download-color').val().trim(),
size: +$('#glyf-download-size').val(),
unitsPerEm: setting.ttf.head.unitsPerEm
};
return glyf2svgfile(setting.glyf, opt);
}
function previewGlyf() {
// 由于生成的svg文档带xml头部，这里简单的去掉
var svgText = getSvg(this.setting);
var size = +$('#glyf-download-size').val();
var canvas = document.createElement('canvas');
canvas.width = canvas.height = size;
var img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(svgText);
img.width = img.height = size;
img.onload = function (e) {
canvas.getContext('2d').drawImage(
img,
0, 0, size, size,
0, 0, pixelRatio * size, pixelRatio * size
);
};
var previewer = $('#glyf-download-preview');
previewer.children().remove();
previewer.append(canvas);
}
return require('./setting').derive({
title: '导出字形',
nofooter: true,
getTpl: function () {
return require('../template/dialog/glyf-download.tpl');
},
set: function (setting) {
var onChange = $.proxy(previewGlyf, this);
$('#glyf-download-color').on('change', onChange);
$('#glyf-download-size').on('change', onChange);
colorpicker.show('#glyf-download-color');
$('#glyf-download-svg').on('mousedown', $.proxy(function (e) {
var svgText = getSvg(this.setting);
var target = $(e.target);
target.attr('download', (this.setting.glyf.name || 'svg')+ '.svg');
target.attr('href', svg2base64(svgText));
}, this));
$('#glyf-download-png').on('mousedown', $.proxy(function (e) {
var canvas = $('#glyf-download-preview canvas').get(0);
var imgData = canvas.toDataURL();
var target = $(e.target);
target.attr('download', (this.setting.glyf.name || 'png')+ '.png');
target.attr('href', imgData);
}, this));
$('#glyf-download-name').html(setting.glyf.name);
this.setting = setting;
previewGlyf.call(this);
},
onDispose: function () {
$('#glyf-download-color').off('change');
$('#glyf-download-size').off('change');
$('#glyf-download-svg').off('mousedown');
$('#glyf-download-png').off('mousedown');
this.setting = null;
}
});
}
);

3
src/fonteditor/dialog/support.js
View File

@@ -18,7 +18,8 @@ define(
'find-glyf': require('../dialog/setting-find-glyf'),
'ie': require('../dialog/setting-ie'),
'import-pic': require('../dialog/setting-import-pic'),
'sync': require('../dialog/setting-sync')
'sync': require('../dialog/setting-sync'),
'glyf-download': require('../dialog/glyf-download')
};
}
);

1
src/fonteditor/i18n/en-us/editor.js
View File

@@ -15,6 +15,7 @@ define(
scale: 'Scale By Percent',
findglyf: 'Find Glyph',
downloadglyf: 'Download Glyf',
setunicode: 'Set Unicode',
del: 'Delete',
edit: 'Edit',

1
src/fonteditor/i18n/zh-cn/editor.js
View File

@@ -15,6 +15,7 @@ define(
scale: '按比例缩放',
findglyf: '查找字形',
downloadglyf: '导出字形',
setunicode: '设置代码点',
del: '删除',
edit: '编辑',

7
src/fonteditor/menu/viewer.js
View File

@@ -54,6 +54,13 @@ define(
name: 'find-glyf',
title: i18n.lang.findglyf
},
{
name: 'download-glyf',
title: i18n.lang.downloadglyf
},
{
type: 'split'
},
{
name: 'setting-unicode',
title: i18n.lang.setunicode

27
src/fonteditor/template/dialog/glyf-download.tpl Normal file
View File

@@ -0,0 +1,27 @@
<div class="glyf-download-dialog">
<div class="form-inline">
<span class="form-title">图标名称: <em id="glyf-download-name"></em></span>
<div class="form-group field-margin">
<div class="input-group input-group-sm">
<span class="input-group-addon">颜色</span>
<input id="glyf-download-color" type="text" value="#666" class="form-control">
</div>
</div>
<div class="form-group field-margin">
<div class="input-group input-group-sm">
<span class="input-group-addon">大小</span>
<input id="glyf-download-size" type="number" value="128" min="10" max="10000" step="1" class="form-control"><span class="input-group-addon">px</span>
</div>
</div>
</div>
<div id="glyf-download-preview" class="preview-panel">
</div>
<div class="form-inline glyf-download-btn">
<div class="input-group input-group-sm">
<a id="glyf-download-svg" class="btn btn-flat btn-new">下载SVG</a>
<a id="glyf-download-png" class="btn btn-flat field-margin">下载PNG</a>
</div>
</div>
</div>

4
src/fonteditor/widget/glyfviewer/binder.js
View File

@@ -266,10 +266,10 @@ define(
selected.length === 1
? 'enableCommands'
: 'disableCommands'
](['setting-font']);
](['setting-font', 'download-glyf']);
}
else {
commandMenu.disableCommands(['copy', 'cut', 'del', 'setting-font']);
commandMenu.disableCommands(['copy', 'cut', 'del', 'setting-font', 'download-glyf']);
}
}, 100));

58
src/fonteditor/widget/util/glyf2svgfile.js Normal file
View File

@@ -0,0 +1,58 @@
/**
* @file glyf列表渲染器
* @author mengke01(kekee000@gmail.com)
*/
define(function (require) {
var computeBoundingBox = require('fonteditor-core/graphics/computeBoundingBox');
var contours2svg = require('fonteditor-core/ttf/util/contours2svg');
var pathAdjust = require('fonteditor-core/graphics/pathAdjust');
var pathCeil = require('fonteditor-core/graphics/pathCeil');
var string = require('common/string');
var lang = require('common/lang');
var SVG_GLYF_TPL = ''
+ '<?xml version="1.0" encoding="utf-8"?>'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"'
+ ' "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'
+ '<svg id="${name}" width="${size}" height="${size}"'
+ ' style="width:${size}px;height:${size}px;" version="1.1"'
+ ' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${unitsPerEm} ${unitsPerEm}"'
+ ' enable-background="new 0 0 ${unitsPerEm} ${unitsPerEm}" xml:space="preserve">'
+ '<path fill="${fillColor}" ${d}/>'
+ '</svg>';
/**
* 获取glyf渲染列表项目
*
* @param {Object} glyf glyf结构
* @param {Object} opt 渲染参数
* @return {string} glyf列表项目片段
*/
function glyf2svgfile(glyf, opt) {
var g = {
size: opt.size,
unitsPerEm: opt.unitsPerEm,
name: glyf.name,
fillColor: opt.fillColor || '#000'
};
var d = '';
if (glyf.contours && glyf.contours.length) {
var contours = lang.clone(glyf.contours);
var bound = computeBoundingBox.computePath.apply(null, contours);
var scale = opt.unitsPerEm / Math.max(bound.width, bound.height);
contours.forEach(function (contour) {
pathAdjust(contour, 1, 1, -bound.x, -bound.y - bound.height / 2);
pathAdjust(contour, 1, -1, 0, 0);
pathAdjust(contour, scale, scale, 0, bound.height / 2);
pathCeil(contour, 2);
});
g.d = 'd="' + contours2svg(contours) + '"';
}
return string.format(SVG_GLYF_TPL, g);
}
return glyf2svgfile;
});