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

增加 setAxis选项

Browse Source
This commit is contained in:
mkwiser
2014-10-18 12:20:50 +08:00
parent 24f3fa3bfb
commit c458d8116e
11 changed files with 250 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
demo/css/editortest.less Normal file
View File

@@ -0,0 +1,22 @@
@import './editor';
.pan-left {
float: left;
width: 180px;
background: #ECECEC;
}
#glyf-list {
a {
display: block;
line-height: 24px;
}
}
#render-view {
margin-left: 200px;
width: auto;
}

39
demo/editortest.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试editor</title>
<script src="../dep/esl.js"></script>
<script src="../dep/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/editortest.css">
<style id="font-face"></style>
</head>
<body>
<script>
require.config({
baseUrl: '../src',
paths: {
demo: '../demo/js',
}
});
define('jquery', $);
</script>
<div class="pan-left">
<select id="editor-unitsperem">
<option value="512">512</option>
<option value="1024">1024</option>
<option value="2048">2048</option>
</select>
<div id="glyf-list" class="glyf-list"></div>
</div>
<div id="render-view" class="render-view" oncontextMenu="return false"></div>
<script>
require(['demo/editortest']);
</script>
</body>
</html>

58
demo/js/editortest.js Normal file
View File

@@ -0,0 +1,58 @@
/**
* @file editortest.js
* @author mengke01
* @date
* @description
* 测试编辑器
*/
define(
function(require) {
var lang = require('common/lang');
var editor = require('editor/main');
var ttfObject = null;
var currentEditor = null;
var entry = {
/**
* 初始化
*/
init: function () {
$.getJSON('./js/baiduHealth.json', function(ttf) {
ttfObject = ttf;
var str = '';
ttf.glyf.slice(0, 10).forEach(function(glyf, index) {
str +='<a href="#" data-index="'+index+'">'+ glyf.name +'</a>';
});
$('#glyf-list').html(str);
});
currentEditor = editor.create($('#render-view').get(0));
$('#glyf-list').delegate('[data-index]', 'click', function(e) {
e.preventDefault();
var index = +$(this).attr('data-index');
currentEditor.setFont(lang.clone(ttfObject.glyf[index]));
});
$('#editor-unitsperem').on('change', function(){
var unitsPerEm = +$(this).val();
currentEditor.setAxis({
unitsPerEm: unitsPerEm
});
})
}
};
entry.init();
return entry;
}
);

11
src/common/lang.js
View File

@@ -126,8 +126,19 @@ define(
fields = fields || Object.keys(thatObj); fields = fields || Object.keys(thatObj);
fields.forEach(function(field) { fields.forEach(function(field) {
if (thisObj.hasOwnProperty(field)) { if (thisObj.hasOwnProperty(field)) {
// 拷贝对象
if (
thisObj[field] && typeof(thisObj[field]) === 'object'
&& thatObj[field] && typeof(thatObj[field]) === 'object'
) {
overwrite(thisObj[field], thatObj[field]);
}
else {
thisObj[field] = thatObj[field]; thisObj[field] = thatObj[field];
} }
}
}); });
} }

15
src/editor/Editor.js
View File

@@ -19,6 +19,8 @@ define(
var initLayer = require('./controller/initLayer'); var initLayer = require('./controller/initLayer');
var initRender = require('./controller/initRender'); var initRender = require('./controller/initRender');
var initBinder = require('./controller/initBinder'); var initBinder = require('./controller/initBinder');
var initAxis = require('./controller/initAxis');
var initFont = require('./controller/initFont');
/** /**
* Render控制器 * Render控制器
@@ -37,9 +39,17 @@ define(
*/ */
Editor.prototype.setRender = function(render) { Editor.prototype.setRender = function(render) {
this.render = render; this.render = render;
initFont.call(this);
initRender.call(this); initRender.call(this);
initLayer.call(this); initLayer.call(this);
initAxis.call(this);
initBinder.call(this); initBinder.call(this);
this.axisLayer.refresh();
this.graduationLayer.refresh();
this.setMode();
return this; return this;
}; };
@@ -167,14 +177,13 @@ define(
this.contextMenu.dispose(); this.contextMenu.dispose();
this.render && this.render.dispose(); this.render && this.render.dispose();
this.options = this.contextMenu = this.render = null; this.options = this.contextMenu = this.render = null;
this.fontLayer = this.coverLayer = this.axisLayer = null; this.fontLayer = this.coverLayer = this.axisLayer = this.graduationLayer = null;
this.axis = this.rightSideBearing = this.font = null; this.axis = this.rightSideBearing = this.graduation = this.font = null;
this.mode = null; this.mode = null;
this.history.reset(); this.history.reset();
this.history = null; this.history = null;
}; };
lang.extend(Editor.prototype, require('./controller/font'));
require('common/observable').mixin(Editor.prototype); require('common/observable').mixin(Editor.prototype);
return Editor; return Editor;

