jCanvas -缩放时拖n下降

Question

我画了一幅不同层次的画布。如果我放大画布，那么就不再正确的位置。但我希望能够放大，不需要任何延迟。画布本身被放大了。

这是我的职责：

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

Answer 1

因为您正在使用画布上的jCanvas层，因此每当层被重新绘制时，画布都需要缩放。

因此，必须将scaleCanvas()调用设置为jCanvas层(是的，实际上可以这样做)，方法是将其layer属性设置为true。

$("#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属性只是为了方便而存在。

最后，这里是实现所有这些的一个工作的JSFiddle演示。