jCanvas - 드래그 앤 드롭시 배율

Question

캔버스를 다른 레이어로 칠했습니다. 캔버스를 확대/축소하면 더 이상 올바른 위치가 표시되지 않습니다. 그러나 연기를하지 않고 확대 할 수 있기를 바랍니다. 캔버스 자체가 확대됩니다. 당신이 당신의 캔버스에 jCanvas 레이어로 작업하기 때문에

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

Answer 1

레이어가 다시 그려 때마다, 캔버스의 크기가 조절 될 필요가 :

이 제 기능입니다.

따라서 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(); 
} 

BTW, 내 예제에서 사용하고있어 scale 속성은 당신에 사용하는 scaleX 및 scaleY 특성을 모두 변경; 편리 성을 위해 단지 scale 속성이 있습니다.

마지막으로 여기에이 모든 것을 구현하는 a working JSFiddle demo이 있습니다.