add rotate sorption
This commit is contained in:
kekee000
parent
0057a5baa0
commit
3f804b64f3
@ -94,3 +94,5 @@ sh build.sh
|
||||
24. 2016-3-7 将path的布尔操作库替换成paper.js的路径库.
|
||||
|
||||
25. 2016-3-20 增加字体同步的拉取和推送，增加自动更新同步版本.
|
||||
|
||||
26. 2016-3-22 增加字形旋转吸附，调整配色.
|
||||
|
||||
@ -1 +0,0 @@
|
||||
{"D:\\fonteditor\\demo\\sync\/fonteditor":{"user":"3e60a8b0712c80d976fb3e917c658d4f","timestamp":1458479047942,"fontType":"ttf"},"\/Users\/mengke01\/github\/fonteditor\/demo\/sync\/fonteditor":{"user":"3e60a8b0712c80d976fb3e917c658d4f","timestamp":1458562965720,"fontType":"ttf"}}
|
||||
@ -29,8 +29,8 @@ define(
|
||||
this.coverLayer = this.render.addLayer('cover', lang.extend({
|
||||
level: 30,
|
||||
fill: false,
|
||||
strokeColor: 'green',
|
||||
fillColor: 'white'
|
||||
strokeColor: this.options.coverLayer.strokeColor,
|
||||
fillColor: this.options.coverLayer.fillColor
|
||||
}, this.options.coverLayer));
|
||||
|
||||
this.referenceLineLayer = this.render.addLayer('referenceline', {
|
||||
|
||||
@ -178,13 +178,13 @@ define(
|
||||
}
|
||||
|
||||
this.shapes = shapes;
|
||||
|
||||
this.coverShapes = lang.clone(this.shapes);
|
||||
var outlineColor = this.editor.options.coverLayer.outlineColor;
|
||||
this.coverShapes.forEach(function (shape) {
|
||||
shape.id = 'cover-' + shape.id;
|
||||
shape.selectable = false;
|
||||
shape.style = {
|
||||
strokeColor: 'red'
|
||||
strokeColor: outlineColor
|
||||
};
|
||||
coverLayer.addShape(shape);
|
||||
});
|
||||
|
||||
@ -7,9 +7,20 @@
|
||||
define(
|
||||
function (require) {
|
||||
|
||||
var AUTO_SORP_ANGLE = 3; // 4度以内自动吸附到八个方向角度
|
||||
var getAngle = require('math/getAngle');
|
||||
|
||||
|
||||
function getRotateAngle(x1, y1, x2, y2) {
|
||||
var radian = getAngle(x1, y1, x2, y2);
|
||||
var angle = (radian * 180 / Math.PI + 360) % 45;
|
||||
// 在45度角倍数方向进行吸附
|
||||
if (Math.min(angle, 45 - angle) < AUTO_SORP_ANGLE) {
|
||||
radian = Math.round(radian * 180 / Math.PI / 45) * 45 * Math.PI / 180;
|
||||
}
|
||||
return radian;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得变换矩阵
|
||||
*
|
||||
@ -32,7 +43,7 @@ define(
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
matrix[2] = getAngle(
|
||||
matrix[2] = getRotateAngle(
|
||||
camera.startX - matrix[0], camera.startY - matrix[1],
|
||||
camera.x - matrix[0], camera.y - matrix[1]
|
||||
);
|
||||
@ -41,7 +52,7 @@ define(
|
||||
case 5:
|
||||
matrix[0] = 0;
|
||||
matrix[1] = bound.y + bound.height;
|
||||
matrix[2] = getAngle(
|
||||
matrix[2] = getRotateAngle(
|
||||
0, bound.height,
|
||||
camera.x - camera.startX, bound.height
|
||||
);
|
||||
@ -50,7 +61,7 @@ define(
|
||||
case 7:
|
||||
matrix[0] = 0;
|
||||
matrix[1] = bound.y;
|
||||
matrix[2] = getAngle(
|
||||
matrix[2] = getRotateAngle(
|
||||
0, -bound.height,
|
||||
camera.x - camera.startX, -bound.height
|
||||
);
|
||||
@ -59,7 +70,7 @@ define(
|
||||
case 6:
|
||||
matrix[0] = bound.x;
|
||||
matrix[1] = 0;
|
||||
matrix[2] = getAngle(
|
||||
matrix[2] = getRotateAngle(
|
||||
bound.width, 0,
|
||||
bound.width, camera.y - camera.startY
|
||||
);
|
||||
@ -68,7 +79,7 @@ define(
|
||||
case 8:
|
||||
matrix[0] = bound.x + bound.width;
|
||||
matrix[1] = 0;
|
||||
matrix[2] = getAngle(
|
||||
matrix[2] = getRotateAngle(
|
||||
-bound.width, 0,
|
||||
-bound.width, camera.y - camera.startY
|
||||
);
|
||||
|
||||
@ -76,12 +76,13 @@ define(
|
||||
var last = shape.points.length - 1;
|
||||
var clonedShape = lang.clone(shape);
|
||||
|
||||
var style = this.options.coverLayer;
|
||||
|
||||
clonedShape.id = 'cover-' + shape.id;
|
||||
clonedShape.selectable = false;
|
||||
clonedShape.style = {
|
||||
strokeColor: 'red'
|
||||
strokeColor: style.outlineColor
|
||||
};
|
||||
|
||||
clonedShape.points.forEach(function (p, index) {
|
||||
var cpoint = {
|
||||
type: p.onCurve ? 'point' : 'cpoint',
|
||||
@ -92,8 +93,8 @@ define(
|
||||
style: {
|
||||
fill: true,
|
||||
stroke: true,
|
||||
strokeColor: 'green',
|
||||
fillColor: 'white'
|
||||
strokeColor: style.strokeColor,
|
||||
fillColor: style.fillColor
|
||||
}
|
||||
};
|
||||
|
||||
@ -146,7 +147,7 @@ define(
|
||||
if (result) {
|
||||
this.curPoint = result[0];
|
||||
this.curPoint._style = lang.clone(this.curPoint.style);
|
||||
this.curPoint.style.fillColor = 'green';
|
||||
this.curPoint.style.fillColor = this.options.coverLayer.outlineColor;
|
||||
|
||||
// 设置吸附选项
|
||||
if (this.sorption.isEnable()) {
|
||||
|
||||
@ -17,7 +17,7 @@ define(
|
||||
enableShape: true, // 吸附到对象
|
||||
gridDelta: 5, // 网格delta
|
||||
delta: 5, // 对象delta
|
||||
sorptionColor: '#4AFF4A'
|
||||
sorptionColor: '#F0913A'
|
||||
},
|
||||
|
||||
// 辅助线
|
||||
@ -29,16 +29,18 @@ define(
|
||||
|
||||
// 覆盖层
|
||||
coverLayer: {
|
||||
strokeColor: 'green',
|
||||
lineColor: '#4780FF',
|
||||
outlineColor: '#3372FF',
|
||||
strokeColor: '#4780FF',
|
||||
fillColor: 'white'
|
||||
},
|
||||
|
||||
// 字体层
|
||||
fontLayer: {
|
||||
lineWidth: 1,
|
||||
strokeColor: '#999',
|
||||
strokeColor: '#888',
|
||||
fill: true,
|
||||
fillColor: '#555'
|
||||
fillColor: '#999'
|
||||
},
|
||||
|
||||
// 轴线
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
|
||||
define(
|
||||
function (require) {
|
||||
var editorDefault = require('editor/options').editor;
|
||||
|
||||
var setting = {
|
||||
|
||||
@ -25,21 +26,21 @@ define(
|
||||
enableShape: true
|
||||
},
|
||||
fontLayer: {
|
||||
strokeColor: '#999',
|
||||
strokeColor: editorDefault.fontLayer.strokeColor,
|
||||
fill: true,
|
||||
fillColor: '#555'
|
||||
fillColor: editorDefault.fontLayer.fillColor
|
||||
},
|
||||
referenceline: {
|
||||
style: {
|
||||
strokeColor: '#0FF'
|
||||
strokeColor: editorDefault.referenceline.style.strokeColor
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
showGrid: true,
|
||||
gapColor: '#A6A6FF',
|
||||
metricsColor: 'red',
|
||||
gapColor: editorDefault.axis.gapColor,
|
||||
metricsColor: editorDefault.axis.metricsColor,
|
||||
graduation: {
|
||||
gap: 100
|
||||
gap: editorDefault.axis.graduation.gap
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user