jCanvas - canvas scale
On canvas scale - the handler doesn't scale correctly
HTML
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.js"></script>
<script src="https://cdn.rawgit.com/caleb531/jcanvas/master/plugins/jcanvas-handles.js"></script>
<button value="2">Zoom in</button>
<button value="1">Zoom reset</button>
<button value="0.5">Zoom out</button>
<canvas width="500" height="500"></canvas>
JavaScript
var canvas = $('canvas');
canvas.scaleCanvas({
layer: true,
name: 'scaleCanvas',
scale: 1
});
// Add rectangle layer
canvas.addLayer({
name: 'canvas',
type: 'rectangle',
fromCenter: false,
strokeWidth: 1,
x: 10,
y: 10,
width: 100,
height: 100,
fillStyle: '#000099',
strokeStyle: '#000099',
resizeFromCenter: false,
handlePlacement: 'both',
handle: {
type: 'rectangle',
fillStyle: '#ff3300',
strokeStyle: '#ff3300',
strokeWidth: 1,
width: 7, height: 7,
cornerRadius: 1
}
});
//canvas.restoreCanvas({
//layer: true,
//name: 'restoreCanvas'
//});
// Initially disable handles
//canvas.setLayerGroup(canvas.getLayer('canvas')._handles, {
//visible: false
//});
// Draw the layers
canvas.drawLayers();
// On a button click scale the canvas
$('button').on('click', function() {
var zoomLevel = $(this).val();
// Initially disable draggability and handles
canvas.setLayer('canvas', {
draggable: true
});
//console.log(canvas.getLayer('canvas')._handles);
//canvas.setLayerGroup(canvas.getLayer('canvas')._handles, {
//visible: true
// });
canvas.setLayer('scaleCanvas', {
scale: zoomLevel
}).drawLayers();
});