Skip to content Skip to sidebar Skip to footer

How To Zoom To Triangle In Canvas

Hey I have created a triangle in canvas, I have used 2 methods: main method: createTriangle which called to createInterval 3 times. The triangle is composed of 3 vertices only. Now

Solution 1:

Given the vertices of a polygon, you can calculate an acceptable zoom point by calculating the arithmetic mean of the vertices X's & Y's. This is actually the polygon's center of mass, but it's a good point to use for zooming.

var sumX=vert0.x+vert1.x+vert2.x;
var sumY=vert0.y+vert1.y+vert2.y;
var zoomX=sumX/3;  // 3 vertices
var zoomY=sumY/3;

Solution 2:

Using the Scale method, you should be able to zoom in and out.


Solution 3:

From the example. You could do something like this with your triangle function:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <canvas id="myCanvas" width="800" height="400" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
  <p>
    <button id="zoomIn">+</button>
    <button id="zoomOut">-</button>
    <script>
      $(document).ready(function() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        ctx.strokeRect(5, 5, 25, 15);

        $('#zoomIn').click(function() {
          ctx.clearRect(0, 0, c.width, c.height);
          ctx.scale(1.10, 1.10);
          ctx.strokeRect(5, 5, 25, 15);
        });

        $('#zoomOut').click(function() {
          ctx.clearRect(0, 0, c.width, c.height);
          ctx.scale(0.90, 0.90);
          ctx.strokeRect(5, 5, 25, 15);
        });

      });
    </script>

</body>

</html>

The zoom increases/decreases the size of your image by 10% each time.


Post a Comment for "How To Zoom To Triangle In Canvas"