add window resize
This commit is contained in:
mkwiser
parent
d65f230e0f
commit
f151262173
@ -140,13 +140,68 @@ define(
|
||||
return cloned;
|
||||
}
|
||||
|
||||
|
||||
// Returns a function, that, when invoked, will only be triggered at most once
|
||||
// during a given window of time.
|
||||
// @see underscore.js
|
||||
function throttle(func, wait) {
|
||||
var context, args, timeout, result;
|
||||
var previous = 0;
|
||||
var later = function() {
|
||||
previous = new Date;
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
};
|
||||
return function() {
|
||||
var now = new Date;
|
||||
var remaining = wait - (now - previous);
|
||||
context = this;
|
||||
args = arguments;
|
||||
if (remaining <= 0) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
previous = now;
|
||||
result = func.apply(context, args);
|
||||
}
|
||||
else if (!timeout) {
|
||||
timeout = setTimeout(later, remaining);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
// Returns a function, that, as long as it continues to be invoked, will not
|
||||
// be triggered. The function will be called after it stops being called for
|
||||
// N milliseconds. If `immediate` is passed, trigger the function on the
|
||||
// leading edge, instead of the trailing.
|
||||
// @see underscore.js
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout, result;
|
||||
return function() {
|
||||
var context = this,
|
||||
args = arguments;
|
||||
var later = function() {
|
||||
timeout = null;
|
||||
if (!immediate) result = func.apply(context, args);
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) result = func.apply(context, args);
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
var exports = {
|
||||
extend: extend,
|
||||
bind: bind,
|
||||
inherits: inherits,
|
||||
curry: curry,
|
||||
uncurry: generic,
|
||||
clone: clone
|
||||
clone: clone,
|
||||
throttle: throttle,
|
||||
debounce: debounce
|
||||
};
|
||||
|
||||
// 生成 isXXX方法
|
||||
|
||||
@ -77,6 +77,11 @@ define(
|
||||
listener = type;
|
||||
type = '*';
|
||||
}
|
||||
else if (typeof type === 'undefined') {
|
||||
delete this._listeners;
|
||||
this._listeners = {};
|
||||
return this;
|
||||
}
|
||||
|
||||
this._listeners = this._listeners || {};
|
||||
var listeners = this._listeners[type];
|
||||
|
||||
@ -157,12 +157,14 @@ define(
|
||||
* 注销
|
||||
*/
|
||||
Editor.prototype.dispose = function() {
|
||||
this.un();
|
||||
this.contextMenu.dispose();
|
||||
this.render && this.render.dispose();
|
||||
this.history.reset();
|
||||
this.options = this.contextMenu = this.render = null;
|
||||
this.fontLayer = this.coverLayer = this.axisLayer = null;
|
||||
this.axis = this.rightSideBearing = this.font = null;
|
||||
this.mode = null;
|
||||
this.history.reset();
|
||||
this.history = null;
|
||||
};
|
||||
|
||||
|
||||
@ -205,6 +205,15 @@ define(
|
||||
|
||||
me.mode.keydown && me.mode.keydown.call(me, e);
|
||||
});
|
||||
|
||||
|
||||
render.on('resize', function(e) {
|
||||
me.render.move(
|
||||
(e.size.width - e.prevSize.width) / 2,
|
||||
(e.size.height - e.prevSize.height) / 2
|
||||
);
|
||||
me.render.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return initRender;
|
||||
|
||||
@ -70,9 +70,7 @@ define(
|
||||
this.layers = [];
|
||||
|
||||
this.main.style.position = 'relative';
|
||||
this.width = this.options.width || this.main.clientWidth;
|
||||
this.height = this.options.height || this.main.clientHeight;
|
||||
|
||||
this.resetSize();
|
||||
this.camera = new Camera({
|
||||
x: this.width / 2,
|
||||
y: this.height /2
|
||||
@ -324,6 +322,33 @@ define(
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置大小
|
||||
*/
|
||||
resetSize: function() {
|
||||
|
||||
if(this.options.width) {
|
||||
this.main.style.width = this.options.width + 'px';
|
||||
}
|
||||
|
||||
if(this.options.height) {
|
||||
this.main.style.height = this.options.height + 'px';
|
||||
}
|
||||
|
||||
var width = this.main.clientWidth;
|
||||
var height = this.main.clientHeight;
|
||||
|
||||
this.layers.forEach(function(layer) {
|
||||
document.getElementById(layer.id).width = width;
|
||||
document.getElementById(layer.id).height = height;
|
||||
});
|
||||
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取操作面板大小
|
||||
*
|
||||
@ -342,12 +367,14 @@ define(
|
||||
* @return {this}
|
||||
*/
|
||||
reset: function() {
|
||||
|
||||
this.clearShapes();
|
||||
this.resetSize();
|
||||
|
||||
this.camera.reset({
|
||||
x: this.width / 2,
|
||||
y: this.height /2
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
@ -62,6 +62,23 @@ define(
|
||||
console.timeEnd('refresh');
|
||||
});
|
||||
}
|
||||
|
||||
var me = this;
|
||||
me._resizeObserver = lang.debounce(function(e) {
|
||||
|
||||
var prevSize = me.painter.getSize();
|
||||
me.painter.resetSize();
|
||||
var size = me.painter.getSize();
|
||||
if(size.width != prevSize.width || size.height != prevSize.height) {
|
||||
me.fire('resize', {
|
||||
size: size,
|
||||
prevSize: prevSize
|
||||
});
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// 改变大小
|
||||
window.addEventListener('resize', me._resizeObserver, false);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -175,11 +192,18 @@ define(
|
||||
*
|
||||
*/
|
||||
Render.prototype.dispose = function() {
|
||||
|
||||
this.un();
|
||||
|
||||
// 改变大小
|
||||
window.removeEventListener('resize', this._resizeObserver, false);
|
||||
this._resizeObserver = null;
|
||||
|
||||
this.painter.dispose();
|
||||
this.capture.dispose();
|
||||
this.keyCapture.dispose();
|
||||
this.un();
|
||||
this.main = this.options = null;
|
||||
|
||||
this.main = this.options = this.camera = null;
|
||||
this.painter = this.capture = this.keyCapture = null;
|
||||
};
|
||||
|
||||
|
||||
@ -57,25 +57,29 @@ define(
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = config.gridColor || 'red';
|
||||
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(xMax, y);
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, yMax);
|
||||
|
||||
// 绘制辅助线
|
||||
var metrics = config.metrics;
|
||||
var thickness = config.graduation.thickness || 22;
|
||||
for (var line in metrics) {
|
||||
var lineY = y - Math.round(metrics[line]);
|
||||
dashedLineTo(ctx, 0, lineY, xMax, lineY, 4);
|
||||
ctx.fillText(line, thickness, lineY - 2);
|
||||
}
|
||||
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(xMax, y);
|
||||
ctx.fillText('Baseline', thickness, y - 2);
|
||||
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, yMax);
|
||||
ctx.save();
|
||||
ctx.scale(0.8, 0.8);
|
||||
for (var line in metrics) {
|
||||
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();
|
||||
|
||||
|
||||
// em 框
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = config.emColor || 'red';
|
||||
|
||||
@ -95,6 +95,7 @@ define(
|
||||
}
|
||||
|
||||
// 绘制轴线文字，这里由于canvas不支持小字体，因此进行缩放后绘制
|
||||
ctx.save();
|
||||
ctx.scale(0.8, 0.8);
|
||||
var textOffset = thickness - 8; // 文本偏移
|
||||
for(var axis = x, i = 0; axis < width; i++, axis += markSize) {
|
||||
@ -124,8 +125,7 @@ define(
|
||||
}
|
||||
}
|
||||
|
||||
ctx.scale(1.25, 1.25);
|
||||
|
||||
ctx.restore();
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user