Question

我画了一个不同图层的画布。如果我缩放画布，则不再更正位置。但我想能够缩放，没有任何延期。画布本身是缩放的。

这是我的功能：

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

Answer 1

因为您正在使用画布上的jCanvas图层，所以只要重新绘制图层，就需要缩放画布。

因此，您必须通过将scaleCanvas()属性设置为layer，将true调用到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();
}

BTW，我在示例中使用的scale属性会更改您在其中使用的scaleX和scaleY属性; scale属性只是为了方便而存在。

最后，这是实现所有这一切的a working JSFiddle demo。

画布 - 缩放时拖放

1 个答案: