modify side dist

This commit is contained in:
kekee000 2016-03-22 14:23:54 +08:00
parent c9c2528ee7
commit 0057a5baa0
7 changed files with 118 additions and 23 deletions

View File

@ -31,12 +31,18 @@ define(
}));
// 右支撑
this.rightSideBearing = this.referenceLineLayer.addShape('line', {
this.rightSideBearing = this.referenceLineLayer.addShape('gridarrow', {
id: 'rightSideBearing',
p0: {
p0 : {
x: options.unitsPerEm / 2
},
arrow: {
y: 22
},
style: {
fill: true,
stroke: true,
fillColor: 'blue',
strokeColor: 'blue'
}
});

View File

@ -30,7 +30,7 @@ define(
else if (this._dragMode === mode.newLine) {
if (e.startX <= 20 && e.x > 20) {
this.currentLine = this.referenceLineLayer.addShape('line', {
this.currentLine = this.referenceLineLayer.addShape('gridarrow', {
p0: {
x: e.x
},
@ -40,7 +40,7 @@ define(
this.render.setCursor('col-resize');
}
else if (e.startY <= 20 && e.y > 20) {
this.currentLine = this.referenceLineLayer.addShape('line', {
this.currentLine = this.referenceLineLayer.addShape('gridarrow', {
p0: {
y: e.y
},

View File

@ -23,7 +23,7 @@ define(
// 辅助线
referenceline: {
style: {
strokeColor: '#0FF'
strokeColor: '#746AFE'
}
},
@ -44,8 +44,9 @@ define(
// 轴线
axis: {
showGrid: true, // 显示网格
gapColor: '#A6A6FF', // 网格线颜色
metricsColor: 'red', // 测量辅助线颜色
gapColor: '#DEDCFE', // 网格线颜色
axisColor: 'red',
metricsColor: '#FF9592', // 测量辅助线颜色
emColor: 'red', // em框颜色
// 字体测量规格

View File

@ -68,7 +68,7 @@ define(
}
program.loading.show(i18n.lang.msg_sync_success, 400);
}, function (data) {
if (options.newProject && data.status === 500) {
if (options.newProject && data.status === 0x1) {
alert(i18n.lang.msg_error_sync_font);
}

View File

@ -0,0 +1,88 @@
/**
* @file 带箭头的竖直或者水平线
* @author mengke01(kekee000@gmail.com)
*/
define(
function (require) {
var ARROW_HEIGHT = 6; // 箭头高度
var ARROW_WIDTH = 3; // 箭头宽度
var proto = {
type: 'gridarrow',
adjust: function (shape, camera) {
var center = camera.center;
var ratio = camera.ratio;
if (undefined !== shape.p0.x) {
shape.p0.x = ratio * (shape.p0.x - center.x) + center.x;
}
else {
shape.p0.y = ratio * (shape.p0.y - center.y) + center.y;
}
return shape;
},
move: function (shape, mx, my) {
if (undefined !== shape.p0.x) {
shape.p0.x += mx;
}
else {
shape.p0.y += my;
}
return shape;
},
getRect: function (shape) {
return false;
},
isIn: function (shape, x, y) {
// 单点模式
return undefined !== shape.p0.x && Math.abs(shape.p0.x - x) < 4
|| undefined !== shape.p0.y && Math.abs(shape.p0.y - y) < 4;
},
/**
* 绘制一个shape对象
*
* @param {CanvasContext} ctx canvas的context
* @param {Object} shape shape数据
* @param {number} shape.p0.x x坐标位置
* @param {number} shape.p0.y y坐标位置
* @param {number} shape.p0.y y坐标位置
* @param {Object} shape.arrow 箭头配置数据
*/
draw: function (ctx, shape) {
if (undefined !== shape.p0.x) {
x0 = Math.round(shape.p0.x);
ctx.moveTo(x0, 0);
ctx.lineTo(x0, ctx.canvas.height);
if (shape.arrow) {
ctx.moveTo(x0, shape.arrow.y);
ctx.lineTo(x0 - ARROW_WIDTH, shape.arrow.y + ARROW_HEIGHT);
ctx.lineTo(x0 + ARROW_WIDTH, shape.arrow.y + ARROW_HEIGHT);
ctx.lineTo(x0, shape.arrow.y);
}
}
else {
y0 = Math.round(shape.p0.y);
ctx.moveTo(0, y0);
ctx.lineTo(ctx.canvas.width, y0);
if (shape.arrow) {
ctx.moveTo(shape.arrow.x, y0);
ctx.lineTo(shape.arrow.x + ARROW_HEIGHT, y0 - ARROW_WIDTH);
ctx.lineTo(shape.arrow.x + ARROW_HEIGHT, y0 + ARROW_WIDTH);
ctx.lineTo(shape.arrow.x, y0);
}
}
}
};
return require('./Shape').derive(proto);
}
);

View File

@ -17,7 +17,8 @@ define(
axis: require('./Axis'),
graduation: require('./Graduation'),
line: require('./Line'),
beziercurve: require('./BezierCurve')
beziercurve: require('./BezierCurve'),
gridarrow: require('./GridArrow')
};
return support;

View File

@ -55,14 +55,9 @@ define(
ctx.stroke();
}
// metrics
ctx.beginPath();
ctx.strokeStyle = config.metricsColor || 'red';
ctx.moveTo(0, y);
ctx.lineTo(xMax, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, yMax);
ctx.strokeStyle = config.metricsColor || '#FF6E67';
// 绘制辅助线
var metrics = config.metrics;
var thickness = config.graduation.thickness || 22;
@ -72,21 +67,25 @@ define(
var lineY = y - Math.round(metrics[line]);
dashedLineTo(ctx, 0, lineY, xMax, lineY, 4);
});
ctx.stroke();
// axis
ctx.beginPath();
ctx.strokeStyle = config.axisColor || 'red';
ctx.moveTo(0, y);
ctx.lineTo(xMax, y);
ctx.moveTo(x, 0);
ctx.lineTo(x, yMax);
ctx.stroke();
// text
ctx.save();
ctx.scale(0.8, 0.8);
metricsLines.forEach(function (line) {
ctx.fillText(line, thickness * 1.25, (y - metrics[line]) * 1.25 - 2);
});
ctx.fillText('Baseline', thickness * 1.25, y * 1.25 - 2);
ctx.restore();
ctx.stroke();
ctx.stroke();
}
return drawAxis;