diff --git a/css/common/ico.less b/css/common/ico.less index b4f1ae8..c117e01 100644 --- a/css/common/ico.less +++ b/css/common/ico.less @@ -3,15 +3,18 @@ // fontface @font-face { font-family: 'fonteditor'; - src: url('../font/iconfont.ttf') format('truetype'); + src: url('../../font/iconfont.ttf') format('truetype'); } .ico() { display: inline-block; - font-family: 'fonteditor'; - font-style:normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.1px; + &:before, + &:after { + font-family: 'fonteditor'; + font-style:normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.1px; + } } .i-ico(@unicode) { diff --git a/demo/css/editor.css b/demo/css/editor.css index 4874e6a..64a77db 100644 --- a/demo/css/editor.css +++ b/demo/css/editor.css @@ -17,16 +17,21 @@ a:hover { } @font-face { font-family: 'fonteditor'; - src: url('../font/iconfont.ttf') format('truetype'); + src: url('../../font/iconfont.ttf') format('truetype'); } .i-edit, .i-del { display: inline-block; + font-size: 12px; +} +.i-edit:before, +.i-del:before, +.i-edit:after, +.i-del:after { font-family: 'fonteditor'; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.1px; - font-size: 12px; } .i-edit:hover, .i-del:hover { @@ -41,6 +46,9 @@ a:hover { } .i-github { display: inline-block; +} +.i-github:before, +.i-github:after { font-family: 'fonteditor'; font-style: normal; -webkit-font-smoothing: antialiased; @@ -51,10 +59,6 @@ a:hover { } .close-editor { display: inline-block; - font-family: 'fonteditor'; - font-style: normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.1px; position: absolute; right: 0; top: 0; @@ -65,6 +69,13 @@ a:hover { border-left: 1px solid #000; display: none; } +.close-editor:before, +.close-editor:after { + font-family: 'fonteditor'; + font-style: normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.1px; +} .close-editor:before { content: '\e611'; } @@ -133,11 +144,14 @@ a:hover { } .editor-contextmenu li[data-tag="selected"] { display: inline-block; + display: block; +} +.editor-contextmenu li[data-tag="selected"]:before, +.editor-contextmenu li[data-tag="selected"]:after { font-family: 'fonteditor'; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.1px; - display: block; } .editor-contextmenu li[data-tag="selected"]:after { content: '\e610'; diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 5f9eef5..1137a12 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -23,6 +23,7 @@ define( var initBinder = require('./controller/initBinder'); var initAxis = require('./controller/initAxis'); var initFont = require('./controller/initFont'); + var initSetting = require('./controller/initSetting'); /** * Render控制器 @@ -42,6 +43,7 @@ define( Editor.prototype.setRender = function(render) { this.render = render; + initSetting.call(this); initFont.call(this); initRender.call(this); initLayer.call(this); diff --git a/src/editor/command/support.js b/src/editor/command/support.js index 02929c9..15b2de0 100644 --- a/src/editor/command/support.js +++ b/src/editor/command/support.js @@ -232,18 +232,34 @@ define( }, /** - * 是否打开智能吸附 + * 是否打开网格吸附 */ - sorption: function(open) { - open = !!open; - menuUtil.setSelected(commandList.editor, 'sorption', open); - this.options.sorption.enable = open; + gridsorption: function(enabled) { + menuUtil.setSelected(commandList.editor, 'setting.gridsorption', !!enabled); + this.options.sorption.enableGrid = this.sorption.enableGrid = !!enabled; + }, + + /** + * 是否打开轮廓吸附 + */ + shapesorption: function(enabled) { + menuUtil.setSelected(commandList.editor, 'setting.shapesorption', !!enabled); + this.options.sorption.enableShape = this.sorption.enableShape = !!enabled; + }, + + /** + * 是否打开轮廓吸附 + */ + showgrid: function(enabled) { + menuUtil.setSelected(commandList.editor, 'setting.showgrid', !!enabled); + this.options.axis.showGrid = this.axis.showGrid = !!enabled; + this.axisLayer.refresh(); }, /** * 设置字体信息 */ - font: function() { + setfont: function() { // 计算边界 var box = computeBoundingBox.computePathBox.apply(null, this.fontLayer.shapes.map(function(shape) { @@ -267,6 +283,13 @@ define( name: this.font.name } }); + }, + + /** + * 更多设置 + */ + moresetting: function(enabled) { + this.fire('setting:more', this.options); } }; diff --git a/src/editor/controller/initRender.js b/src/editor/controller/initRender.js index 27ede0c..1fc62d9 100644 --- a/src/editor/controller/initRender.js +++ b/src/editor/controller/initRender.js @@ -56,9 +56,14 @@ define( var type = e.args.type; this.execCommand('addsupportshapes', type); } - else if (e.command == 'sorption') { - var selected = e.args.selected; - this.execCommand('sorption', !selected); + else if (e.command == 'gridsorption') { + this.execCommand('gridsorption', !e.args.selected); + } + else if (e.command == 'shapesorption') { + this.execCommand('shapesorption', !e.args.selected); + } + else if (e.command == 'showgrid') { + this.execCommand('showgrid', !e.args.selected); } else { this.execCommand(e.command, e); diff --git a/src/editor/controller/initSetting.js b/src/editor/controller/initSetting.js new file mode 100644 index 0000000..879401b --- /dev/null +++ b/src/editor/controller/initSetting.js @@ -0,0 +1,37 @@ +/** + * @file initSetting.js + * @author mengke01 + * @date + * @description + * 初始化设置 + */ + + +define( + function(require) { + + var menuUtil = require('../menu/util'); + var commandList = require('../menu/commandList'); + + /** + * 初始化设置选项 + */ + function initSetting() { + menuUtil.setSelected( + commandList.editor, 'setting.gridsorption', + !!this.options.sorption.enableGrid + ); + menuUtil.setSelected( + commandList.editor, 'setting.shapesorption', + !!this.options.sorption.enableShape + ); + menuUtil.setSelected( + commandList.editor, 'setting.showgrid', + !!this.options.axis.showGrid + ); + } + + + return initSetting; + } +); diff --git a/src/editor/group/ShapesGroup.js b/src/editor/group/ShapesGroup.js index a265822..e53a651 100644 --- a/src/editor/group/ShapesGroup.js +++ b/src/editor/group/ShapesGroup.js @@ -60,7 +60,7 @@ define( this.boundControl.hide(); // 设置吸附选项 - if (this.mode === 'move' && this.shapes.length && this.editor.options.sorption.enable) { + if (this.mode === 'move' && this.editor.sorption.isEnable()) { var sorptionShapes = []; var shapes = this.shapes; @@ -84,7 +84,7 @@ define( this, camera, key.ctrlKey ? false : key.altKey, key.ctrlKey ? false : key.shiftKey, - this.editor.options.sorption.enable + this.editor.sorption.isEnable() ); } else if (this.mode === 'scale') { @@ -110,7 +110,7 @@ define( this.editor.coverLayer.removeShape('bound'); this.editor.coverLayer.removeShape('boundcenter'); this.editor.fontLayer.refresh(); - if (this.mode === 'move' && this.editor.options.sorption.enable) { + if (this.mode === 'move' && this.editor.sorption.isEnable()) { this.editor.coverLayer.removeShape('sorptionX'); this.editor.coverLayer.removeShape('sorptionY'); this.editor.sorption.clear(); diff --git a/src/editor/group/moveTransform.js b/src/editor/group/moveTransform.js index 9c400cd..89e9fbe 100644 --- a/src/editor/group/moveTransform.js +++ b/src/editor/group/moveTransform.js @@ -46,9 +46,8 @@ define( sorptionShapeX = coverLayer.addShape({ type: 'line', id: 'sorptionX', - dashed: true, style: { - strokeColor: 'red' + strokeColor: '#4AFF4A' }, p0: {}, p1: {} @@ -82,9 +81,8 @@ define( sorptionShapeY = coverLayer.addShape({ type: 'line', id: 'sorptionY', - dashed: true, style: { - strokeColor: 'red' + strokeColor: '#4AFF4A' }, p0: {}, p1: {} diff --git a/src/editor/menu/editor.js b/src/editor/menu/editor.js index 68ef9fa..e6a6a8c 100644 --- a/src/editor/menu/editor.js +++ b/src/editor/menu/editor.js @@ -62,9 +62,26 @@ define( title: '切割轮廓' }, { - name: 'sorption', - title: '智能吸附', - selected: true + name: 'setting', + title: '设置', + items: [ + { + name: 'gridsorption', + title: '吸附到网格线' + }, + { + name: 'shapesorption', + title: '吸附到轮廓' + }, + { + name: 'showgrid', + title: '显示网格' + }, + { + name: 'moresetting', + title: '更多..' + } + ] }, { name: 'add_referenceline', @@ -79,7 +96,7 @@ define( title: '重置缩放' }, { - name: 'font', + name: 'setfont', title: '字形信息' } ]; diff --git a/src/editor/options.js b/src/editor/options.js index 013ebb9..50e4ec7 100644 --- a/src/editor/options.js +++ b/src/editor/options.js @@ -17,10 +17,10 @@ define( // 吸附选项 sorption: { - enable: true, // 是否启用 - grid: true, // 吸附到网格 - shape: true, // 吸附到对象 - delta: 5 // 吸附delta + enableGrid: false, // 吸附到网格 + enableShape: true, // 吸附到对象 + gridDelta: 4, // 网格delta + delta: 5 // 对象delta }, // 辅助线 @@ -45,7 +45,7 @@ define( // 轴线 axis: { - + showGrid: true, // 显示网格 gapColor: '#A6A6FF', gridColor: 'red', emColor: 'red', diff --git a/src/editor/widget/Sorption.js b/src/editor/widget/Sorption.js index 9c7abb2..bec62c9 100644 --- a/src/editor/widget/Sorption.js +++ b/src/editor/widget/Sorption.js @@ -49,9 +49,10 @@ define( * @param {Object} options 参数选项 */ function Sorption(options) { + this.gridDelta = options.gridDelta || 4; // 吸附检查offset this.delta = options.delta || 5; // 吸附检查offset - this.enableGrid = true; - this.enableShape = true; + this.enableGrid = options.enableGrid || false; + this.enableShape = options.enableShape || true; } /** @@ -135,7 +136,7 @@ define( if (this.enableGrid) { var delta = (x - this.axis.x) % this.axis.gap; - if (Math.abs(delta) < this.delta) { + if (Math.abs(delta) < this.gridDelta) { return { axis: x - delta, y: 0 @@ -162,7 +163,7 @@ define( if (this.enableGrid) { var delta = (y - this.axis.y) % this.axis.gap; - if (Math.abs(delta) < this.delta) { + if (Math.abs(delta) < this.gridDelta) { return { axis: y - delta, x: 0 @@ -173,6 +174,15 @@ define( return false; }; + /** + * 结束吸附检测 + * + * @return {this} + */ + Sorption.prototype.isEnable = function() { + return this.enableShape || this.enableGrid; + }; + /** * 结束吸附检测 * diff --git a/src/render/shape/support.js b/src/render/shape/support.js index 1279267..4b97964 100644 --- a/src/render/shape/support.js +++ b/src/render/shape/support.js @@ -16,7 +16,7 @@ define( rect: require('./Rect'), polygon: require('./Polygon'), font: require('./Font'), - glyf: require('./Glyf'), + //glyf: require('./Glyf'), path: require('./Path'), axis: require('./Axis'), graduation: require('./Graduation'), diff --git a/src/render/util/drawAxis.js b/src/render/util/drawAxis.js index f7dd71b..28384eb 100644 --- a/src/render/util/drawAxis.js +++ b/src/render/util/drawAxis.js @@ -26,34 +26,37 @@ define( var x = Math.round(config.x); var y = Math.round(config.y); - ctx.beginPath(); - ctx.strokeStyle = config.gapColor || '#A6A6FF'; + // 显示网格线 + if (false !== config.showGrid) { + ctx.beginPath(); + ctx.strokeStyle = config.gapColor || '#A6A6FF'; - // 横轴线 - for(var i = y; i < yMax; i += gap) { - ctx.moveTo(0, i); - ctx.lineTo(xMax, i); + // 横轴线 + for(var i = y; i < yMax; i += gap) { + ctx.moveTo(0, i); + ctx.lineTo(xMax, i); + } + + for(var i = y; i > 0; i -= gap) { + ctx.moveTo(0, i); + ctx.lineTo(xMax, i); + } + + + // 纵轴线 + for(var i = x; i < xMax; i += gap) { + ctx.moveTo(i, 0); + ctx.lineTo(i, yMax); + } + + for(var i = x; i > 0; i -= gap) { + ctx.moveTo(i, 0); + ctx.lineTo(i, yMax); + } + + ctx.stroke(); } - for(var i = y; i > 0; i -= gap) { - ctx.moveTo(0, i); - ctx.lineTo(xMax, i); - } - - - // 纵轴线 - for(var i = x; i < xMax; i += gap) { - ctx.moveTo(i, 0); - ctx.lineTo(i, yMax); - } - - for(var i = x; i > 0; i -= gap) { - ctx.moveTo(i, 0); - ctx.lineTo(i, yMax); - } - - ctx.stroke(); - ctx.beginPath(); ctx.strokeStyle = config.gridColor || 'red';