如何缩放到画布中的三角形

how to zoom to triangle in canvas

本文关键字：布中 三角形 何缩放 缩放      更新时间：2024-04-19

嘿，我在画布上创建了一个三角形，我使用了两种方法：主要方法：createTriangle，调用createInterval 3次。三角形仅由3个顶点组成。现在我想将缩放选项添加到当前画布。放大和缩小，但我不知道从哪里开始？问题是从这样一个事实开始的，我没有任何中心点的当前三角形和O不知道如何计算它。

任何指导都将是有益的：）。

更新

可以安装在画布上的指令或库呢？

$(function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  //define triangle vertices: 3 vertices for one triangle.
  var ver0 = {
    x: 114,
    y: 366
  };
  var ver1 = {
    x: 306,
    y: 30
  };
  var ver2 = {
    x: 498,
    y: 366
  }
  var triangle = [ver0, ver1, ver2]
  drawTriangle(triangle);

  function drawTriangle(triangle) {
    console.log('drawTriangle', triangle);
    var v0 = triangle[0];
    var v1 = triangle[1];
    var v2 = triangle[2];
    ctx.beginPath();
    createInterval(v0, v1);
    createInterval(v1, v2);
    createInterval(v0, v2);
    ctx.closePath();
  }
  function createInterval(point1, point2) {
    console.log('createInterval', point1, point2);
    ctx.moveTo(point1.x, point1.y);
    ctx.lineTo(point2.x, point2.y);
    ctx.strokeStyle = "black";
    ctx.stroke();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=650 height=500></canvas>

给定多边形的顶点，可以通过计算顶点X&Y。这实际上是多边形的质心，但它是一个很好的缩放点。

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;

使用Scale方法，您应该能够放大和缩小。

来自示例。你可以用你的三角形函数做这样的事情：

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

缩放每次都会使图像的大小增加/减少10%。

相关文章：