HTML5 Canvas:在调整大小时设置上下文

时间:2017-02-27 22:44:14

标签: javascript html5 html5-canvas createjs

我有一个使用HTML5 Canvas(createjs)的项目,我遇到了文本笔划尖峰的问题,这意味着我必须设置2d上下文的miterlimit。但是,父窗口(我无法控制)在调整窗口大小时缩放画布,这显然会重置画布上下文。

现在,我想避免在客户端中放置一个onresize事件 - 我首先想到的只是使用createjs Ticker:

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
    var ctx = canvas.getContext('2d');
    ctx.miterLimit = 2;
}

虽然这看起来有点浪费,但是有没有更有效的方法来实现这一点,而不使用DOM事件?

1 个答案:

答案 0 :(得分:0)

您的方法可能有效,但它绝对是一种黑客行为,因为您不能指望维护上下文属性,或者不会将它们应用于错误的位置。

如果您想要修改显示列表以更新上下文,可以使用“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

干杯。