70
src/editor/controller/initAxis.js
View File

@@ -17,33 +17,85 @@ define(
* *
* @param {Object} origin 字体原点 * @param {Object} origin 字体原点
*/ */
function initAxis(origin) { function initAxis() {
var width = this.render.painter.width;
var height = this.render.painter.height;
var options = this.options;
// 坐标原点位置，基线原点
var originX = (width - options.unitsPerEm) / 2;
var origionY = (height + (options.unitsPerEm + options.axis.metrics.decent)) / 2;
// 绘制轴线 // 绘制轴线
this.axis = this.axisLayer.addShape('axis', lang.extend(this.options.axis, { this.axis = this.axisLayer.addShape('axis', lang.extend(lang.clone(options.axis), {
id: 'axis', id: 'axis',
x: origin.x, x: originX,
y: origin.y, y: origionY,
unitsPerEm: this.options.unitsPerEm, unitsPerEm: options.unitsPerEm,
metrics: this.options.metrics,
selectable: false selectable: false
})); }));
// 右支撑
this.rightSideBearing = this.axisLayer.addShape('line', { this.rightSideBearing = this.axisLayer.addShape('line', {
id: 'rightSideBearing', id: 'rightSideBearing',
p0: { p0: {
x: origin.rightSideBearing x: options.unitsPerEm / 2
}, },
style: { style: {
strokeColor: 'blue' strokeColor: 'blue'
} }
}); });
this.render.getLayer('graduation').addShape('graduation', { // 刻度线
this.graduation = this.graduationLayer.addShape('graduation', {
config: this.axis config: this.axis
}); });
} }
return initAxis;
/**
* 设置坐标信息
*
* @param {Object} options 坐标选项
* @param {boolean} reset 是否重置坐标系
* @return {this}
*/
function setAxis(options, reset) {
var oldUnitsPerEm = this.options.unitsPerEm;
this.options.unitsPerEm = options.unitsPerEm;
lang.overwrite(this.options, options);
// 设置gap
this.options.axis.graduation.gap = options.graduation && options.graduation.gap
? options.graduation.gap : this.options.unitsPerEm / 512 * 100;
// 设置当前的axis
var axisOpt = lang.clone(this.options.axis);
var scale = this.render.camera.scale;
var metrics = axisOpt.metrics;
Object.keys(metrics).forEach(function(m) {
axisOpt.metrics[m] = metrics[m] * scale;
});
axisOpt.unitsPerEm = axisOpt.unitsPerEm * scale;
axisOpt.gap = axisOpt.graduation.gap * scale;
lang.extend(this.axis, axisOpt);
// 缩放到合适位置
var size = this.render.getSize();
this.render.scale(oldUnitsPerEm / this.options.unitsPerEm, {
x: size.width / 2,
y: size.height / 2
});
}
return function() {
initAxis.call(this);
this.setAxis = setAxis;
};;
} }
); );

63
src/editor/controller/font.js → src/editor/controller/initFont.js
View File

