add rotate sorption

README.md

@@ -94,3 +94,5 @@ sh build.sh
 24. 2016-3-7 将path的布尔操作库替换成paper.js的路径库.
 
 25. 2016-3-20 增加字体同步的拉取和推送，增加自动更新同步版本.
+
+26. 2016-3-22 增加字形旋转吸附，调整配色.

demo/sync/list.md

@@ -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"}}

src/editor/controller/initLayer.js

@@ -29,8 +29,8 @@ define(
             this.coverLayer = this.render.addLayer('cover', lang.extend({
                 level: 30,
                 fill: false,
-                strokeColor: 'green',
+                strokeColor: this.options.coverLayer.strokeColor,
-                fillColor: 'white'
+                fillColor: this.options.coverLayer.fillColor
             }, this.options.coverLayer));
 
             this.referenceLineLayer = this.render.addLayer('referenceline', {

src/editor/group/ShapesGroup.js

@@ -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);
             });

src/editor/group/getRotateMatrix.js

@@ -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
                     );

src/editor/mode/point.js

@@ -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',
+                        strokeColor: style.strokeColor,
-                        fillColor: 'white'
+                        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()) {

src/editor/options.js

@@ -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'
                 },
 
                 // 轴线

src/fonteditor/setting/editor.js

@@ -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',
+                    gapColor: editorDefault.axis.gapColor,
-                    metricsColor: 'red',
+                    metricsColor: editorDefault.axis.metricsColor,
                     graduation: {
-                        gap: 100
+                        gap: editorDefault.axis.graduation.gap
                     }
                 }
             }