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

增加glyf查看器

Browse Source
This commit is contained in:
mkwiser
2014-08-29 00:13:10 +08:00
parent 2c81e350fb
commit 9973d33c63
13 changed files with 548 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
demo/css/glyf.css Normal file
View File

@@ -0,0 +1,65 @@
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: #03C;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hide {
display: none;
}
body {
font-size: 13px;
}
.upload-file {
margin: 20px;
}
.i-font {
font-family: 'truetype';
display: inline-block;
margin-right: 6px;
color: green;
}
.font-list {
height: 200px;
overflow: auto;
}
.font-list li {
width: 70px;
float: left;
padding: 10px;
border: 1px solid #EEE;
list-style: none;
cursor: pointer;
}
.font-list li:hover {
background: #E0E0E0;
}
.font-list li.selected {
background: #ECECEC;
}
.svg-view {
width: 500px;
height: 500px;
background: #F0F0F0;
}
.glyf {
width: 100%;
}
.glyf .path {
fill: green;
stroke: none;
stroke-width: 10px;
}
.boundary {
fill: none;
stroke-width: 1px;
stroke: black;
}

60
demo/css/glyf.less Normal file
View File

@@ -0,0 +1,60 @@
@import './reset';
body {
font-size: 13px;
}
.upload-file {
margin: 20px;
}
.i-font {
font-family: 'truetype';
display: inline-block;
margin-right: 6px;
color: green;
}
.font-list {
height: 200px;
overflow: auto;
li {
width: 70px;
float: left;
padding: 10px;
border: 1px solid #EEE;
list-style: none;
cursor: pointer;
}
li:hover {
background: #E0E0E0;
}
li.selected {
background: #ECECEC;
}
}
.svg-view {
width: 500px;
height: 500px;
background: #F0F0F0;
}
.glyf {
width: 100%;
.path {
fill: green;
stroke: none;
stroke-width: 10px;
}
}
.boundary {
fill: none;
stroke-width: 1px;
stroke: black;
}

18
demo/css/reset.less Normal file
View File

@@ -0,0 +1,18 @@
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: #03C;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hide {
display: none;
}

35
demo/glyf.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>glyf查看</title>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-8-2/esl.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/glyf.css">
<style id="font-face"></style>
</head>
<body>
<script>
require.config({
baseUrl: './js',
paths: {
editor: '../../src',
}
});
define('jquery', $);
</script>
<form>
<input id="upload-file" type="file" class="upload-file">
</form>
<ul id="font-list" class="font-list"></ul>
<div id="svg-view" class="svg-view"></div>
<script>
require(['glyf']);
</script>
</body>
</html>

127
demo/js/glyf.js Normal file
View File

@@ -0,0 +1,127 @@
/**
* @file glyf.js
* @author mengke01
* @date
* @description
* glyf 查看
*/
define(
function(require) {
var ttfreader = require('editor/ttf/ttfreader');
var TTF = require('editor/ttf/ttf');
var ttf2base64 = require('editor/ttf/ttf2base64');
var ajaxBinaryFile = require('editor/common/ajaxBinaryFile');
var glyf2svg = require('editor/ttf/glyf2svg');
var setFontface = require('./setFontface');
var ttf = null;
// 设置字体
function setFont(arrayBuffer) {
var base64 = ttf2base64(arrayBuffer);
setFontface('truetype', base64, 'font-face');
}
// 查看ttf glyf
function showTTFGlyf(ttfData) {
ttf = new TTF(ttfData);
var chars = ttf.chars();
var str = '';
// 获取unicode字符
chars.forEach(function(item) {
str += '<li data-code="'+ item +'">'
+ '<span class="i-font">'+ String.fromCharCode(item) +'</span>'
+ (item > 255 ? '\\u' + Number(item).toString(16) : item)
+'</li>';
});
$('#font-list').html(str);
$('#font-list li:nth-child(4)').click();
}
function showGlyf(charcode) {
var tpl = ''
+ '<svg class="glyf" viewBox="0 0 1200 2000">'
+ ' <g transform="translate(1000, 0) scale(-1, 1) rotate(180, 500, 500)">'
+ '<polyline class="boundary" points="" />'
+ '<path class="path" d="M 0,0" />'
+ '</g>'
+ '</svg>';
var svg = $(tpl);
var glyf = ttf.getCharGlyf(charcode);
var path = glyf2svg(glyf);
if (path) {
var scale = 1000 / ttf.ttf.head.unitsPerEm;
var boundary = ''
+ glyf.xMin + ',' + glyf.yMin + ' '
+ glyf.xMin + ',' + glyf.yMax + ' '
+ glyf.xMax + ',' + glyf.yMax + ' '
+ glyf.xMax + ',' + glyf.yMin + ' '
+ glyf.xMin + ',' + glyf.yMin + ' ';
svg.find(".boundary").attr('points', boundary).attr('transform', 'scale(' + scale + ',' + scale + ')');
svg.find(".path").attr('d', path).attr('transform', 'scale(' + scale + ',' + scale + ')');
}
$('#svg-view').html(svg);
}
function onUpFileChange(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var binaryData = e.target.result;
setFont(binaryData);
var ttfData = new ttfreader().read(binaryData);
showTTFGlyf(ttfData);
}
reader.onerror = function(e) {
console.error(e);
};
reader.readAsArrayBuffer(file);
}
var entry = {
/**
* 初始化
*/
init: function() {
var upFile = document.getElementById('upload-file');
upFile.addEventListener('change', onUpFileChange);
ajaxBinaryFile({
url: '../font/baiduHealth.ttf',
onSuccess: function(binaryData) {
setFont(binaryData);
var ttfData = new ttfreader().read(binaryData);
showTTFGlyf(ttfData);
},
onError: function() {
console.error('error read file');
}
});
$('#font-list').delegate('li', 'click', function(e) {
$('#font-list li').removeClass('selected');
$(this).addClass('selected');
showGlyf(+$(this).attr('data-code'));
});
}
};
entry.init();
return entry;
}
);

31
demo/js/setFontface.js Normal file
View File

@@ -0,0 +1,31 @@
/**
* @file setFontface.js
* @author mengke01
* @date
* @description
* 设置fontface
*/
define(
function(require) {
/**
* 设置fontface的ttf字体
* @param {name} name 字体名
* @param {string} ttfBase64 base64字体
* @param {string} styleId domId
*/
function setFontface(name, ttfBase64, styleId) {
var str = ''
+ '@font-face {'
+ 'font-family:\'' + name + '\';'
+ 'src:url(data:font/ttf;charset=utf-8;base64,'
+ ttfBase64
+ ') format(\'truetype\');'
+ '}';
document.getElementById(styleId).innerHTML = str;
}
return setFontface;
}
);