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
Show Stats 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;
}
);

13
src/common/lang.js
View File

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

15
src/editor/Editor.js
View File

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

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

@ -17,33 +17,85 @@ define(
*
* @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',
x: origin.x,
y: origin.y,
unitsPerEm: this.options.unitsPerEm,
metrics: this.options.metrics,
x: originX,
y: origionY,
unitsPerEm: options.unitsPerEm,
selectable: false
}));
// 右支撑
this.rightSideBearing = this.axisLayer.addShape('line', {
id: 'rightSideBearing',
p0: {
x: origin.rightSideBearing
x: options.unitsPerEm / 2
},
style: {
strokeColor: 'blue'
}
});
this.render.getLayer('graduation').addShape('graduation', {
// 刻度线
this.graduation = this.graduationLayer.addShape('graduation', {
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
* @date
* @description
@ -10,7 +10,6 @@
define(
function(require) {
var initAxis = require('./initAxis');
var lang = require('common/lang');
var pathAdjust = require('graphics/pathAdjust');
var guid = require('render/util/guid');
@ -23,55 +22,43 @@ define(
function setFont(font) {
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;
var height = this.render.painter.height;
var options = this.options;
// 不需要在此保存contours
delete font.contours;
font.rightSideBearing = font.advanceWidth - font.xMax;
this.font = font;
// 坐标原点位置，基线原点
var offsetX = (width - options.unitsPerEm) / 2;
var offsetY = (height + (options.unitsPerEm + options.metrics.decent)) / 2;
// 重置历史
this.history.reset();
this.history.add(lang.clone(contours));
// 构造形状集合
var shapes = contours.map(function(path) {
// 设置字形
var shapes = contours.map(function(contour) {
var shape = {};
path = pathAdjust(path, 1, -1);
shape.points = pathAdjust(path, 1, 1, offsetX, offsetY);
pathAdjust(contour, scale, -scale);
shape.points = pathAdjust(contour, 1, 1, originX, originY);
return shape;
});
font.rightSideBearing = offsetX + font.advanceWidth;
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');
var fontLayer = this.fontLayer;
fontLayer.clearShapes();
shapes.forEach(function(shape) {
fontLayer.addShape('path', shape);
});
fontLayer.refresh();
this.render.refresh();
// 重置历史
this.history.reset();
this.history.add(this.getShapes());
// 设置参考线
this.rightSideBearing.p0.x = originX + font.advanceWidth * scale;
this.axisLayer.refresh();
this.setMode();
return this;
}
/**
* 设置编辑中的shapes
*
@ -124,10 +111,10 @@ define(
return shapes;
}
return {
setFont: setFont,
setShapes: setShapes,
getShapes: getShapes
return function() {
this.setFont = setFont;
this.setShapes = setShapes;
this.getShapes = getShapes;
};
}
);

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

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

19
src/editor/options.js
View File

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

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

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

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

@ -20,7 +20,7 @@ define(
*/
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 yMax = Math.round(ctx.canvas.height + gap);
var x = Math.round(config.x);