From 8c4b472e9038e78e6409bb362fb03c0cbfbecf07 Mon Sep 17 00:00:00 2001 From: kekee000 Date: Wed, 14 Jan 2015 01:12:11 +0800 Subject: [PATCH] add combine svg to single glyf --- index.html | 1 + src/fonteditor/controller/actions.js | 9 + src/fonteditor/dialog/setting-editor.js | 4 +- src/fonteditor/dialog/setting-ie.js | 62 ++ src/fonteditor/dialog/support.js | 3 +- src/fonteditor/setting/ie.js | 28 + src/fonteditor/widget/loader.js | 9 +- src/fonteditor/widget/settingmanager.js | 5 +- src/ttf/svg2ttfobject.js | 45 +- test/tiger.svg | 791 ++++++++++++++++++++++++ 10 files changed, 944 insertions(+), 13 deletions(-) create mode 100644 src/fonteditor/dialog/setting-ie.js create mode 100644 src/fonteditor/setting/ie.js create mode 100644 test/tiger.svg diff --git a/index.html b/index.html index 1942cfd..f6ece2c 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,7 @@
  • 字体度量
  • 生成字形名称
  • 编辑器
    • +
  • 导入和导出
    • diff --git a/src/fonteditor/controller/actions.js b/src/fonteditor/controller/actions.js index 87f22d4..2cde584 100644 --- a/src/fonteditor/controller/actions.js +++ b/src/fonteditor/controller/actions.js @@ -240,6 +240,15 @@ define( }, 20); } }).show(program.setting.get('editor')); + }, + + 'setting-import-and-export': function () { + var SettingEditor = settingSupport.ie; + !new SettingEditor({ + onChange: function (setting) { + program.setting.set('ie', setting, setting.saveSetting); + } + }).show(program.setting.get('ie')); } }; diff --git a/src/fonteditor/dialog/setting-editor.js b/src/fonteditor/dialog/setting-editor.js index c7be29f..cd1acbf 100644 --- a/src/fonteditor/dialog/setting-editor.js +++ b/src/fonteditor/dialog/setting-editor.js @@ -114,7 +114,7 @@ define( + '
    ' + '保存设置' + '' - + '
    重置为默认设置' + + ' 重置为默认设置' + ''; return require('./setting').derive({ @@ -129,7 +129,7 @@ define( this.setting = lang.clone(setting); this.setFields(this.setting); var me = this; - $('#setting-editor-efault').on('click', function (e) { + $('#setting-editor-default').on('click', function (e) { e.preventDefault(); me.setting = program.setting.getDefault('editor'); me.setFields(me.setting); diff --git a/src/fonteditor/dialog/setting-ie.js b/src/fonteditor/dialog/setting-ie.js new file mode 100644 index 0000000..904c29c --- /dev/null +++ b/src/fonteditor/dialog/setting-ie.js @@ -0,0 +1,62 @@ +/** + * @file setting-ie.js + * @author mengke01 + * @date + * @description + * 导入和导出设置选项 + */ + + +define( + function (require) { + var lang = require('common/lang'); + var program = require('../widget/program'); + + var tpl = '' + + + '
    ' + + '
    ' + + '
    ' + + '导入svg文件时合并成单个字形' + + '' + + '' + + '' + + '
    ' + + '
    ' + + '
    ' + + + + '
    ' + + '
    ' + + '保存设置' + + '' + + '
    重置为默认设置' + + '
    '; + + return require('./setting').derive({ + + title: '导入和导出', + + getTpl: function () { + return tpl; + }, + + set: function (setting) { + this.setting = lang.clone(setting); + this.setFields(this.setting); + var me = this; + $('#setting-ie-default').on('click', function (e) { + e.preventDefault(); + me.setting = program.setting.getDefault('ie'); + me.setFields(me.setting); + }); + }, + + validate: function () { + var setting = this.getFields(this.setting); + return setting; + } + + }); + } +); diff --git a/src/fonteditor/dialog/support.js b/src/fonteditor/dialog/support.js index 4f9b226..f5fedbe 100644 --- a/src/fonteditor/dialog/support.js +++ b/src/fonteditor/dialog/support.js @@ -18,7 +18,8 @@ define( 'url': require('../dialog/font-url'), 'glyf': require('../dialog/setting-glyf'), 'editor': require('../dialog/setting-editor'), - 'find-glyf': require('../dialog/setting-find-glyf') + 'find-glyf': require('../dialog/setting-find-glyf'), + 'ie': require('../dialog/setting-ie') }; } ); diff --git a/src/fonteditor/setting/ie.js b/src/fonteditor/setting/ie.js new file mode 100644 index 0000000..8a21cf4 --- /dev/null +++ b/src/fonteditor/setting/ie.js @@ -0,0 +1,28 @@ +/** + * @file ie.js + * @author mengke01 + * @date + * @description + * 导入和导出设置 + */ + +define( + function (require) { + + var setting = { + + 'saveSetting': true, // 是否保存setting + + // 导入 + 'import': { + combinePath: false // 导入svg文件时合并`path`标签 + }, + + // 导出 + 'export': { + } + }; + + return setting; + } +); diff --git a/src/fonteditor/widget/loader.js b/src/fonteditor/widget/loader.js index b1fb070..848d3ad 100644 --- a/src/fonteditor/widget/loader.js +++ b/src/fonteditor/widget/loader.js @@ -16,11 +16,16 @@ define( var svg2ttfobject = require('ttf/svg2ttfobject'); var inflate = require('inflate'); var loading = require('./loading'); + var program = require('./program'); var woffOptions = { inflate: inflate.inflate }; + function svg2ttf(buffer) { + var ieOpt = program.setting.get('ie'); + return svg2ttfobject(buffer, ieOpt['import']); + } /** * 加载sfnt结构字体 @@ -117,7 +122,7 @@ define( fileReader.onload = function (e) { try { var buffer = e.target.result; - var imported = svg2ttfobject(buffer); + var imported = svg2ttf(buffer); fileReader = null; options.success && options.success(imported); } @@ -149,7 +154,7 @@ define( function loadSVG(file, options) { loading.show(); try { - var imported = svg2ttfobject(file); + var imported = svg2ttf(file); loading.hide(); options.success && options.success(imported); } diff --git a/src/fonteditor/widget/settingmanager.js b/src/fonteditor/widget/settingmanager.js index 801e51d..af3dc2b 100644 --- a/src/fonteditor/widget/settingmanager.js +++ b/src/fonteditor/widget/settingmanager.js @@ -13,6 +13,7 @@ define( var lang = require('common/lang'); var string = require('common/string'); var editorSetting = require('../setting/editor'); + var ieSetting = require('../setting/ie'); var storage = window.localStorage; var cachedSetting = {}; @@ -104,7 +105,9 @@ define( if (name === 'editor') { return lang.clone(editorSetting); } - + else if (name === 'ie') { + return lang.clone(ieSetting); + } return null; } }; diff --git a/src/ttf/svg2ttfobject.js b/src/ttf/svg2ttfobject.js index 184daa3..36e9319 100644 --- a/src/ttf/svg2ttfobject.js +++ b/src/ttf/svg2ttfobject.js @@ -293,13 +293,13 @@ define( var pathNodes = xmlDoc.getElementsByTagName('path'); if (pathNodes.length) { - for (var i = 0, length = pathNodes.length; i < length; i++) { + for (var i = 0, l = pathNodes.length; i < l; i++) { node = pathNodes[i]; glyf = { name: node.getAttribute('name') || '' }; contours = svgnode2contours([node]); - glyf.contours = mirrorContours(contours); + glyf.contours = contours; ttf.glyf.push(glyf); } } @@ -315,19 +315,20 @@ define( name: '' }; - glyf.contours = mirrorContours(contours); + glyf.contours = contours; ttf.glyf.push(glyf); } } - /** * 解析xml文档 * * @param {XMLDocument} xmlDoc XML文档对象 + * @param {Object} options 导入选项 + * * @return {Object} 解析后对象 */ - function parseXML(xmlDoc) { + function parseXML(xmlDoc, options) { var ttf = getEmptyObject(); @@ -349,6 +350,30 @@ define( error.raise(10201); } + if (ttf.from === 'svg') { + var glyf = ttf.glyf; + var i; + var l; + // 合并导入的字形为单个字形 + if (options.combinePath) { + var combined = []; + for (i = 0, l = glyf.length; i < l; i++) { + var contours = glyf[i].contours; + for (var index = 0, length = contours.length; index < length; index++) { + combined.push(contours[index]); + } + } + + glyf[0].contours = combined; + glyf.splice(1); + } + + // 对字形进行反转 + for (i = 0, l = glyf.length; i < l; i++) { + glyf[i].contours = mirrorContours(glyf[i].contours); + } + } + return ttf; } @@ -356,15 +381,21 @@ define( * svg格式转ttfObject格式 * * @param {string} svg svg格式 + * @param {Object=} options 导入选项 + * @param {boolean} options.combinePath 是否合并成单个字形，仅限于普通svg导入 * @return {Object} ttfObject */ - function svg2ttfObject(svg) { + function svg2ttfObject(svg, options) { + options = options || { + combinePath: false + }; var xmlDoc = svg; if (typeof svg === 'string') { xmlDoc = loadXML(svg); } - var ttf = parseXML(xmlDoc); + + var ttf = parseXML(xmlDoc, options); return resolve(ttf); } diff --git a/test/tiger.svg b/test/tiger.svg new file mode 100644 index 0000000..491413c --- /dev/null +++ b/test/tiger.svg @@ -0,0 +1,791 @@ + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +