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

Question

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

Navigation

#1 by (1 votes)

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 !!!

javascript html5 canvas

asked by anonymous 24.07.2015 / 15:44

1 answer

METABOX with dropdown state / city in Front End using Cmb2 Plugin JMF, Java Media Framework, is there a replacement?

score 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="-">