增加参数选项
This commit is contained in:
mkwiser
parent
972ec2de3c
commit
b6b0cc322e
@ -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();
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
}
|
||||
|
||||
78
src/editor/options.js
Normal file
78
src/editor/options.js
Normal file
@ -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;
|
||||
}
|
||||
);
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -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 // 是否允许大小改变
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user