@@ -1,5 +1,5 @@
/** /**
* @file font.js * @file initFont.js
* @author mengke01 * @author mengke01
* @date * @date
* @description * @description
@@ -10,7 +10,6 @@
define( define(
function(require) { function(require) {
var initAxis = require('./initAxis');
var lang = require('common/lang'); var lang = require('common/lang');
var pathAdjust = require('graphics/pathAdjust'); var pathAdjust = require('graphics/pathAdjust');
var guid = require('render/util/guid'); var guid = require('render/util/guid');
@@ -23,55 +22,43 @@ define(
function setFont(font) { function setFont(font) {
var contours = font.contours; var contours = font.contours;
var originX = this.axis.x;
var originY = this.axis.y;
var scale = this.render.camera.scale;
var width = this.render.painter.width; // 不需要在此保存contours
var height = this.render.painter.height; delete font.contours;
var options = this.options; font.rightSideBearing = font.advanceWidth - font.xMax;
this.font = font;
// 坐标原点位置，基线原点 // 重置历史
var offsetX = (width - options.unitsPerEm) / 2; this.history.reset();
var offsetY = (height + (options.unitsPerEm + options.metrics.decent)) / 2; this.history.add(lang.clone(contours));
// 构造形状集合 // 设置字形
var shapes = contours.map(function(path) { var shapes = contours.map(function(contour) {
var shape = {}; var shape = {};
path = pathAdjust(path, 1, -1); pathAdjust(contour, scale, -scale);
shape.points = pathAdjust(path, 1, 1, offsetX, offsetY); shape.points = pathAdjust(contour, 1, 1, originX, originY);
return shape; return shape;
}); });
font.rightSideBearing = offsetX + font.advanceWidth; var fontLayer = this.fontLayer;
fontLayer.clearShapes();
this.font = font;
// 重置形状
this.render.reset();
initAxis.call(this, {
x: offsetX,
y: offsetY,
rightSideBearing: font.rightSideBearing,
axisGap: this.options.axisGap || 100
});
var fontLayer = this.render.painter.getLayer('font');
shapes.forEach(function(shape) { shapes.forEach(function(shape) {
fontLayer.addShape('path', shape); fontLayer.addShape('path', shape);
}); });
fontLayer.refresh();
this.render.refresh(); // 设置参考线
this.rightSideBearing.p0.x = originX + font.advanceWidth * scale;
// 重置历史 this.axisLayer.refresh();
this.history.reset();
this.history.add(this.getShapes());
this.setMode(); this.setMode();
return this; return this;
} }
/** /**
* 设置编辑中的shapes * 设置编辑中的shapes
* *
@@ -124,10 +111,10 @@ define(
return shapes; return shapes;
} }
return { return function() {
setFont: setFont, this.setFont = setFont;
setShapes: setShapes, this.setShapes = setShapes;
getShapes: getShapes this.getShapes = getShapes;
}; };
} }
); );

2
src/editor/controller/initLayer.js
View File

@@ -36,7 +36,7 @@ define(
fill: false fill: false
}); });
this.render.addLayer('graduation', { this.graduationLayer = this.render.addLayer('graduation', {
level: 40, level: 40,
fill: false, fill: false,
disabled: true disabled: true

19
src/editor/options.js
View File

@@ -15,14 +15,6 @@ define(
unitsPerEm: 512, // 框大小 unitsPerEm: 512, // 框大小
// 字体测量规格
metrics: {
ascent: 480, // 上升
decent: -33, // 下降
'x-Height': 256, // x高度
'CapHeight': 358 // 大写字母高度
},
// 辅助线 // 辅助线
referenceline: { referenceline: {
style: { style: {
@@ -45,10 +37,19 @@ define(
// 轴线 // 轴线
axis: { axis: {
gap: 100,
gapColor: '#A6A6FF', gapColor: '#A6A6FF',
gridColor: 'red', gridColor: 'red',
emColor: 'red', emColor: 'red',
// 字体测量规格
metrics: {
ascent: 480, // 上升
decent: -33, // 下降
'x-Height': 256, // x高度
'CapHeight': 358 // 大写字母高度
},
// 刻度 // 刻度
graduation: { graduation: {
gap: 100, gap: 100,

7
src/render/shape/Axis.js
View File

@@ -25,8 +25,13 @@ define(
var center = camera.center; var center = camera.center;
var ratio = camera.ratio; var ratio = camera.ratio;
if (undefined === shape.gap) {
shape.gap = shape.graduation.gap || 100;
}
shape.gap *= ratio; shape.gap *= ratio;
shape.unitsPerEm *= ratio; shape.unitsPerEm *= ratio;
var metrics = shape.metrics; var metrics = shape.metrics;
for (var line in metrics) { for (var line in metrics) {
metrics[line] *= ratio; metrics[line] *= ratio;
@@ -74,7 +79,7 @@ define(
draw: function(ctx, shape) { draw: function(ctx, shape) {
if (undefined === shape.gap) { if (undefined === shape.gap) {
shape.gap = 100; shape.gap = shape.graduation.gap || 100;
} }
ctx.save(); ctx.save();

2
src/render/util/drawAxis.js
View File

@@ -20,7 +20,7 @@ define(
*/ */
function drawAxis(ctx, config) { function drawAxis(ctx, config) {
var gap = Math.round(config.gap || 100); var gap = Math.round(config.gap);
var xMax = Math.round(ctx.canvas.width + gap); var xMax = Math.round(ctx.canvas.width + gap);
var yMax = Math.round(ctx.canvas.height + gap); var yMax = Math.round(ctx.canvas.height + gap);
var x = Math.round(config.x); var x = Math.round(config.x);