modify path axis to zero
This commit is contained in:
@@ -23,4 +23,5 @@ html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,4 +8,5 @@ body, html {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
}
|
}
|
||||||
@@ -86,13 +86,7 @@ define(
|
|||||||
pathArray.forEach(function(path) {
|
pathArray.forEach(function(path) {
|
||||||
var shape = {};
|
var shape = {};
|
||||||
shape.points = path;
|
shape.points = path;
|
||||||
var bound = computeBoundingBox.computePath(path);
|
shape.points = pathAdjust(path, 1, 1, 100, 400);
|
||||||
shape.points = pathAdjust(path, 1, -bound.x, -bound.y);
|
|
||||||
shape.x = bound.x + 200;
|
|
||||||
shape.y = bound.y + 200;
|
|
||||||
|
|
||||||
shape.width = bound.width;
|
|
||||||
shape.height = bound.height;
|
|
||||||
|
|
||||||
pathPanel.addShape('path', shape);
|
pathPanel.addShape('path', shape);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -50,6 +50,14 @@ define(
|
|||||||
me.mode.down && me.mode.down.call(me, e);
|
me.mode.down && me.mode.down.call(me, e);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
render.capture.on('dragstart', function(e) {
|
||||||
|
render.camera.x = e.x;
|
||||||
|
render.camera.y = e.y;
|
||||||
|
render.camera.event = e;
|
||||||
|
|
||||||
|
me.mode.dragstart && me.mode.dragstart.call(me, e);
|
||||||
|
});
|
||||||
|
|
||||||
render.capture.on('drag', function(e) {
|
render.capture.on('drag', function(e) {
|
||||||
render.camera.mx = e.x - render.camera.x;
|
render.camera.mx = e.x - render.camera.x;
|
||||||
render.camera.my = e.y - render.camera.y;
|
render.camera.my = e.y - render.camera.y;
|
||||||
@@ -159,27 +167,19 @@ define(
|
|||||||
|
|
||||||
var width = this.render.painter.width;
|
var width = this.render.painter.width;
|
||||||
var height = this.render.painter.height;
|
var height = this.render.painter.height;
|
||||||
|
var options = this.options;
|
||||||
|
|
||||||
// 基线位置
|
// 坐标原点位置,基线原点
|
||||||
var offsetX = (width - (font.xMax - font.xMin)) / 2;
|
var offsetX = (width - options.unitsPerEm) / 2;
|
||||||
var offsetY = (height - (font.yMax - font.yMin)) / 2;
|
var offsetY = (height + (options.unitsPerEm + options.metrics.WinDecent)) / 2;
|
||||||
|
|
||||||
var WinDecent = this.options.metrics.WinDecent;
|
|
||||||
|
|
||||||
// 构造形状集合
|
// 构造形状集合
|
||||||
var shapes = paths.map(function(path) {
|
var shapes = paths.map(function(path) {
|
||||||
var shape = {};
|
var shape = {};
|
||||||
var bound = computeBoundingBox.computePath(path);
|
var bound = computeBoundingBox.computePath(path);
|
||||||
|
|
||||||
shape.points = pathAdjust(path, 1, -bound.x, -bound.y);
|
path = pathAdjust(path, 1, -1);
|
||||||
|
shape.points = pathAdjust(path, 1, 1, offsetX, offsetY);
|
||||||
shape.x = bound.x + offsetX;
|
|
||||||
|
|
||||||
// 加上 ymin
|
|
||||||
shape.y = bound.y + offsetY - font.yMin * 2;
|
|
||||||
|
|
||||||
shape.width = bound.width;
|
|
||||||
shape.height = bound.height;
|
|
||||||
|
|
||||||
return shape;
|
return shape;
|
||||||
});
|
});
|
||||||
@@ -192,7 +192,7 @@ define(
|
|||||||
// 设置坐标原点
|
// 设置坐标原点
|
||||||
var camera = this.render.camera;
|
var camera = this.render.camera;
|
||||||
camera.center.x = offsetX;
|
camera.center.x = offsetX;
|
||||||
camera.center.y = offsetY + (font.yMax - font.yMin);
|
camera.center.y = offsetY;
|
||||||
|
|
||||||
initAxis.call(this);
|
initAxis.call(this);
|
||||||
|
|
||||||
|
|||||||
@@ -9,8 +9,11 @@
|
|||||||
|
|
||||||
define(
|
define(
|
||||||
function(require) {
|
function(require) {
|
||||||
var adjustShape = require('../util/adjustShape');
|
|
||||||
|
var pathAdjust = require('render/util/pathAdjust');
|
||||||
|
var boundAdjust = require('render/util/boundAdjust');
|
||||||
var lang = require('common/lang');
|
var lang = require('common/lang');
|
||||||
|
var computeBoundingBox = require('../../graphics/computeBoundingBox');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取bound边界
|
* 获取bound边界
|
||||||
@@ -72,8 +75,7 @@ define(
|
|||||||
function Group(shape, render) {
|
function Group(shape, render) {
|
||||||
this.shape = shape;
|
this.shape = shape;
|
||||||
this.render = render;
|
this.render = render;
|
||||||
|
updateControls.call(this, computeBoundingBox.computePath(this.shape.points));
|
||||||
updateControls.call(this, shape);
|
|
||||||
this.render.getLayer('cover').refresh();
|
this.render.getLayer('cover').refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -81,23 +83,24 @@ define(
|
|||||||
* 根据控制点做图形变换
|
* 根据控制点做图形变换
|
||||||
*/
|
*/
|
||||||
Group.prototype.beginTransform = function(point) {
|
Group.prototype.beginTransform = function(point) {
|
||||||
|
this.bound = computeBoundingBox.computePath(this.shape.points);
|
||||||
this.originShape = lang.clone(this.shape);
|
this.originShape = lang.clone(this.shape);
|
||||||
|
var coverLayer = this.render.getLayer('cover');
|
||||||
|
coverLayer.clearShapes();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 根据控制点做图形变换
|
* 根据控制点做图形变换
|
||||||
*/
|
*/
|
||||||
Group.prototype.transform = function(point, camera) {
|
Group.prototype.transform = function(point, camera) {
|
||||||
var bound = this.originShape;
|
|
||||||
|
|
||||||
var mx = camera.x - camera.startx;
|
|
||||||
var my = camera.y - camera.starty;
|
|
||||||
|
|
||||||
// x, y, xscale, yscale
|
var bound = this.bound;
|
||||||
|
// x, y, xscale 相对符号, yscale 相对符号
|
||||||
var matrix = [
|
var matrix = [
|
||||||
bound.x,
|
0,
|
||||||
bound.y,
|
0,
|
||||||
1, 1
|
1,
|
||||||
|
1
|
||||||
];
|
];
|
||||||
|
|
||||||
// 是否需要等比例缩放
|
// 是否需要等比例缩放
|
||||||
@@ -105,152 +108,85 @@ define(
|
|||||||
|
|
||||||
switch (point.pos) {
|
switch (point.pos) {
|
||||||
case 1:
|
case 1:
|
||||||
matrix[2] = (bound.width - mx) / bound.width;
|
matrix[0] = bound.x + bound.width;
|
||||||
matrix[3] = (bound.height - my) / bound.height;
|
matrix[1] = bound.y + bound.height;
|
||||||
|
matrix[2] = -(camera.x - matrix[0]) / bound.width;
|
||||||
if(matrix[2] >= 0 && matrix[3] >= 0) {
|
matrix[3] = -(camera.y - matrix[1]) / bound.height;
|
||||||
matrix[0] = camera.x;
|
|
||||||
matrix[1] = camera.y;
|
|
||||||
}
|
|
||||||
else if(matrix[2] < 0 && matrix[3] > 0) {
|
|
||||||
matrix[0] = bound.x + bound.width;
|
|
||||||
matrix[1] = camera.y;
|
|
||||||
}
|
|
||||||
else if(matrix[2] < 0 && matrix[3] < 0) {
|
|
||||||
matrix[0] = bound.x + bound.width;
|
|
||||||
matrix[1] = bound.y + bound.height;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
matrix[0] = camera.x;
|
|
||||||
matrix[1] = bound.y + bound.height;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(ctrlKey) {
|
|
||||||
var scale = Math.max(Math.abs(matrix[2]), Math.abs(matrix[3]));
|
|
||||||
matrix[2] = matrix[2] > 0 ? scale : -scale;
|
|
||||||
matrix[3] = matrix[3] > 0 ? scale : -scale;
|
|
||||||
matrix[0] = Math.min(bound.x + bound.width,
|
|
||||||
bound.x + bound.width - bound.width * matrix[2]);
|
|
||||||
matrix[1] = Math.min(bound.y + bound.height,
|
|
||||||
bound.y + bound.height - bound.height * matrix[3]);
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 2:
|
case 2:
|
||||||
matrix[2] = (bound.width + mx) / bound.width;
|
matrix[0] = bound.x;
|
||||||
matrix[3] = (bound.height - my) / bound.height;
|
matrix[1] = bound.y + bound.height;
|
||||||
|
matrix[2] = (camera.x - matrix[0]) / bound.width;
|
||||||
if(matrix[2] >= 0 && matrix[3] >= 0) {
|
matrix[3] = -(camera.y - matrix[1]) / bound.height;
|
||||||
matrix[0] = bound.x;
|
|
||||||
matrix[1] = camera.y;
|
|
||||||
}
|
|
||||||
else if(matrix[2] < 0 && matrix[3] > 0) {
|
|
||||||
matrix[0] = camera.x;
|
|
||||||
matrix[1] = camera.y;
|
|
||||||
}
|
|
||||||
else if(matrix[2] < 0 && matrix[3] < 0) {
|
|
||||||
matrix[0] = camera.x;
|
|
||||||
matrix[1] = bound.y + bound.height;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
matrix[0] = bound.x;
|
|
||||||
matrix[1] = bound.y + bound.height;
|
|
||||||
}
|
|
||||||
if(ctrlKey) {
|
|
||||||
var scale = Math.max(Math.abs(matrix[2]), Math.abs(matrix[3]));
|
|
||||||
matrix[2] = matrix[2] > 0 ? scale : -scale;
|
|
||||||
matrix[3] = matrix[3] > 0 ? scale : -scale;
|
|
||||||
matrix[0] = Math.min(bound.x, bound.x + bound.width * matrix[2]);
|
|
||||||
matrix[1] = Math.min(bound.y + bound.height,
|
|
||||||
bound.y + bound.height - bound.height * matrix[3]);
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 3:
|
case 3:
|
||||||
matrix[2] = (bound.width + mx) / bound.width;
|
matrix[0] = bound.x;
|
||||||
matrix[3] = (bound.height + my) / bound.height;
|
matrix[1] = bound.y;
|
||||||
matrix[0] = Math.min(bound.x, camera.x);
|
matrix[2] = (camera.x - matrix[0]) / bound.width;
|
||||||
matrix[1] = Math.min(bound.y, camera.y);
|
matrix[3] = (camera.y - matrix[1]) / bound.height;
|
||||||
if(ctrlKey) {
|
|
||||||
var scale = Math.max(Math.abs(matrix[2]), Math.abs(matrix[3]));
|
|
||||||
matrix[2] = matrix[2] > 0 ? scale : -scale;
|
|
||||||
matrix[3] = matrix[3] > 0 ? scale : -scale;
|
|
||||||
matrix[0] = Math.min(bound.x, bound.x + bound.width * matrix[2]);
|
|
||||||
matrix[1] = Math.min(bound.y, bound.y + bound.height * matrix[3]);
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 4:
|
case 4:
|
||||||
matrix[2] = (bound.width - mx) / bound.width;
|
matrix[0] = bound.x + bound.width;
|
||||||
matrix[3] = (bound.height + my) / bound.height;
|
matrix[1] = bound.y;
|
||||||
|
matrix[2] = -(camera.x - matrix[0]) / bound.width;
|
||||||
if(matrix[2] >= 0 && matrix[3] >= 0) {
|
matrix[3] = (camera.y - matrix[1]) / bound.height;
|
||||||
matrix[0] = camera.x;
|
|
||||||
matrix[1] = bound.y;
|
|
||||||
}
|
|
||||||
else if(matrix[2] < 0 && matrix[3] > 0) {
|
|
||||||
matrix[0] = bound.x + bound.width;
|
|
||||||
matrix[1] = bound.y;
|
|
||||||
}
|
|
||||||
else if(matrix[2] < 0 && matrix[3] < 0) {
|
|
||||||
matrix[0] = bound.x + bound.width;
|
|
||||||
matrix[1] = camera.y;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
matrix[0] = camera.x;
|
|
||||||
matrix[1] = camera.y;
|
|
||||||
}
|
|
||||||
if(ctrlKey) {
|
|
||||||
var scale = Math.max(Math.abs(matrix[2]), Math.abs(matrix[3]));
|
|
||||||
matrix[2] = matrix[2] > 0 ? scale : -scale;
|
|
||||||
matrix[3] = matrix[3] > 0 ? scale : -scale;
|
|
||||||
matrix[0] = Math.min(bound.x + bound.width,
|
|
||||||
bound.x + bound.width - bound.width * matrix[2]);
|
|
||||||
matrix[1] = Math.min(bound.y, bound.y + bound.height * matrix[3]);
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 5:
|
case 5:
|
||||||
matrix[3] = (bound.height - my) / bound.height;
|
matrix[1] = bound.y + bound.height;
|
||||||
matrix[0] = bound.x;
|
matrix[2] = 1;
|
||||||
matrix[1] = matrix[3] > 0 ? camera.y : bound.y + bound.height;
|
matrix[3] = -(camera.y - matrix[1]) / bound.height;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 7:
|
case 7:
|
||||||
matrix[3] = (bound.height + my) / bound.height;
|
matrix[1] = bound.y;
|
||||||
matrix[0] = bound.x;
|
matrix[3] = (camera.y - matrix[1]) / bound.height;
|
||||||
matrix[1] = matrix[3] > 0 ? bound.y : camera.y;
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 6:
|
case 6:
|
||||||
matrix[2] = (bound.width + mx) / bound.width;
|
matrix[0] = bound.x;
|
||||||
matrix[0] = matrix[2] > 0 ? bound.x : camera.x;
|
matrix[2] = (camera.x - matrix[0]) / bound.width;
|
||||||
matrix[1] = bound.y;
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 8:
|
case 8:
|
||||||
matrix[2] = (bound.width - mx) / bound.width;
|
matrix[0] = bound.x + bound.width;
|
||||||
matrix[0] = matrix[2] > 0 ? camera.x : bound.x + bound.width;
|
matrix[2] = -(camera.x - matrix[0]) / bound.width;
|
||||||
matrix[1] = bound.y;
|
|
||||||
break;
|
break;
|
||||||
};
|
};
|
||||||
|
|
||||||
var shape = adjustShape(lang.clone(this.originShape), matrix);
|
// 等比缩放
|
||||||
|
if (camera.event.ctrlKey && [1, 2, 3, 4].indexOf(point.pos) >= 0) {
|
||||||
|
var scale = Math.max(Math.abs(matrix[2]), Math.abs(matrix[3]));
|
||||||
|
matrix[2] = matrix[2] >= 0 ? scale : -scale;
|
||||||
|
matrix[3] = matrix[3] >= 0 ? scale : -scale;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 更新shape
|
||||||
|
var shape = lang.clone(this.originShape);
|
||||||
|
|
||||||
|
pathAdjust(shape.points, matrix[2], matrix[3], -matrix[0], -matrix[1]);
|
||||||
|
pathAdjust(shape.points, 1, 1, matrix[0], matrix[1]);
|
||||||
|
|
||||||
lang.extend(this.shape, shape);
|
lang.extend(this.shape, shape);
|
||||||
|
|
||||||
this.render.getLayer('font').refresh();
|
this.render.getLayer('font').refresh();
|
||||||
|
|
||||||
|
// 更新边界
|
||||||
var coverLayer = this.render.getLayer('cover');
|
var coverLayer = this.render.getLayer('cover');
|
||||||
coverLayer.clearShapes();
|
if(!coverLayer.getShape('bound')) {
|
||||||
coverLayer.addShape({
|
coverLayer.addShape({
|
||||||
type: 'dashedrect',
|
type: 'dashedrect',
|
||||||
x: shape.x,
|
id: 'bound'
|
||||||
y: shape.y,
|
});
|
||||||
width: shape.width,
|
}
|
||||||
height: shape.height
|
|
||||||
});
|
var bound = boundAdjust(lang.clone(this.bound), matrix[2], matrix[3], -matrix[0], -matrix[1]);
|
||||||
|
boundAdjust(bound, 1, 1, matrix[0], matrix[1]);
|
||||||
|
lang.extend(coverLayer.getShape('bound'), bound);
|
||||||
coverLayer.refresh();
|
coverLayer.refresh();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -258,7 +194,7 @@ define(
|
|||||||
*/
|
*/
|
||||||
Group.prototype.finishTransform = function() {
|
Group.prototype.finishTransform = function() {
|
||||||
delete this.originShape;
|
delete this.originShape;
|
||||||
updateControls.call(this, this.shape);
|
updateControls.call(this, computeBoundingBox.computePath(this.shape.points));
|
||||||
this.render.getLayer('cover').refresh();
|
this.render.getLayer('cover').refresh();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -266,12 +202,13 @@ define(
|
|||||||
* 移动到指定位置
|
* 移动到指定位置
|
||||||
*/
|
*/
|
||||||
Group.prototype.move = function(x, y) {
|
Group.prototype.move = function(x, y) {
|
||||||
|
|
||||||
var fontLayer = this.render.painter.getLayer(this.shape.layerId);
|
var fontLayer = this.render.painter.getLayer(this.shape.layerId);
|
||||||
fontLayer.move(x, y, this.shape)
|
fontLayer.move(x, y, this.shape)
|
||||||
fontLayer.refresh();
|
fontLayer.refresh();
|
||||||
|
|
||||||
var coverLayer = this.render.getLayer('cover');
|
var coverLayer = this.render.getLayer('cover');
|
||||||
coverLayer.move(x, y)
|
coverLayer.move(x, y);
|
||||||
coverLayer.refresh();
|
coverLayer.refresh();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -31,7 +31,6 @@ define(
|
|||||||
if(result) {
|
if(result) {
|
||||||
if (this.currentGroup) {
|
if (this.currentGroup) {
|
||||||
this.currentPoint = lang.clone(result[0]);
|
this.currentPoint = lang.clone(result[0]);
|
||||||
this.currentGroup.beginTransform(this.currentPoint);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@@ -63,6 +62,15 @@ define(
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始拖动
|
||||||
|
*/
|
||||||
|
dragstart: function(e) {
|
||||||
|
if (this.currentGroup && this.currentPoint) {
|
||||||
|
this.currentGroup.beginTransform(this.currentPoint);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 拖动事件
|
* 拖动事件
|
||||||
*/
|
*/
|
||||||
@@ -109,6 +117,7 @@ define(
|
|||||||
begin: function() {
|
begin: function() {
|
||||||
var me = this;
|
var me = this;
|
||||||
var coverLayer = me.render.getLayer('cover');
|
var coverLayer = me.render.getLayer('cover');
|
||||||
|
|
||||||
// 注册鼠标样式
|
// 注册鼠标样式
|
||||||
me.render.capture.on('move', me.__moveEvent = function (e) {
|
me.render.capture.on('move', me.__moveEvent = function (e) {
|
||||||
var shapes = coverLayer.getShapeIn(e);
|
var shapes = coverLayer.getShapeIn(e);
|
||||||
|
|||||||
@@ -66,7 +66,6 @@ define(
|
|||||||
render.getLayer('cover').refresh();
|
render.getLayer('cover').refresh();
|
||||||
render.getLayer('font').refresh();
|
render.getLayer('font').refresh();
|
||||||
|
|
||||||
this.modifiedShape[current._shape] = true;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -90,8 +89,8 @@ define(
|
|||||||
if(c == 'M' || c == 'L') {
|
if(c == 'M' || c == 'L') {
|
||||||
controls.push({
|
controls.push({
|
||||||
type: 'point',
|
type: 'point',
|
||||||
x: shape.x + p0.x,
|
x: p0.x,
|
||||||
y: shape.y + p0.y,
|
y: p0.y,
|
||||||
_point: p0,
|
_point: p0,
|
||||||
_shape: shape.id
|
_shape: shape.id
|
||||||
});
|
});
|
||||||
@@ -99,15 +98,15 @@ define(
|
|||||||
else if (c == 'Q') {
|
else if (c == 'Q') {
|
||||||
controls.push({
|
controls.push({
|
||||||
type: 'cpoint',
|
type: 'cpoint',
|
||||||
x: shape.x + p1.x,
|
x: p1.x,
|
||||||
y: shape.y + p1.y,
|
y: p1.y,
|
||||||
_point: p1,
|
_point: p1,
|
||||||
_shape: shape.id
|
_shape: shape.id
|
||||||
});
|
});
|
||||||
controls.push({
|
controls.push({
|
||||||
type: 'point',
|
type: 'point',
|
||||||
x: shape.x + p2.x,
|
x: p2.x,
|
||||||
y: shape.y + p2.y,
|
y: p2.y,
|
||||||
_point: p2,
|
_point: p2,
|
||||||
_shape: shape.id
|
_shape: shape.id
|
||||||
});
|
});
|
||||||
@@ -140,24 +139,6 @@ define(
|
|||||||
|
|
||||||
end: function() {
|
end: function() {
|
||||||
|
|
||||||
// 重新调整shape大小和位置
|
|
||||||
var shapes = Object.keys(this.modifiedShape);
|
|
||||||
if(shapes.length) {
|
|
||||||
var fontLayer = this.render.getLayer('font');
|
|
||||||
shapes.forEach(function(shapeId) {
|
|
||||||
var shape = fontLayer.getShape(shapeId);
|
|
||||||
var bound = computeBoundingBox.computePath(shape.points);
|
|
||||||
shape.width = bound.width;
|
|
||||||
shape.height = bound.height;
|
|
||||||
shape.x = shape.x + bound.x;
|
|
||||||
shape.y = shape.y + bound.y;
|
|
||||||
shape.points = pathAdjust(shape.points, 1, -bound.x, -bound.y);
|
|
||||||
});
|
|
||||||
fontLayer.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.modifiedShape = null;
|
|
||||||
|
|
||||||
var coverLayer = this.render.getLayer('cover');
|
var coverLayer = this.render.getLayer('cover');
|
||||||
coverLayer.options.fill = false;
|
coverLayer.options.fill = false;
|
||||||
coverLayer.clearShapes();
|
coverLayer.clearShapes();
|
||||||
|
|||||||
@@ -36,6 +36,7 @@ define(
|
|||||||
context.fillStyle = options.fillColor || 'black';
|
context.fillStyle = options.fillColor || 'black';
|
||||||
context.strokeStyle = options.strokeColor || 'black';
|
context.strokeStyle = options.strokeColor || 'black';
|
||||||
context.strokeWidth = options.strokeWidth || 1;
|
context.strokeWidth = options.strokeWidth || 1;
|
||||||
|
context.font = options.font || "normal 10px arial";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -258,9 +259,9 @@ define(
|
|||||||
shapes = this.shapes;
|
shapes = this.shapes;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var support = this.painter.support;
|
||||||
shapes.forEach(function(shape) {
|
shapes.forEach(function(shape) {
|
||||||
shape.x = shape.x + x;
|
support[shape.type].move(shape, x, y);
|
||||||
shape.y= shape.y + y;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
|
|||||||
@@ -98,6 +98,7 @@ define(
|
|||||||
|
|
||||||
ctx.moveTo(0, y);
|
ctx.moveTo(0, y);
|
||||||
ctx.lineTo(xMax, y);
|
ctx.lineTo(xMax, y);
|
||||||
|
ctx.fillText('Baseline', 2, y - 2);
|
||||||
|
|
||||||
ctx.moveTo(x, 0);
|
ctx.moveTo(x, 0);
|
||||||
ctx.lineTo(x, yMax);
|
ctx.lineTo(x, yMax);
|
||||||
@@ -106,18 +107,17 @@ define(
|
|||||||
var metrics = shape.metrics;
|
var metrics = shape.metrics;
|
||||||
|
|
||||||
for (var line in metrics) {
|
for (var line in metrics) {
|
||||||
dashedLineTo(ctx, 0, y - Math.round(metrics[line]), xMax, y - Math.round(metrics[line]), 4);
|
var lineY = y - Math.round(metrics[line]);
|
||||||
|
dashedLineTo(ctx, 0, lineY, xMax, lineY, 4);
|
||||||
|
ctx.fillText(line, 2, lineY - 2);
|
||||||
}
|
}
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
// em 框
|
// em 框
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.strokeStyle = shape.emColor || '#000';
|
ctx.strokeStyle = shape.emColor || 'red';
|
||||||
|
var mx = Math.round(x + shape.unitsPerEm);
|
||||||
var unitsPerEm = Math.round(shape.unitsPerEm);
|
dashedLineTo(ctx, mx, 0, mx, yMax , 4);
|
||||||
ctx.moveTo(x, y - unitsPerEm);
|
|
||||||
dashedLineTo(ctx, x, y - unitsPerEm, x + unitsPerEm, y - unitsPerEm, 4);
|
|
||||||
dashedLineTo(ctx, x + unitsPerEm, y - unitsPerEm, x + unitsPerEm, y, 4);
|
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ define(
|
|||||||
var ShapeConstructor = require('./Shape');
|
var ShapeConstructor = require('./Shape');
|
||||||
var isInsidePath = require('../../graphics/isInsidePath');
|
var isInsidePath = require('../../graphics/isInsidePath');
|
||||||
var pathAdjust = require('../util/pathAdjust');
|
var pathAdjust = require('../util/pathAdjust');
|
||||||
|
var computeBoundingBox = require('graphics/computeBoundingBox');
|
||||||
var proto = {
|
var proto = {
|
||||||
|
|
||||||
type: 'path',
|
type: 'path',
|
||||||
@@ -25,10 +26,21 @@ define(
|
|||||||
* @return {Object} shape对象
|
* @return {Object} shape对象
|
||||||
*/
|
*/
|
||||||
adjust: function(shape, camera) {
|
adjust: function(shape, camera) {
|
||||||
ShapeConstructor.prototype.adjust.call(this, shape, camera);
|
pathAdjust(shape.points, camera.ratio, camera.ratio, -camera.center.x, -camera.center.y);
|
||||||
pathAdjust(shape.points, camera.ratio);
|
pathAdjust(shape.points, 1, 1, camera.center.x, camera.center.y);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动指定位置
|
||||||
|
*
|
||||||
|
* @return {Object} shape对象
|
||||||
|
*/
|
||||||
|
move: function(shape, mx, my) {
|
||||||
|
pathAdjust(shape.points, 1, 1, mx, my);
|
||||||
|
return shape;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取shape的矩形区域
|
* 获取shape的矩形区域
|
||||||
*
|
*
|
||||||
@@ -36,12 +48,7 @@ define(
|
|||||||
* @param {Object} 矩形区域
|
* @param {Object} 矩形区域
|
||||||
*/
|
*/
|
||||||
getRect: function(shape) {
|
getRect: function(shape) {
|
||||||
return {
|
return computeBoundingBox.computePath(shape.points);
|
||||||
x: shape.x,
|
|
||||||
y: shape.y,
|
|
||||||
width: shape.width,
|
|
||||||
height:shape.height,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -53,17 +60,17 @@ define(
|
|||||||
* @param {boolean} 是否
|
* @param {boolean} 是否
|
||||||
*/
|
*/
|
||||||
isIn: function(shape, x, y) {
|
isIn: function(shape, x, y) {
|
||||||
|
var bound = computeBoundingBox.computePath(shape.points);
|
||||||
if(
|
if(
|
||||||
x <= shape.x + shape.width
|
x <= bound.x + bound.width
|
||||||
&& x >= shape.x
|
&& x >= bound.x
|
||||||
&& y <= shape.y + shape.height
|
&& y <= bound.y + bound.height
|
||||||
&& y >= shape.y
|
&& y >= bound.y
|
||||||
) {
|
) {
|
||||||
|
|
||||||
return isInsidePath(shape.points, {
|
return isInsidePath(shape.points, {
|
||||||
x: x - shape.x,
|
x: x,
|
||||||
y: y - shape.y
|
y: y
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
@@ -79,7 +86,6 @@ define(
|
|||||||
var x = shape.x || 0;
|
var x = shape.x || 0;
|
||||||
var y = shape.y || 0;
|
var y = shape.y || 0;
|
||||||
|
|
||||||
ctx.translate(x, y);
|
|
||||||
var i = -1;
|
var i = -1;
|
||||||
var points = shape.points;
|
var points = shape.points;
|
||||||
var l = points.length;
|
var l = points.length;
|
||||||
@@ -102,15 +108,6 @@ define(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// var w = shape.width;
|
|
||||||
// var h = shape.height;
|
|
||||||
// ctx.moveTo(0, 0);
|
|
||||||
// ctx.lineTo(w, 0);
|
|
||||||
// ctx.lineTo(w, h);
|
|
||||||
// ctx.lineTo(0, h);
|
|
||||||
// ctx.lineTo(0, 0);
|
|
||||||
|
|
||||||
ctx.translate(-x, -y);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -56,6 +56,23 @@ define(
|
|||||||
return shape;
|
return shape;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动指定位置
|
||||||
|
*
|
||||||
|
* @return {Object} shape对象
|
||||||
|
*/
|
||||||
|
move: function(shape, mx, my) {
|
||||||
|
|
||||||
|
if(typeof shape.x === 'number') {
|
||||||
|
shape.x += mx;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(typeof shape.y === 'number') {
|
||||||
|
shape.y += my;
|
||||||
|
}
|
||||||
|
return shape;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取shape的矩形区域
|
* 获取shape的矩形区域
|
||||||
*
|
*
|
||||||
|
|||||||
40
src/render/util/boundAdjust.js
Normal file
40
src/render/util/boundAdjust.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
* @file boundAdjust.js
|
||||||
|
* @author mengke01
|
||||||
|
* @date
|
||||||
|
* @description
|
||||||
|
* 边界缩放
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
define(
|
||||||
|
function(require) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 对bound坐标进行调整
|
||||||
|
*
|
||||||
|
* @param {Object} bound bound数据结构
|
||||||
|
* @param {number} scaleX x缩放比例
|
||||||
|
* @param {number} scaleY y缩放比例
|
||||||
|
* @param {number} offsetX x偏移
|
||||||
|
* @param {number} offsetY y偏移
|
||||||
|
* @return {number} bound数据结构
|
||||||
|
*/
|
||||||
|
function boundAdjust(bound, scaleX, scaleY, offsetX, offsetY) {
|
||||||
|
|
||||||
|
var scaleX = scaleX == undefined ? 1 : scaleX;
|
||||||
|
var scaleY = scaleY == undefined ? 1 : scaleY;
|
||||||
|
var x = offsetX || 0;
|
||||||
|
var y = offsetY || 0;
|
||||||
|
|
||||||
|
bound.x = scaleX * (bound.x + x);
|
||||||
|
bound.y = scaleY * (bound.y + y);
|
||||||
|
bound.width = scaleX * bound.width;
|
||||||
|
bound.height = scaleY * bound.height;
|
||||||
|
|
||||||
|
return bound;
|
||||||
|
}
|
||||||
|
|
||||||
|
return boundAdjust;
|
||||||
|
}
|
||||||
|
);
|
||||||
@@ -16,44 +16,29 @@ define(
|
|||||||
* 对path坐标进行调整
|
* 对path坐标进行调整
|
||||||
*
|
*
|
||||||
* @param {Object} path path数据结构
|
* @param {Object} path path数据结构
|
||||||
* @param {number} scale 缩放比例
|
* @param {number} scaleX x缩放比例
|
||||||
|
* @param {number} scaleY y缩放比例
|
||||||
* @param {number} offsetX x偏移
|
* @param {number} offsetX x偏移
|
||||||
* @param {number} offsetY y偏移
|
* @param {number} offsetY y偏移
|
||||||
* @return {number} path数据结构
|
* @return {number} path数据结构
|
||||||
*/
|
*/
|
||||||
function pathAdjust(path, scale, offsetX, offsetY) {
|
function pathAdjust(path, scaleX, scaleY, offsetX, offsetY) {
|
||||||
var scale = scale || 1;
|
var scaleX = scaleX == undefined ? 1 : scaleX;
|
||||||
|
var scaleY = scaleY == undefined ? 1 : scaleY;
|
||||||
var x = offsetX || 0;
|
var x = offsetX || 0;
|
||||||
var y = offsetY || 0;
|
var y = offsetY || 0;
|
||||||
if(scale == 1) {
|
pathIterator(path, function(c, i, p0, p1, p2) {
|
||||||
pathIterator(path, function(c, i, p0, p1, p2) {
|
if (c == 'Q') {
|
||||||
if (c == 'Q') {
|
p1.x = scaleX * (p1.x + x);
|
||||||
p1.x = p1.x + x;
|
p1.y = scaleY * (p1.y + y);
|
||||||
p1.y = p1.y + y;
|
p2.x = scaleX * (p2.x + x);
|
||||||
p2.x = p2.x + x;
|
p2.y = scaleY * (p2.y + y);
|
||||||
p2.y = p2.y + y;
|
}
|
||||||
}
|
else {
|
||||||
else {
|
p0.x = scaleX * (p0.x + x);
|
||||||
p0.x = p0.x + x;
|
p0.y = scaleY * (p0.y + y);
|
||||||
p0.y = p0.y + y;
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
|
|
||||||
pathIterator(path, function(c, i, p0, p1, p2) {
|
|
||||||
if (c == 'Q') {
|
|
||||||
p1.x = scale * (p1.x + x);
|
|
||||||
p1.y = scale * (p1.y + y);
|
|
||||||
p2.x = scale * (p2.x + x);
|
|
||||||
p2.y = scale * (p2.y + y);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
p0.x = scale * (p0.x + x);
|
|
||||||
p0.y = scale * (p0.y + y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return path;
|
return path;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -28,8 +28,6 @@ define(
|
|||||||
|
|
||||||
var sorted = shapes.map(function(shape) {
|
var sorted = shapes.map(function(shape) {
|
||||||
var bound = computeBoundingBox.computePath(shape.points);
|
var bound = computeBoundingBox.computePath(shape.points);
|
||||||
bound.x = shape.x;
|
|
||||||
bound.y = shape.y;
|
|
||||||
shape._bound = bound;
|
shape._bound = bound;
|
||||||
shape._size = bound.width * bound.height;
|
shape._size = bound.width * bound.height;
|
||||||
return shape;
|
return shape;
|
||||||
@@ -39,15 +37,17 @@ define(
|
|||||||
|
|
||||||
var start = sorted[0];
|
var start = sorted[0];
|
||||||
var end = sorted[sorted.length - 1];
|
var end = sorted[sorted.length - 1];
|
||||||
|
|
||||||
var startPoints = pathAdjust(lang.clone(start.points), 1, start.x, start.y);
|
|
||||||
var endPoints = pathAdjust(lang.clone(end.points), 1, end.x, end.y);
|
|
||||||
|
|
||||||
var result = isPathCross(
|
var result = isPathCross(
|
||||||
startPoints, endPoints,
|
start.points, end.points,
|
||||||
start._bound, end._bound
|
start._bound, end._bound
|
||||||
);
|
);
|
||||||
|
|
||||||
|
shapes.forEach(function(shape) {
|
||||||
|
delete shape._bound;
|
||||||
|
delete shape._size;
|
||||||
|
});
|
||||||
|
|
||||||
if(2 === result) {
|
if(2 === result) {
|
||||||
return start;
|
return start;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,15 +27,10 @@ var glyfAdjust = require('ttf/util/glyfAdjust');
|
|||||||
}
|
}
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
|
|
||||||
// 对轮廓进行反向,以及坐标系调整,取整
|
|
||||||
glyf = glyfAdjust(glyf, options.scale);
|
|
||||||
|
|
||||||
|
|
||||||
var coordinates = glyf.coordinates;
|
var coordinates = glyf.coordinates;
|
||||||
var startPts = 0; // 起始点
|
var startPts = 0; // 起始点
|
||||||
var currentPts = 0; // 结束点
|
var currentPts = 0; // 结束点
|
||||||
|
|
||||||
var pathArr = []; // 路径序列
|
var pathArr = []; // 路径序列
|
||||||
|
|
||||||
// 处理glyf轮廓
|
// 处理glyf轮廓
|
||||||
|
|||||||
Reference in New Issue
Block a user