jquery - jCanvas - 缩放时拖放

Question

我画了一个不同层次的画布。如果我缩放画布，则不再正确的位置。但我希望能够放大，没有任何延迟。画布本身已缩放。

这是我的功能：

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

Answer 1

因为您在画布上使用 jCanvas 图层，所以无论何时重绘图层，都需要缩放画布。

因此，您必须通过将其属性设置为来scaleCanvas()调用 jCanvas 层（是的，您实际上可以这样做）。layertrue

$("#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 演示。