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

add panose setting1

Browse Source
This commit is contained in:
kekee000
2015-04-03 15:48:26 +08:00
parent df482569f2
commit 67bf403890
8 changed files with 255 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/common/bootstrap.less vendored
View File

@@ -4,6 +4,10 @@
.modal-dialog {
margin-top: 100px;
hr {
margin-top: 0;
}
}
.modal-header {

28
css/common/dialog.less Normal file
View File

@@ -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%;
}
}
}

1
css/main.less
View File

@@ -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';

60
src/fonteditor/dialog/setting-metrics.js
View File

@@ -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 '<option value="' + key + '">' + weightClass[key] + '</option>';
}).join('');
optionsHolder.widthOptions = Object.keys(widthClass).map(function (key) {
return '<option value="' + key + '">' + widthClass[key] + '</option>';
}).join('');
optionsHolder.panoseOptions = Object.keys(panose).map(function (key, index) {
return ''
+ '<div class="form-group">'
+ '<div class="input-group input-group-sm">'
+ '<span class="input-group-addon">' + (index + 1) + '-' + key + '</span>'
+ '<select data-field="' + key + '" data-type="number" class="form-control">'
+ panose[key].map(function (value, i) {
return '<option value="' + i + '">'+ value +'</option>';
}).join('')
+ '</select>'
+ '</div>'
+ '</div>';
}).join('');
return string.format(tpl, optionsHolder);
},
set: function (setting) {
// width and weight
var html = '';
Object.keys(weightClass).forEach(function (key) {
html += '<option value="' + key + '">' + weightClass[key] + '</option>';
});
$('#setting-weight').html(html);
html = '';
Object.keys(widthClass).forEach(function (key) {
html += '<option value="' + key + '">' + widthClass[key] + '</option>';
});
$('#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;
}

8
src/fonteditor/main.js
View File

@@ -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({}));
}
};

41
src/fonteditor/template/dialog/setting-metrics.tpl
View File

@@ -18,6 +18,8 @@
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
@@ -53,6 +55,9 @@
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
@@ -66,9 +71,6 @@
<input data-field="sCapHeight" type="number" class="form-control">
</div>
</div>
</div>
<hr>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">删除线位置</span>
@@ -81,8 +83,6 @@
<input data-field="yStrikeoutSize" type="number" class="form-control">
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">下划线位置</span>
@@ -97,6 +97,8 @@
</div>
</div>
<hr>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
@@ -110,8 +112,6 @@
<input data-field="ySubscriptYSize" type="number" class="form-control">
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">下标X偏移</span>
@@ -125,6 +125,8 @@
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
@@ -138,8 +140,6 @@
<input data-field="ySuperscriptYSize" type="number" class="form-control">
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">上标X偏移</span>
@@ -154,6 +154,7 @@
</div>
</div>
<hr>
<div class="form-inline">
<div class="form-group">
<div class="input-group input-group-sm">
@@ -164,17 +165,17 @@
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">粗细</span>
<select id="setting-weight" data-field="usWeightClass" data-type="number" class="form-control"></select>
<select id="setting-weight" data-field="usWeightClass" data-type="number" class="form-control">${weightOptions}</select>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">宽度</span>
<select id="setting-width" data-field="usWidthClass" data-type="number" class="form-control">${widthOptions}</select>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group input-group-sm">
<span class="input-group-addon">宽度</span>
<select id="setting-width" data-field="usWidthClass" data-type="number" class="form-control"></select>
</div>
</div>
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">panose</span>
<input data-field="panose" type="text" class="form-control">
<label for="panose-bFamilyType">panose</label>
<div class="form-inline panose-inline">${panoseOptions}</div>
</div>

2
src/fonteditor/template/dialog/setting-metrics.tpl.js
View File

File diff suppressed because one or more lines are too long

162
src/ttf/enum/panose.js Normal file
View File

@@ -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;
}
);