modify side dist
This commit is contained in:
parent
c9c2528ee7
commit
0057a5baa0
@ -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'
|
||||
}
|
||||
});
|
||||
|
@ -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
|
||||
},
|
||||
|
@ -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框颜色
|
||||
|
||||
// 字体测量规格
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
88
src/render/shape/GridArrow.js
Normal file
88
src/render/shape/GridArrow.js
Normal 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);
|
||||
}
|
||||
);
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user