画布 - 缩放时拖放答案

【问题标题】：jCanvas - Drag n Drop when scaling画布 - 缩放时拖放
【发布时间】：2013-12-31 22:42:11
【问题描述】：

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

这是我的功能：

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

【问题讨论】：

标签： jquery drag-and-drop scale jcanvas

【解决方案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 实现了所有这些。

【讨论】：