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

修复曲线合并问题

Browse Source
This commit is contained in:
mkwiser
2014-10-28 23:29:56 +08:00
parent 6a494ca380
commit 67b79aeec4
8 changed files with 76 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/js/bezierSegmentCross.js
View File

@@ -22,7 +22,7 @@ define(
var width = canvas.offsetWidth;
var height = canvas.offsetHeight;
var points = [{"x":384,"y":507,"onCurve":true},{"x":384,"y":400},{"x":421,"y":393,"onCurve":true},{"x":459,"y":486},{"x":359,"y":486}] ;
var points = [{"x":592,"y":427,"onCurve":true},{"x":552,"y":390},{"x":496,"y":390,"onCurve":true},{"x":528,"y":393.29541,"onCurve":true},{"x":5280,"y":393.29541,"onCurve":true}] ;
$(points).each(function(index, item) {
$('[data-index="'+index+'"]').css({

2
demo/js/contours-1.js
View File

@@ -1,6 +1,6 @@
define(
function(require) {
return {"xMin":37,"yMin":78,"xMax":439,"yMax":390,"unicode":[57357],"advanceWidth":633,"leftSideBearing":37,"name":"uniE00D","contours":[[{"x":74,"y":289,"onCurve":true},{"x":98,"y":277},{"x":128,"y":277,"onCurve":true},{"x":160,"y":277},{"x":186,"y":292,"onCurve":true},{"x":225,"y":254},{"x":281,"y":254,"onCurve":true},{"x":337,"y":254},{"x":377,"y":292,"onCurve":true},{"x":416,"y":329},{"x":416,"y":383,"onCurve":true},{"x":416,"y":387},{"x":416,"y":390,"onCurve":true},{"x":428,"y":390,"onCurve":true},{"x":428,"y":78,"onCurve":true},{"x":74,"y":78,"onCurve":true}],[{"x":439,"y":210,"onCurve":true},{"x":437,"y":259},{"x":400,"y":295,"onCurve":true},{"x":360,"y":332},{"x":304,"y":332,"onCurve":true},{"x":250,"y":332},{"x":212,"y":298,"onCurve":true},{"x":185,"y":314},{"x":151,"y":314,"onCurve":true},{"x":103,"y":314},{"x":37,"y":251},{"x":37,"y":160},{"x":70,"y":129,"onCurve":true},{"x":83,"y":117},{"x":97,"y":109,"onCurve":true},{"x":97,"y":210,"onCurve":true}]]}
return {"xMin":-18,"yMin":109,"xMax":439,"yMax":483,"unicode":[57357],"advanceWidth":633,"leftSideBearing":-18,"name":"uniE00D","contours":[[{"x":-18,"y":382,"onCurve":true},{"x":6,"y":370},{"x":36,"y":370,"onCurve":true},{"x":68,"y":370},{"x":94,"y":385,"onCurve":true},{"x":133,"y":347},{"x":189,"y":347,"onCurve":true},{"x":245,"y":347},{"x":285,"y":385,"onCurve":true},{"x":324,"y":422},{"x":324,"y":476,"onCurve":true},{"x":324,"y":480},{"x":324,"y":483,"onCurve":true},{"x":336,"y":483,"onCurve":true},{"x":336,"y":171,"onCurve":true},{"x":-18,"y":171,"onCurve":true}],[{"x":439,"y":210,"onCurve":true},{"x":437,"y":259},{"x":400,"y":295,"onCurve":true},{"x":360,"y":332},{"x":304,"y":332,"onCurve":true},{"x":250,"y":332},{"x":212,"y":298,"onCurve":true},{"x":185,"y":314},{"x":151,"y":314,"onCurve":true},{"x":103,"y":314},{"x":37,"y":251},{"x":37,"y":160},{"x":70,"y":129,"onCurve":true},{"x":83,"y":117},{"x":97,"y":109,"onCurve":true},{"x":97,"y":210,"onCurve":true}]]}
}
);

4
demo/js/contours-3.js
View File

@@ -1,6 +1,6 @@
define(
function(require) {
return {"xMin":58,"yMin":142,"xMax":504,"yMax":446,"unicode":[57357],"advanceWidth":633,"leftSideBearing":58,"name":"uniE00D","contours":[[{"x":404.20977,"y":306,"onCurve":true},{"x":587,"y":306,"onCurve":true},{"x":587,"y":580,"onCurve":true},{"x":314,"y":580,"onCurve":true},{"x":314,"y":353.71808,"onCurve":true},{"x":323.41730917023847,"y":355},{"x":334,"y":355,"onCurve":true},{"x":364,"y":355},{"x":386,"y":344,"onCurve":true},{"x":407,"y":333},{"x":407,"y":317,"onCurve":true},{"x":407,"y":311.1678292421482}],[{"x":659,"y":337},{"x":683,"y":328,"onCurve":true},{"x":707,"y":319},{"x":707,"y":306,"onCurve":true},{"x":707,"y":294},{"x":683,"y":285,"onCurve":true},{"x":659,"y":276},{"x":625,"y":276,"onCurve":true},{"x":591,"y":276},{"x":568,"y":285,"onCurve":true},{"x":545,"y":294},{"x":545,"y":306,"onCurve":true},{"x":545,"y":319},{"x":568,"y":328,"onCurve":true},{"x":591,"y":337},{"x":625,"y":337,"onCurve":true}]]};
}
return {"xMin":41,"yMin":53,"xMax":748,"yMax":563,"unicode":[57357],"advanceWidth":633,"leftSideBearing":41,"name":"uniE00D","contours":[[{"x":241,"y":276,"onCurve":true},{"x":744,"y":563},{"x":150,"y":102,"onCurve":true}],[{"x":237,"y":325,"onCurve":true},{"x":748,"y":53},{"x":41,"y":309,"onCurve":true}]]}
}
);

2
demo/js/contours-5.js
View File

@@ -1,6 +1,6 @@
define(
function(require) {
return {"xMin":114,"yMin":-6,"xMax":486,"yMax":430,"unicode":[57357],"advanceWidth":633,"leftSideBearing":114,"name":"uniE00D","contours":[[{"x":226,"y":255},{"x":272,"y":301},{"x":272,"y":367},{"x":226,"y":413},{"x":160,"y":413},{"x":114,"y":367},{"x":114,"y":301},{"x":160,"y":255}],[{"x":431,"y":242},{"x":486,"y":297},{"x":486,"y":375},{"x":431,"y":430},{"x":353,"y":430},{"x":298,"y":375},{"x":298,"y":297},{"x":353,"y":242}],[{"x":326,"y":-6},{"x":380,"y":48},{"x":380,"y":124},{"x":326,"y":178},{"x":249,"y":178},{"x":196,"y":124},{"x":196,"y":48},{"x":249,"y":-6}],[{"x":178,"y":340,"onCurve":true},{"x":423,"y":340,"onCurve":true},{"x":423,"y":113,"onCurve":true},{"x":178,"y":113,"onCurve":true}]]}
return {"xMin":66,"yMin":22,"xMax":500,"yMax":430,"unicode":[57357],"advanceWidth":633,"leftSideBearing":66,"name":"uniE00D","contours":[[{"x":226,"y":255},{"x":272,"y":301},{"x":272,"y":367},{"x":226,"y":413},{"x":160,"y":413},{"x":114,"y":367},{"x":114,"y":301},{"x":160,"y":255}],[{"x":431,"y":242},{"x":486,"y":297},{"x":486,"y":375},{"x":431,"y":430},{"x":353,"y":430},{"x":298,"y":375},{"x":298,"y":297},{"x":353,"y":242}],[{"x":196,"y":22},{"x":250,"y":76},{"x":250,"y":152},{"x":196,"y":206},{"x":119,"y":206},{"x":66,"y":152},{"x":66,"y":76},{"x":119,"y":22}],[{"x":178,"y":340,"onCurve":true},{"x":423,"y":340,"onCurve":true},{"x":423,"y":113,"onCurve":true},{"x":178,"y":113,"onCurve":true}],[{"x":446,"y":28},{"x":500,"y":82},{"x":500,"y":158},{"x":446,"y":212},{"x":369,"y":212},{"x":316,"y":158},{"x":316,"y":82},{"x":369,"y":28}]]}
}
);

2
demo/js/contours-7.js
View File

@@ -1,6 +1,6 @@
define(
function(require) {
return {"xMin":63,"yMin":176,"xMax":214,"yMax":407,"unicode":[57357],"advanceWidth":633,"leftSideBearing":63,"name":"uniE00D","contours":[[{"x":198,"y":176},{"x":206,"y":210,"onCurve":true},{"x":214,"y":243},{"x":201,"y":290,"onCurve":true},{"x":187,"y":337},{"x":159,"y":371,"onCurve":true},{"x":131,"y":404},{"x":105,"y":404,"onCurve":true},{"x":79,"y":404},{"x":71,"y":371,"onCurve":true},{"x":63,"y":337},{"x":77,"y":290,"onCurve":true},{"x":90,"y":243},{"x":118,"y":210,"onCurve":true},{"x":146,"y":176},{"x":172,"y":176,"onCurve":true}],[{"x":128,"y":178},{"x":153,"y":212,"onCurve":true},{"x":178,"y":245},{"x":194,"y":293,"onCurve":true},{"x":209,"y":340},{"x":206,"y":374,"onCurve":true},{"x":203,"y":407},{"x":183,"y":407,"onCurve":true},{"x":162,"y":407},{"x":137,"y":374,"onCurve":true},{"x":112,"y":340},{"x":97,"y":293,"onCurve":true},{"x":81,"y":245},{"x":84,"y":212,"onCurve":true},{"x":87,"y":178},{"x":108,"y":178,"onCurve":true}]]};
return {"xMin":-21,"yMin":176,"xMax":355,"yMax":407,"unicode":[57357],"advanceWidth":633,"leftSideBearing":-21,"name":"uniE00D","contours":[[{"x":198,"y":176},{"x":206,"y":210,"onCurve":true},{"x":214,"y":243},{"x":201,"y":290,"onCurve":true},{"x":187,"y":337},{"x":159,"y":371,"onCurve":true},{"x":131,"y":404},{"x":105,"y":404,"onCurve":true},{"x":79,"y":404},{"x":71,"y":371,"onCurve":true},{"x":63,"y":337},{"x":77,"y":290,"onCurve":true},{"x":90,"y":243},{"x":118,"y":210,"onCurve":true},{"x":146,"y":176},{"x":172,"y":176,"onCurve":true}],[{"x":128,"y":178},{"x":153,"y":212,"onCurve":true},{"x":178,"y":245},{"x":194,"y":293,"onCurve":true},{"x":209,"y":340},{"x":206,"y":374,"onCurve":true},{"x":203,"y":407},{"x":183,"y":407,"onCurve":true},{"x":162,"y":407},{"x":137,"y":374,"onCurve":true},{"x":112,"y":340},{"x":97,"y":293,"onCurve":true},{"x":81,"y":245},{"x":84,"y":212,"onCurve":true},{"x":87,"y":178},{"x":108,"y":178,"onCurve":true}],[{"x":245,"y":265},{"x":355,"y":286},{"x":355,"y":315},{"x":245,"y":336},{"x":88,"y":336},{"x":-21,"y":315},{"x":-21,"y":286},{"x":88,"y":265}]]}
}
);

49
demo/js/contoursCombine.js
View File

@@ -11,7 +11,7 @@ define(
var lang = require('common/lang');
var editor = require('editor/main');
var shape_baidu = require('./contours-1');
var shape_baidu = require('./contours-3');
var isPathCross = require('graphics/isPathCross');
var pathJoin = require('graphics/pathJoin');
var util = require('graphics/util');
@@ -25,54 +25,15 @@ define(
*/
init: function () {
var clonedShape = lang.clone(shape_baidu);
//clonedShape.contours[1].reverse();
window.editor = currentEditor = editor.create($('#render-view').get(0));
currentEditor.setFont(clonedShape);
// var jointLayer = currentEditor.fontLayer;
// var paths = currentEditor.fontLayer.shapes.map(function(shape) {
// return shape.points;
// });
// // var result = isPathCross(path0, path1);
// // if (result && result.length) {
// // result.forEach(function(p, index){
// // jointLayer.addShape({
// // type: 'point',
// // x: p.x,
// // y: p.y,
// // style: {
// // fill: true,
// // fillColor: 'red'
// // }
// // });
// // });
// // jointLayer.refresh();
// // }
// var newPaths = pathJoin(paths, 4);
// newPaths.forEach(function(p, index) {
// jointLayer.addShape('path', {
// points: lang.clone(p),
// style: {
// lineWidth: 2,
// fill:true,
// fillColor: index % 2 ? 'red' : 'blue'
// }
// });
// });
// jointLayer.refresh();
var jointLayer = currentEditor.fontLayer;
var paths = currentEditor.fontLayer.shapes.map(function(shape) {
return shape.points;
});
}
};

59
src/graphics/pathJoin.js
View File

@@ -39,7 +39,7 @@ define(
// 直线
if (cur.onCurve && next.onCurve) {
return Math.pow(p0.x - cur.x, 2) + Math.pow(p0.y - cur.y, 2)
- Math.pow(p1.x - cur.x, 2) + Math.pow(p1.y - cur.y, 2);
- (Math.pow(p1.x - cur.x, 2) + Math.pow(p1.y - cur.y, 2));
}
else if (!cur.onCurve){
var prev = p0.index == 0 ? path[length - 1] : path[p0.index - 1];
@@ -266,7 +266,8 @@ define(
}
if (loops >= 100) {
throw '没有找到可组合的轮廓!';
console.warn('no combination path');
return [];
}
if (newPaths.length) {
@@ -297,32 +298,58 @@ define(
var newPath0 = util.interpolate(path0);
var newPath1 = util.interpolate(path1);
var joint = isPathCross(newPath0, newPath1);
var splitedPaths0;
var splitedPaths1;
// 获取另一个路径和分割路径的交点情况
var getPathCross = function (path, splitedPath) {
var inPath = isInsidePath(
path,
splitedPath[1].onCurve
? splitedPath[1]
: getBezierQ2Point(splitedPath[0], splitedPath[1], splitedPath[2], 0.5)
);
return inPath;
};
// 获取组合后的路径
var getJoinPaths = function(joint) {
var splitedPaths0 = splitPath(newPath0, joint.map(function(p) {
splitedPaths0 = splitPath(newPath0, joint.map(function(p) {
p.index = p.index0;
return p;
}));
// 求路径是否在另一个路径内
var inPath = false;
var partInPath = false;
var inPathBefore = -1;
// 求path0的分割曲线
splitedPaths0 = splitedPaths0.map(function(splitedPath) {
splitedPath.cross = isInsidePath(
path1,
splitedPath[1].onCurve
? splitedPath[1]
: getBezierQ2Point(splitedPath[0], splitedPath[1], splitedPath[2], 0.5)
);
splitedPath.cross = getPathCross(path1, splitedPath);
// 这里需要判断整个曲线有相交区域，但是部分曲线只有交点没有相交轮廓的情况
if (inPathBefore == splitedPath.cross) {
partInPath = true;
}
if (splitedPath.cross) {
inPath = true;
}
inPathBefore = splitedPath.cross;
return splitedPath;
});
// 部分只有交点没有轮廓
if (partInPath) {
console.warn('part cross');
}
// 只有相交的点，没有相交的轮廓
if (!inPath) {
if (!inPath || partInPath) {
if (relation == pathJoin.JOIN || relation == pathJoin.TANGENCY) {
return [path0, path1];
}
@@ -331,18 +358,14 @@ define(
}
}
var splitedPaths1 = splitPath(newPath1, joint.map(function(p) {
// 求path1的分割曲线
splitedPaths1 = splitPath(newPath1, joint.map(function(p) {
p.index = p.index1;
return p;
}));
var splitedPath = splitedPaths1[0];
inPath = isInsidePath(
path0,
splitedPath[1].onCurve
? splitedPath[1]
: getBezierQ2Point(splitedPath[0], splitedPath[1], splitedPath[2], 0.5)
);
// 这里只需要判断第一个就可以知道曲线相交情况了
inPath = getPathCross(path0, splitedPaths1[0]);
splitedPaths1 = splitedPaths1.map(function(path) {
path.cross = inPath;
inPath = !inPath;

27
src/graphics/util.js
View File

@@ -18,8 +18,24 @@ define(
* @return {Object} 点
*/
function ceilPoint(p) {
p.x = Math.round(p.x * 100000) / 100000;
p.y = Math.round(p.y * 100000) / 100000;
var t = p.x;
// 处理形如 4.99999 = 5, 5.00001 = 5的情况
if (Math.abs(Math.round(t) - t) < 0.00002) {
p.x = Math.round(t);
}
else {
p.x = Math.round(p.x * 100000) / 100000;
}
t = p.y;
if (Math.abs(Math.round(t) - t) < 0.00005) {
p.y = Math.round(t);
}
else {
p.y = Math.round(p.y * 100000) / 100000;
}
return p;
}
@@ -31,7 +47,12 @@ define(
* @return {number} 点
*/
function ceil(x) {
return Math.round(x * 100000) / 100000;
if (Math.abs(Math.round(x) - x) < 0.00002) {
return Math.round(x);
}
else {
return Math.round(x * 100000) / 100000;
}
}
/**