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 verticesvar 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><scriptsrc="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><canvasid="myCanvas"width="800"height="400"style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><p><buttonid="zoomIn">+</button><buttonid="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"