如何在画布中放大到三角形答案

【问题标题】：how to zoom to triangle in canvas如何在画布中放大到三角形
【发布时间】：2016-07-31 16:20:50
【问题描述】：

嘿，我在画布中创建了一个三角形，我使用了 2 种方法： main 方法：createTriangle 调用了 3 次 createInterval。三角形仅由 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 的总和除以顶点数。使用计算出的zoomX, zoomY 作为缩放焦点。 context.translate 到缩放点并将多边形重新绘制到所需的缩放大小（大或更小）。 context.scale 使缩放更容易。
github.com/epistemex/transformation-matrix-js，见方法fromTriangles()

标签： javascript css angularjs html canvas

【解决方案1】：

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

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

【讨论】：

我只想指出，您的解决方案不会将缩放恢复到以前的任何缩放。将一个数字乘以 1.1 再乘以 0.9 不会返回原始数字。您应该选择一个比例因子（向上或向下无关紧要），然后对于反向比例使用该值的倒数。即scaling = 0.9 缩小ctx,scale(scaling, scaling) 然后放大是ctx.scale(1 / scaling, 1 / scaling)`这将精确地返回比例（当然在浮点限制内）

【解决方案2】：

使用Scale 方法，您应该可以放大和缩小。

【讨论】：

每次放大或缩小都需要重新绘制三角形吗？
是的。清除画布，转换到缩放焦点，然后重绘所有缩放的多边形。您可以使用scale 来简化缩放过程。
没有可以为我做的js库吗？像角度指令？

【解决方案3】：

给定多边形的顶点，您可以通过计算顶点 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;

【讨论】：

糟糕！我编辑了我的答案，因为我最初忘记除以顶点数来获得平均值。 :-O
获得中心点后，如何放大/缩小该特定点？
有几种技术。有些人喜欢使用转换（平移和缩放）。对于简单的缩放，我喜欢使用drawImage的缩放形式。 An example.
我可以将此技术应用于不是图像的元素吗？喜欢形状？
@Brk。当然。 drawImage 画布到第二个屏幕外画布，并像使用图像一样使用第二个画布（是的，画布可以是drawImage 的图像源）。这种 drawImage 形式的缩放比每次缩放都重新绘制形状更有效。 ;-)