jCanvas - Drag n Drop when scaling

Question

I have painted a canvas with different layers. If I zoom the canvas, then no longer correct positions. But I want to be able to zoom, without any postponements. The canvas itself is zoomed.

This is my function:

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

score 1 · Answer 1 · answered Dec 15 '13 at 22:33

Because you are working with jCanvas layers on your canvas, the canvas needs to be scaled whenever layers are redrawn.

Therefore, you must make make your scaleCanvas() call into a jCanvas layer (yes, you can actually do this) by setting its layer property to 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 
});

However, in order for this to work properly, you should create this scaleCanvas layer before all other layers, and then you can later change its scale property layer.

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

BTW, the scale property that I'm using in my examples changes both the scaleX and scaleY properties that you are using in yours; the scale property simply exists for convenience.

Finally, here is a working JSFiddle demo that implements all of this.

jCanvas - Drag n Drop when scaling

1 Answers1