ZoomIn ZoomOut in Fabric.js
https://groups.google.com/forum/?fromgroups#!topic/fabricjs/WQ0jegaIFCY
by duckywang1
HTML
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<script src="https://cdn.bootcss.com/fabric.js/2.2.0/fabric.js"></script>
<button id="btnZoomIn">ZoomIn</button> <button id="btnZoomOut">ZoomOut</button> <button id="btnResetZoom">Reset Zoom</button>
<br/>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1pz;
border-style: solid;
border-color: #000;
}
JavaScript
var src = "http://fabricjs.com/lib/pug.jpg";
var copiedObject;
var copiedObjects = new Array();
var canvasScale = 1;
var SCALE_FACTOR = 1.2;
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";
// text
var text = new fabric.Text('Text inside canvas', {
left: 200,
top: 50
});
text.hasRotatingPoint = true;
canvas.add(text);
// circle
var circle = new fabric.Circle({
left: 200,
top: 150,
radius: 50,
fill: "#dd0000"
});
circle.hasRotatingPoint = true;
canvas.add(circle);
//image
fabric.util.loadImage(src, function(img) {
var object = new fabric.Image(img);
object.set({
left: 200,
top: 300
});
object.hasRotatingPoint = true;
object.scaleX = object.scaleY = .25;
canvas.add(object);
canvas.renderAll();
});
canvas.renderAll();
// button Zoom In
$("#btnZoomIn").click(function(){
zoomIn();
});
// button Zoom Out
$("#btnZoomOut").click(function(){
zoomOut();
});
// button Reset Zoom
$("#btnResetZoom").click(function(){
resetZoom();
});
createListenersKeyboard();
function createListenersKeyboard() {
document.onkeydown = onKeyDownHandler;
//document.onkeyup = onKeyUpHandler;
}
function onKeyDownHandler(event) {
//event.preventDefault();
var key;
if(window.event){
key = window.event.keyCode;
}
else{
key = event.keyCode;
}
switch(key){
//////////////
// Shortcuts
//////////////
// Zoom In (Ctrl+"+")
case 187: // Ctrl+"+"
if(ableToShortcut()){
if(event.ctrlKey){
event.preventDefault();
zoomIn();
}
}
break;
// Zoom Out (Ctrl+"-")
case 189: // Ctrl+"-"
if(ableToShortcut()){
if(event.ctrlKey){
event.preventDefault();
zoomOut();
}
}
...