From 67bf403890e524e930b4029c182456c5921a0679 Mon Sep 17 00:00:00 2001 From: kekee000 Date: Fri, 3 Apr 2015 15:48:26 +0800 Subject: [PATCH] add panose setting1 --- css/common/bootstrap.less | 4 + css/common/dialog.less | 28 +++ css/main.less | 1 + src/fonteditor/dialog/setting-metrics.js | 60 +++---- src/fonteditor/main.js | 8 + .../template/dialog/setting-metrics.tpl | 41 ++--- .../template/dialog/setting-metrics.tpl.js | 2 +- src/ttf/enum/panose.js | 162 ++++++++++++++++++ 8 files changed, 255 insertions(+), 51 deletions(-) create mode 100644 css/common/dialog.less create mode 100644 src/ttf/enum/panose.js diff --git a/css/common/bootstrap.less b/css/common/bootstrap.less index 4fa2995..f413af8 100644 --- a/css/common/bootstrap.less +++ b/css/common/bootstrap.less @@ -4,6 +4,10 @@ .modal-dialog { margin-top: 100px; + + hr { + margin-top: 0; + } } .modal-header { diff --git a/css/common/dialog.less b/css/common/dialog.less new file mode 100644 index 0000000..cd81679 --- /dev/null +++ b/css/common/dialog.less @@ -0,0 +1,28 @@ + + +.setting-metrics { + + .modal-dialog { + width: 800px; + } + + .form-inline .form-group { + width: 22%; + } + + .panose-inline { + margin-bottom: -40px; + .input-group { + width: 100%; + } + .input-group-addon { + text-align: left; + } + .form-group { + width: 29%; + } + } + +} + + diff --git a/css/main.less b/css/main.less index c761c12..2b62734 100644 --- a/css/main.less +++ b/css/main.less @@ -4,4 +4,5 @@ @import './common/project.less'; @import './common/glyf-list.less'; @import './common/editor.less'; +@import './common/dialog.less'; @import './common/import-pic.less'; diff --git a/src/fonteditor/dialog/setting-metrics.js b/src/fonteditor/dialog/setting-metrics.js index 00bde88..9bc1a09 100644 --- a/src/fonteditor/dialog/setting-metrics.js +++ b/src/fonteditor/dialog/setting-metrics.js @@ -10,44 +10,50 @@ define( function (require) { var tpl = require('../template/dialog/setting-metrics.tpl'); + var string = require('common/string'); var program = require('../widget/program'); var weightClass = require('ttf/enum/weightClass'); var widthClass = require('ttf/enum/widthClass'); - var panose = [ - 'bFamilyType', 'bSerifStyle', 'bWeight', 'bProportion', 'bContrast', - 'bStrokeVariation', 'bArmStyle', 'bLetterform', 'bMidline', 'bXHeight' - ]; + var panose = require('ttf/enum/panose'); return require('./setting').derive({ title: '字体度量', + style: 'setting-metrics', + getTpl: function () { - return tpl; + // width and weight + var optionsHolder = {}; + + optionsHolder.weightOptions = Object.keys(weightClass).map(function (key) { + return ''; + }).join(''); + + optionsHolder.widthOptions = Object.keys(widthClass).map(function (key) { + return ''; + }).join(''); + + optionsHolder.panoseOptions = Object.keys(panose).map(function (key, index) { + return '' + + '
' + + '
' + + '' + (index + 1) + '-' + key + '' + + '' + + '
' + + '
'; + }).join(''); + + return string.format(tpl, optionsHolder); }, set: function (setting) { - // width and weight - var html = ''; - - Object.keys(weightClass).forEach(function (key) { - html += ''; - }); - - $('#setting-weight').html(html); - - html = ''; - Object.keys(widthClass).forEach(function (key) { - html += ''; - }); - $('#setting-width').html(html); - - setting.panose = panose.map(function (name) { - return setting[name]; - }).join('-'); - this.setFields(setting); var me = this; @@ -63,12 +69,6 @@ define( }, validate: function () { var setting = this.getFields(); - var length = panose.length; - (setting.panose || '').split('-').forEach(function (val, i) { - if (i < length) { - setting[panose[i]] = (+val || 0) & 0xF; - } - }); return setting; } diff --git a/src/fonteditor/main.js b/src/fonteditor/main.js index 2666ce6..ea4098d 100644 --- a/src/fonteditor/main.js +++ b/src/fonteditor/main.js @@ -142,6 +142,14 @@ define( program.editor.setSetting(setting.editor); } + // var SettingMetrics = require('./dialog/setting-metrics'); + // !new SettingMetrics({ + // onChange: function (setting) { + // program.ttfManager.setMetrics(setting); + // } + // }).show($.extend({})); + + } }; diff --git a/src/fonteditor/template/dialog/setting-metrics.tpl b/src/fonteditor/template/dialog/setting-metrics.tpl index 5366baf..53676ae 100644 --- a/src/fonteditor/template/dialog/setting-metrics.tpl +++ b/src/fonteditor/template/dialog/setting-metrics.tpl @@ -18,6 +18,8 @@ + +
@@ -53,6 +55,9 @@
+ + +
@@ -66,9 +71,6 @@
-
-
-
删除线位置 @@ -81,8 +83,6 @@
-
-
下划线位置 @@ -97,6 +97,8 @@
+ +
@@ -110,8 +112,6 @@
-
-
下标X偏移 @@ -125,6 +125,8 @@
+ +
@@ -138,8 +140,6 @@
-
-
上标X偏移 @@ -154,6 +154,7 @@
+
@@ -164,17 +165,17 @@
粗细 - + +
+
+
+
+ 宽度 + +
-
-
- 宽度 - -
-
-
-
-panose - + + +
${panoseOptions}
diff --git a/src/fonteditor/template/dialog/setting-metrics.tpl.js b/src/fonteditor/template/dialog/setting-metrics.tpl.js index 6e3e95b..12c5e4f 100644 --- a/src/fonteditor/template/dialog/setting-metrics.tpl.js +++ b/src/fonteditor/template/dialog/setting-metrics.tpl.js @@ -1 +1 @@ -define(function () {return '
\r\n
\r\n
\r\n 上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n 行间距\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n win上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n win下降\r\n \r\n
\r\n
\r\n 计算\r\n
\r\n
\r\n
\r\n
\r\n typo上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo间距\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n x高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 大写H高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 删除线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 下划线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 下标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 下标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标Y偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 上标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 上标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标Y偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n 供应商ID\r\n \r\n
\r\n
\r\n
\r\n
\r\n 粗细\r\n \r\n
\r\n
\r\n
\r\n
\r\n 宽度\r\n \r\n
\r\n
\r\n
\r\n
\r\npanose\r\n\r\n
\r\n';}); \ No newline at end of file +define(function () {return '
\r\n
\r\n
\r\n 上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n 行间距\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n win上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n win下降\r\n \r\n
\r\n
\r\n 计算\r\n
\r\n
\r\n
\r\n
\r\n typo上升\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo下降\r\n \r\n
\r\n
\r\n
\r\n
\r\n typo间距\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n x高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 大写H高度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 删除线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线位置\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下划线厚度\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n 下标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 下标Y偏移\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
\r\n
\r\n
\r\n 上标水平\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标垂直\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标X偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n 上标Y偏移\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n 供应商ID\r\n \r\n
\r\n
\r\n
\r\n
\r\n 粗细\r\n \r\n
\r\n
\r\n
\r\n
\r\n 宽度\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n
${panoseOptions}
\r\n
\r\n';}); \ No newline at end of file diff --git a/src/ttf/enum/panose.js b/src/ttf/enum/panose.js new file mode 100644 index 0000000..b3108d8 --- /dev/null +++ b/src/ttf/enum/panose.js @@ -0,0 +1,162 @@ +/** + * @file 字体外观分类器 + * @author mengke01(kekee000@gmail.com) + * + * @see: + * https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6OS2.html + */ + + +define( + function (require) { + + var panose = { + + bFamilyType: [ + 'Any', + 'No Fit', + 'Text and Display', + 'Script', + 'Decorative', + 'Pictorial', + ], + + bSerifStyle: [ + 'Any', + 'No Fit', + 'Cove', + 'Obtuse Cove', + 'Square Cove', + 'Obtuse Square Cove', + 'Square', + 'Thin', + 'Bone', + 'Exaggerated', + 'Triangle', + 'Normal Sans', + 'Obtuse Sans', + 'Perp Sans', + 'Flared', + 'Rounded' + ], + + bWeight: [ + 'Any', + 'No Fit', + 'Very Light', + 'Light', + 'Thin', + 'Book', + 'Medium', + 'Demi', + 'Bold', + 'Heavy', + 'Black', + 'Nord' + ], + + bProportion: [ + 'Any', + 'No Fit', + 'Old Style', + 'Modern', + 'Even Width', + 'Expanded', + 'Condensed', + 'Very Expanded', + 'Very Condensed', + 'Monospaced' + ], + + bContrast: [ + 'Any', + 'No Fit', + 'None', + 'Very Low', + 'Low', + 'Medium Low', + 'Medium', + 'Medium High', + 'High', + 'Very High' + ], + + bStrokeVariation: [ + 'Any', + 'No Fit', + 'Gradual/Diagonal', + 'Gradual/Transitional', + 'Gradual/Vertical', + 'Gradual/Horizontal', + 'Rapid/Vertical', + 'Rapid/Horizontal', + 'Instant/Vertical' + ], + + bArmStyle: [ + 'Any', + 'No Fit', + 'Straight Arms/Horizontal', + 'Straight Arms/Wedge', + 'Straight Arms/Vertical', + 'Straight Arms/Single Serif', + 'Straight Arms/Double Serif', + 'Non-Straight Arms/Horizontal', + 'Non-Straight Arms/Wedge', + 'Non-Straight Arms/Vertical', + 'Non-Straight Arms/Single Serif', + 'Non-Straight Arms/Double Serif' + ], + + + bLetterform: [ + 'Any', + 'No Fit', + 'Normal/Contact', + 'Normal/Weighted', + 'Normal/Boxed', + 'Normal/Flattened', + 'Normal/Rounded', + 'Normal/Off Center', + 'Normal/Square', + 'Oblique/Contact', + 'Oblique/Weighted', + 'Oblique/Boxed', + 'Oblique/Flattened', + 'Oblique/Rounded', + 'Oblique/Off Center', + 'Oblique/Square' + ], + + bMidline: [ + 'Any', + 'No Fit', + 'Standard/Trimmed', + 'Standard/Pointed', + 'Standard/Serifed', + 'High/Trimmed', + 'High/Pointed', + 'High/Serifed', + 'Constant/Trimmed', + 'Constant/Pointed', + 'Constant/Serifed', + 'Low/Trimmed', + 'Low/Pointed', + 'Low/Serifed' + ], + + bXHeight: [ + 'Any', + 'No Fit', + 'Constant/Small', + 'Constant/Standard', + 'Constant/Large', + 'Ducking/Small', + 'Ducking/Standard', + 'Ducking/Large' + ] + }; + + return panose; + } +);