[英]HTML5 Canvas: Setting context on resize
我有一个使用HTML5 Canvas(createjs)的项目,但文本笔触出现尖峰问题,这意味着我必须设置2d上下文的下限。 但是,父窗口(我无法控制)在调整窗口大小时缩放画布,这显然会重置画布上下文。
现在,我想避免在客户端中放置onresize事件-我的第一个想法就是使用createjs Ticker:
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
var ctx = canvas.getContext('2d');
ctx.miterLimit = 2;
}
尽管这似乎有些浪费,但是有没有使用DOM事件的更有效方法呢?
您的方法可能有效,但是绝对可以避免,因为您不能期望上下文属性会被保留,或者它们不会在错误的位置应用。
如果确实要修补显示列表以更新上下文,则可以使用“ drawstart”事件,该事件在绘制显示列表之前触发:
stage.on("drawstart", function(e) {
var ctx = stage.canvas.getContext("2d");
ctx.miterLimit = 2;
});
但是,如果您想要一种更好的特定于实例的方法,则可以扩展Text类以附加所需的任何上下文属性。 这是一个简单的示例,其中只要绘制文本,就会存储并应用miterLimit
。 在此示例中,您可以创建多个实例并为其设置不同的斜接限制。 请注意,您可能还希望支持其他属性,例如lineJoin。
http://jsfiddle.net/cr4hmgqp/2/
(function() {
"use strict"
function MiterText(text, font, color, miterLimit) {
this.Text_constructor(text,font,color);
this.miterLimit = miterLimit;
};
var p = createjs.extend(MiterText, createjs.Text);
p.draw = function(ctx, ignoreCache) {
ctx.miterLimit = this.miterLimit;
if (this.Text_draw(ctx, ignoreCache)) { return true; }
return true;
};
p.clone = function() {
return this._cloneProps(new MiterText(this.text, this.font, this.color, this.miterLimit));
};
createjs.MiterText = createjs.promote(MiterText, "Text");
}());
请注意,希望在下一版本的EaselJS中解决此问题。 这是跟踪的问题: https : //github.com/CreateJS/EaselJS/issues/781
干杯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.