jCanvas - 在縮放時拖放n拖放

Question

我畫了不同圖層的畫布。如果我放大畫布，則不再修正位置。但我希望能夠放大，沒有任何延期。畫布本身被放大。

這是我的函數：

function zoomCanvas(diff){ 
    $("#myCanvas").scaleCanvas({ 
    x: 0, y: 0, 
    scaleX: diff, scaleY: diff 
    }) 
    .drawLayers(); 
} 

Answer 1

因爲你與jCanvas層畫布上工作，畫布需要進行縮放，每當層重繪。

因此，通過將layer屬性設置爲true，您必須使您的scaleCanvas()呼叫進入jCanvas圖層（是的，您實際上可以這樣做）。

$("#myCanvas").scaleCanvas({ 
    layer: true, 
    name: "zoom", // give layer a name so we can easily retrieve it later 
    x: 0, y: 0, 
    scale: 1 // set its scale factor to 1 
}); 

然而，爲了使其正常工作，你應該所有其他層之前創建此scaleCanvas層，然後你可以改變它的scale屬性層。

// Function for setting zoom level of canvas 
function zoomCanvas(diff) { 
    // Update zoom level 
    $("#myCanvas").setLayer('zoom', { 
     scale: diff 
    }) 
    // Redraw canvas 
    .drawLayers(); 
} 

順便說一句，在scale屬性，我用我的例子同時改變你使用在你的scaleX和scaleY性能; scale屬性只是爲了方便而存在。

最後，這裏是a working JSFiddle demo，它實現了所有這些。