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

add quadratic bezier test

Browse Source
This commit is contained in:
mkwiser
2014-08-30 13:37:05 +08:00
parent 8cf8606112
commit de1e835fe8
8 changed files with 354 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo/js/glyf.js
View File

@@ -26,6 +26,7 @@ define(
// 查看ttf glyf
function showTTFGlyf(ttfData) {
console.log(ttfData);
ttf = new TTF(ttfData);
var chars = ttf.chars();

105
demo/js/quadraticBezier.js Normal file
View File

@@ -0,0 +1,105 @@
/**
* @file quadraticBezier.js
* @author mengke01
* @date
* @description
* 二次贝塞尔演示
*/
define(
function(require) {
var computeBoundingBox = require('editor/editor/common/computeBoundingBox');
var entry = {
/**
* 初始化
*/
init: function() {
var ctx = document.getElementById('canvas').getContext('2d');
var width = ctx.offsetWidth;
var height = ctx.offsetHeight;
var points = [];
[0, 1, 2].forEach(function(i) {
var p = {
x: Math.floor(Math.random() * 400 + 50),
y: Math.floor(Math.random() * 400 + 50)
}
points[i] = p;
$($('.point').get(i)).css({
left: p.x,
top: p.y
});
});
var point;
$('.point').on('mousedown', function(e) {
point = $(this);
});
$(document.body).on('mousemove', onMove);
$(document.body).on('mouseup', function(e) {
onMove.call(this, e);
point = null;
});
function onMove(e) {
var px = e.pageX;
var py = e.pageY;
if(point) {
point.css({
left: px,
top: py
});
var p = points[+point.attr('data-index')];
p.x = px;
p.y = py;
draw();
}
}
function draw() {
ctx.clearRect(0, 0, 500, 500);
//绘制2次贝塞尔曲线
ctx.beginPath();
ctx.strokeStyle='black';
ctx.moveTo(points[0].x, points[0].y);
ctx.quadraticCurveTo(points[1].x, points[1].y, points[2].x, points[2].y);
ctx.lineWidth = 1;
ctx.stroke();
var min = {};
var max = {};
computeBoundingBox.quadraticBezier(
[points[0].x, points[0].y],
[points[1].x, points[1].y],
[points[2].x, points[2].y],
min,
max
);
min[0] = Math.floor(min[0]);
min[1] = Math.floor(min[1]);
max[0] = Math.floor(max[0]);
max[0] = Math.floor(max[0]);
ctx.beginPath();
ctx.strokeStyle='green';
ctx.moveTo(min[0], min[1]);
ctx.lineTo(min[0], max[1]);
ctx.lineTo(max[0], max[1]);
ctx.lineTo(max[0], min[1]);
ctx.lineTo(min[0], min[1]);
ctx.stroke();
}
draw();
}
};
entry.init();
return entry;
}
);

61
demo/js/ttfparse.js Normal file
View File

@@ -0,0 +1,61 @@
/**
* @file ttfparse.js
* @author mengke01
* @date
* @description
* ttf解析函数入口
*/
define(
function(require) {
var ttfreader = require('editor/ttf/ttfreader');
var TTF = require('editor/ttf/ttf');
var ajaxBinaryFile = require('editor/common/ajaxBinaryFile');
function onUpFileChange(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var ttf = new ttfreader().read(e.target.result);
}
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) {
var ttfData = new ttfreader().read(binaryData);
console.log(ttfData);
var ttf = new TTF(ttfData);
},
onError: function() {
console.error('error read file');
}
});
}
};
entry.init();
return entry;
}
);

52
demo/quadraticBezier.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二次贝塞尔曲线绘制</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>
<style>
body {
margin: 0;
padding: 0;
}
.point {
position: absolute;
width: 9px;
height: 9px;
margin-left: -5px;
margin-top: -5px;
background: #CCC;
border: 1px solid red;
}
#start-point {
border-color: green;
}
#end-point {
border-color: black;
}
</style>
</head>
<body>
<div id="start-point" class="point" data-index="0"></div>
<div id="end-point" class="point" data-index="1"></div>
<div id="control-point" class="point" data-index="2"></div>
<canvas id="canvas" width="500" height="500">
</canvas>
<script>
require.config({
baseUrl: './js',
paths: {
editor: '../../src',
}
});
define('jquery', $);
</script>
<script>require(['quadraticBezier'])</script>
</body>
</html>

