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畫布：調整大小的設置上下文

回答

相關問題