FabricJS - Rulers: Zooming & Panning, based on Video

http://stackoverflow.com/questions/42578824/fabric-js-position-elements-relative-to-getzoom-and-getwidth-getheight

by 20yco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="toggle">Turn Panning ON</button>
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
<div class="workspace">
  <canvas id="canvas"></canvas>
</div>

CSS

button {
  margin-bottom: 7px;
}

.workspace {
  background-color: white;
  width: 100%;
  height: calc(100vh - 48px);
}

JavaScript

var canvas = new fabric.Canvas('canvas');
var rectangle = new fabric.Rect({
  fill: 'transparent',
  stroke: 'black',
  strokeWidth: 2,
  top: 60,
  left: 60,
  width: 600,
  height: 300,
  selectable: false
});
var pins = [];
var outerCircle = new fabric.Circle({
  radius: 7.5,
  fill: 'transparent',
  stroke: 'black',
  strokeWidth: 2
});
pins.push(outerCircle);
var innerCircle = new fabric.Circle({
  radius: 5,
  fill: 'transparent',
  stroke: 'black',
  strokeWidth: 2,
  top: 2.5,
  left: 2.5
});
pins.push(innerCircle);
var pinTopLeft = new fabric.Group(pins, {
  top: 67.5,
  left: 67.5,
  selectable: false
});
var pinTopRight = new fabric.Group(pins, {
  top: 67.5,
  left: rectangle.width + rectangle.left - 22.5,
  selectable: false
});
var pinBottomLeft = new fabric.Group(pins, {
  top: rectangle.height + rectangle.top - 22.5,
  left: 67.5,
  selectable: false
});
var pinBottomRight = new fabric.Group(pins, {
  top: rectangle.height + rectangle.top - 22.5,
  left: rectangle.width + rectangle.left - 22.5,
  selectable: false
});
var textSample = new fabric.Text('GORAN', {
  top: 170,
  left: 220,
  scaleX: 2,
  scaleY: 2
});
canvas.add(rectangle, pinTopLeft, pinTopRight, pinBottomLeft, pinBottomRight, textSample);
canvas.setActiveObject(textSample);
/* ZOOM FUNCTIONS */
$('#zoomIn').click(function() {
  rectangle.set({
    width: rectangle.width * 1.1,
    height: rectangle.height * 1.1
  });
  rectangle.setCoords();
  textSample.set({
    top: 60 + (textSample.top - 60) * 1.1,
    left: 60 + (textSample.left - 60) * 1.1,
    scaleX: textSample.scaleX * 1.1,
    scaleY: textSample.scaleY * 1.1
  });
  textSample.setCoords();
  setPins();
  addLeftRuler();
  addTopRuler();
  resizeCanvas();
});
$('#zoomOut').click(function() {
  rectangle.set({
    width: rectangle.width / 1.1,
    height: rectangle.height / 1.1
  });
  rectangle.setCoords();
  textSample.set({
    top: 60 + (textSample.top - 60) / 1.1,
    left: 60 + (textSample.left - 60) / 1.1,
    scaleX:...