From b6b0cc322e614c0c9bfb3fe41db9181f6e277034 Mon Sep 17 00:00:00 2001 From: mkwiser Date: Thu, 16 Oct 2014 23:10:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0=E9=80=89?= =?UTF-8?q?=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/command/support.js | 6 ++- src/editor/controller/font.js | 9 ++-- src/editor/controller/initAxis.js | 11 ++-- src/editor/controller/initLayer.js | 13 ++--- src/editor/controller/initRender.js | 12 ++--- src/editor/main.js | 11 ++-- src/editor/mode/referenceline.js | 6 ++- src/editor/options.js | 78 +++++++++++++++++++++++++++++ src/render/Layer.js | 4 +- src/render/Render.js | 6 +-- src/render/main.js | 3 +- 11 files changed, 122 insertions(+), 37 deletions(-) create mode 100644 src/editor/options.js diff --git a/src/editor/command/support.js b/src/editor/command/support.js index d371d65..6bd2a0b 100644 --- a/src/editor/command/support.js +++ b/src/editor/command/support.js @@ -132,7 +132,8 @@ define( this.axisLayer.addShape('line', { p0: { x: x - } + }, + style: this.options.referenceline.style }); } @@ -140,7 +141,8 @@ define( this.axisLayer.addShape('line', { p0: { y: y - } + }, + style: this.options.referenceline.style }); } this.axisLayer.refresh(); diff --git a/src/editor/controller/font.js b/src/editor/controller/font.js index feb2dab..e66f267 100644 --- a/src/editor/controller/font.js +++ b/src/editor/controller/font.js @@ -30,7 +30,7 @@ define( // 坐标原点位置，基线原点 var offsetX = (width - options.unitsPerEm) / 2; - var offsetY = (height + (options.unitsPerEm + options.metrics.WinDecent)) / 2; + var offsetY = (height + (options.unitsPerEm + options.metrics.decent)) / 2; // 构造形状集合 var shapes = contours.map(function(path) { @@ -40,17 +40,18 @@ define( return shape; }); + font.rightSideBearing = offsetX + font.advanceWidth; + this.font = font; // 重置形状 this.render.reset(); - var rightSideBearing = offsetX + font.advanceWidth; initAxis.call(this, { x: offsetX, y: offsetY, - rightSideBearing: rightSideBearing, - axisGap: 100 + rightSideBearing: font.rightSideBearing, + axisGap: this.options.axisGap || 100 }); var fontLayer = this.render.painter.getLayer('font'); diff --git a/src/editor/controller/initAxis.js b/src/editor/controller/initAxis.js index c8419c0..0773ea8 100644 --- a/src/editor/controller/initAxis.js +++ b/src/editor/controller/initAxis.js @@ -10,6 +10,8 @@ define( function(require) { + var lang = require('common/lang'); + /** * 初始化坐标系 * @@ -18,19 +20,14 @@ define( function initAxis(origin) { // 绘制轴线 - this.axis = this.axisLayer.addShape('axis', { + this.axis = this.axisLayer.addShape('axis', lang.extend(this.options.axis, { id: 'axis', x: origin.x, y: origin.y, - gap: origin.axisGap, unitsPerEm: this.options.unitsPerEm, metrics: this.options.metrics, - // 刻度配置 - graduation: { - gap: origin.axisGap - }, selectable: false - }); + })); this.rightSideBearing = this.axisLayer.addShape('line', { id: 'rightSideBearing', diff --git a/src/editor/controller/initLayer.js b/src/editor/controller/initLayer.js index 21f4afa..4f7c6e0 100644 --- a/src/editor/controller/initLayer.js +++ b/src/editor/controller/initLayer.js @@ -9,26 +9,27 @@ define( function(require) { - + var lang = require('common/lang'); + /** * 初始化层 */ function initLayer() { - this.coverLayer = this.render.addLayer('cover', { + this.coverLayer = this.render.addLayer('cover', lang.extend(this.options.coverLayer, { level: 30, fill: false, strokeColor: 'green', fillColor: 'white' - }); + })); - this.fontLayer = this.render.addLayer('font', { + this.fontLayer = this.render.addLayer('font', lang.extend(this.options.fontLayer, { level: 20, lineWidth: 1, strokeColor: '#999', - fillColor: '#333', + fillColor: '#555', strokeSeparate: false - }); + })); this.axisLayer = this.render.addLayer('axis', { level: 10, diff --git a/src/editor/controller/initRender.js b/src/editor/controller/initRender.js index 1de110c..bcb478c 100644 --- a/src/editor/controller/initRender.js +++ b/src/editor/controller/initRender.js @@ -15,7 +15,8 @@ define( var modeSupport = require('../mode/support'); var pathAdjust = require('graphics/pathAdjust'); var computeBoundingBox = require('graphics/computeBoundingBox'); - + var selectShape = require('render/util/selectShape'); + /** * 右键点击处理 */ @@ -145,15 +146,14 @@ define( return; } - if(me.mode === modeSupport.bound) { - me.setMode('point'); + var result = render.getLayer('font').getShapeIn(e); + if(result) { + var shape = selectShape(result); + me.setMode('point', shape); } else if(me.mode === modeSupport.point){ me.setMode(); } - else { - me.setMode('point'); - } }); render.capture.on('rightdown', function(e) { diff --git a/src/editor/main.js b/src/editor/main.js index 6d3e7e7..d35e7af 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -12,6 +12,9 @@ define( var render = require('render/main'); var Editor = require('./Editor'); + var defaultOptions = require('./options'); + var lang = require('common/lang'); + var exports = {}; /** @@ -27,9 +30,11 @@ define( throw 'need main element'; } - options = options || {}; - var editor = new Editor(main, options); - var opt = options.renderOptions || {}; + options = lang.extend({}, defaultOptions, options); + + var editor = new Editor(main, options.editor); + var opt = options.render || {}; + opt.controller = editor; render.create(main, opt); return editor; diff --git a/src/editor/mode/referenceline.js b/src/editor/mode/referenceline.js index 11b6ee8..79c3489 100644 --- a/src/editor/mode/referenceline.js +++ b/src/editor/mode/referenceline.js @@ -40,7 +40,8 @@ define( this.currentLine = this.axisLayer.addShape('line', { p0: { x: e.x - } + }, + style: this.options.referenceline.style }); this.render.setCursor('col-resize'); } @@ -48,7 +49,8 @@ define( this.currentLine = this.axisLayer.addShape('line', { p0: { y: e.y - } + }, + style: this.options.referenceline.style }); this.render.setCursor('row-resize'); } diff --git a/src/editor/options.js b/src/editor/options.js new file mode 100644 index 0000000..0bc3656 --- /dev/null +++ b/src/editor/options.js @@ -0,0 +1,78 @@ +/** + * @file options.js + * @author mengke01 + * @date + * @description + * 编辑器选项 + */ + +define( + function(require) { + var options = { + + // 编辑器相关 + editor: { + + unitsPerEm: 512, // 框大小 + + // 字体测量规格 + metrics: { + ascent: 480, // 上升 + decent: -33, // 下降 + 'x-Height': 256, // x高度 + 'CapHeight': 358 // 大写字母高度 + }, + + // 辅助线 + referenceline: { + style: { + strokeColor: 'darkblue' + } + }, + + // 覆盖层 + coverLayer: { + strokeColor: 'green', + fillColor: 'white' + }, + + // 字体层 + fontLayer: { + lineWidth: 1, + strokeColor: '#999', + fillColor: '#555', + }, + + // 轴线 + axis: { + gap: 100, + gapColor: '#A6A6FF', + gridColor: 'red', + emColor: 'red', + // 刻度 + graduation: { + gap: 100, + thickness: 20, // 厚度 + markHeight: 3, // 标记高度 + markBackgroundColor: '#EEE', // 背景色 + markColor: '#000', // 前景色 + color: '#000' // 文字颜色 + } + }, + // 命令栏 + contextMenu: {} + }, + + + // 渲染器相关 + render: { + defaultRatio: 1.2, // 默认的缩放比例 + minScale: 0.2, // 最小缩放 + maxScale: 100, //最大缩放 + enableScale: true, // 是否允许缩放 + enableResize: true // 是否允许大小改变 + } + }; + return options; + } +); diff --git a/src/render/Layer.js b/src/render/Layer.js index 18fdfa5..6a85d53 100644 --- a/src/render/Layer.js +++ b/src/render/Layer.js @@ -115,10 +115,10 @@ define( setContextStyle(context, shape.style); drawer.draw(context, shape); - if(false !== options.fill) { + if(false !== options.fill || shape.style.fill) { context.fill(); } - if(false !== options.stroke) { + if(false !== options.stroke || shape.style.stroke) { context.stroke(); } diff --git a/src/render/Render.js b/src/render/Render.js index 76f8e13..695030f 100644 --- a/src/render/Render.js +++ b/src/render/Render.js @@ -49,9 +49,7 @@ define( // 是否允许缩放 if(this.options.enableScale) { this.capture.on('wheel', function(e) { - if (e.ctrlKey) { - e.originEvent.stopPropagation(); - e.originEvent.preventDefault(); + if (e.altKey) { var defaultRatio = me.options.defaultRatio || 1.2; var ratio = e.delta > 0 ? defaultRatio : 1 / defaultRatio; var toScale = me.camera.scale * ratio; @@ -102,7 +100,7 @@ define( this.options = lang.extend( { defaultRatio: 1.2, // 默认的缩放比例 - minScale: 0.1, // 最小缩放 + minScale: 0.2, // 最小缩放 maxScale: 100, //最大缩放 enableScale: true, // 是否允许缩放 enableResize: true // 是否允许大小改变 diff --git a/src/render/main.js b/src/render/main.js index bafe9e5..e7297a5 100644 --- a/src/render/main.js +++ b/src/render/main.js @@ -23,15 +23,16 @@ define( options = options || {}; var render = new Render(main, options); var controller = options.controller; + delete options.controller; // 设置render的默认控制器 if (!controller) { controller = new Controller(); } + controller.setRender(render); - delete options.controller; return render; };