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"