如何在縮放後對圖層進行緩存

Question

我有問題，圖層縮放後圖層看上去很「難看」。

var stage = new Kinetic.Stage({ 
    container: "canvas", width: 500, height: 200, 
}); 

var myLayer = new Kinetic.Layer(); 
myLayer.x(0); 
myLayer.y(0); 
myLayer.width(300); 
myLayer.height(200); 
myLayer.clearBeforeDraw(true); 

var simpleText = new Kinetic.Text({ 
    x: 2, 
    y: 10, 
    text: 'Text', 
    fontSize: 30, 
    fontFamily: 'Calibri', 
    fill: 'green' 
}); 
simpleText.cache(); 
myLayer.add(simpleText); 

stage.add(myLayer) 
stage.scaleX(4); 
stage.scaleY(4); 
stage.draw(); 

它看起來像kinetic首先繪製圖層，然後緩存它，最後縮放圖層。

有人能幫我確定如何緩存縮放圖層嗎？

Answer 1

當您執行simpleText.cache時，您正在創建文本的圖像。

當您縮放該圖像（任何圖像）4x時，您將始終產生失真。

爲避免失真，請在simpleText中使用較大的字體而不是縮放。