Axes of a Cartesian plane changing according to HTML5 zoom (canvas) + JAVASCRIPT

4

Galera is as follows, I am doing with js + html5 and canvas a program to plot graphics: Iwouldliketoimplementazoom+and-asintheimage,andreturntotheoriginalzoombyclicking'='.Mydifficultyisthis:afterzooming,theCartesianaxes'x'and'y'havetochangetheirvalues,donotyou?

Example: link , after pressing the '+' button the values of the axes change, another example is the google chart, after zooming the values of the axes change.

I wanted more or less this, I wanted the idea of how to do this, change the values of the axes according to the zoom, or examples already ready, or some similar solution !!!

    
asked by anonymous 24.07.2015 / 15:44

1 answer

1

Code adapted from: link

With the scale factor you only apply to the drawing from within (points of the interior of the canvas) without worrying about the size of the canvas.

function desenhar(escala, posicao){
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  context.save();
  context.translate(posicao.x, posicao.y);
  context.scale(escala, escala);
  context.beginPath();
  context.moveTo(80, 50);
  context.bezierCurveTo(20,-100, -139, -80, -30, 50);
  context.closePath();

  context.fillStyle = 'blue';
  context.fill();

  context.stroke();
  context.restore();
}

var iniciar = (function(){
  var canvas = document.getElementById("myCanvas");

  var posicao = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };

  var escala = 1.0;
  var fatorMultiplicacao = 0.8;

  document.getElementById("plus").addEventListener("click", function(){
    escala /= fatorMultiplicacao;
    desenhar(escala, posicao);
  }, false);

  document.getElementById("minus").addEventListener("click", function(){
    escala *= fatorMultiplicacao;
    desenhar(escala, posicao);
  }, false);

  desenhar(escala, posicao);
}());
<canvas id="myCanvas" style="width: 300px;"></canvas>
<input type="button" id="plus" value="+">
<input type="button" id="minus" value="-">
    
24.07.2015 / 18:57