HTML5画布：调整大小的设置上下文

我有一个项目使用HTML5画布（createjs），我有问题的文字笔画尖刺，这意味着我必须设置2d上下文的斜角限制。然而，父窗口（我无法控制）在调整窗口大小时缩放画布，这显然会重置画布上下文。HTML5画布：调整大小的设置上下文

现在，我要避免把一个在onResize事件在客户端里面 - 我的第一个想法就是使用createjs北京时间这样的：

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

虽然这似乎有点浪费，有没有更有效的方法这样做，而不使用DOM事件？

来源

2017-02-27 LordMysterious

搭配'resize'是合适和直接的。如果您的画布内容是静态的，只需创建第二个内存画布并将静态内容保存到第二个画布上。在调整大小时，将第二个画布'drawImage'放到第一个画布上 - 可选择缩放。如果您的内容不是静态的，则必须使用绘图命令重新渲染内容或使用第二个画布创意。不要在不断重复的“tick”处理程序中重绘，因为如果内容自上次打勾后未发生更改，则可能会重新进行不必要的重绘。 – markE

您的方法可能工作，但它绝对是黑客，因为你不能指望上下文属性将被维护，或者他们不会被应用在错误的地方。

如果要修补的显示列表更新的背景下，你可以使用“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

干杯。

来源

2017-02-28 17:01:11 Lanny

这绝对有效，非常感谢。 – LordMysterious

HTML5画布：调整大小的设置上下文

回答

相关问题