27
demo/ttfparse.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font编辑器</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>
</head>
<body>
<script>
require.config({
baseUrl: './js',
paths: {
editor: '../../src',
}
});
define('jquery', $);
</script>
<input id="upload-file" type="file">
<script>
require(['ttfparse']);
</script>
</body>
</html>

7
index.html
View File

@@ -13,12 +13,5 @@
});
define('jquery', $);
</script>
<input id="upload-file" type="file">
<script>
require(['main']);
</script>
</body>
</html>

105
src/editor/common/computeBoundingBox.js Normal file
View File

@@ -0,0 +1,105 @@
/**
* @file computeBoundingBox.js
* @author mengke01
* @date
* @description
* 计算曲线包围盒
*
* modify from:
* zrender
* https://github.com/ecomfe/zrender/blob/master/src/tool/computeBoundingBox.js
*/
define(
function(require) {
/**
* 计算包围盒
*/
function computeBoundingBox(points, min, max) {
if (points.length === 0) {
return;
}
var left = points[0][0];
var right = points[0][0];
var top = points[0][1];
var bottom = points[0][1];
for (var i = 1; i < points.length; i++) {
var p = points[i];
if (p[0] < left) {
left = p[0];
}
if (p[0] > right) {
right = p[0];
}
if (p[1] < top) {
top = p[1];
}
if (p[1] > bottom) {
bottom = p[1];
}
}
min[0] = left;
min[1] = top;
max[0] = right;
max[1] = bottom;
}
/**
* 计算二阶贝塞尔曲线的包围盒
* http://pissang.net/blog/?p=91
*/
function computeQuadraticBezierBoundingBox(p0, p1, p2, min, max) {
// Find extremities, where derivative in x dim or y dim is zero
var tmp = (p0[0] + p2[0] - 2 * p1[0]);
// p1 is center of p0 and p2 in x dim
var t1;
if (tmp === 0) {
t1 = 0.5;
} else {
t1 = (p0[0] - p1[0]) / tmp;
}
tmp = (p0[1] + p2[1] - 2 * p1[1]);
// p1 is center of p0 and p2 in y dim
var t2;
if (tmp === 0) {
t2 = 0.5;
} else {
t2 = (p0[1] - p1[1]) / tmp;
}
t1 = Math.max(Math.min(t1, 1), 0);
t2 = Math.max(Math.min(t2, 1), 0);
var ct1 = 1-t1;
var ct2 = 1-t2;
var x1 = ct1 * ct1 * p0[0]
+ 2 * ct1 * t1 * p1[0]
+ t1 * t1 * p2[0];
var y1 = ct1 * ct1 * p0[1]
+ 2 * ct1 * t1 * p1[1]
+ t1 * t1 * p2[1];
var x2 = ct2 * ct2 * p0[0]
+ 2 * ct2 * t2 * p1[0]
+ t2 * t2 * p2[0];
var y2 = ct2 * ct2 * p0[1]
+ 2 * ct2 * t2 * p1[1]
+ t2 * t2 * p2[1];
return computeBoundingBox(
[p0.slice(), p2.slice(), [x1, y1], [x2, y2]],
min, max
);
}
return {
quadraticBezier: computeQuadraticBezierBoundingBox
};
}
);

41
src/main.js
View File

@@ -9,54 +9,19 @@
define(
function(require) {
var ttfreader = require('ttf/ttfreader');
var TTF = require('ttf/ttf');
var ajaxBinaryFile = require('common/ajaxBinaryFile');
function onUpFileChange(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var ttf = new ttfreader().read(e.target.result);
}
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) {
var ttfData = new ttfreader().read(binaryData);
console.log(ttfData);
var ttf = new TTF(ttfData);
console.log(ttf.chars());
},
onError: function() {
console.error('error read file');
}
});
init: function () {
}
};
entry.init();
return entry;
}
);
);