javascript - 如何在 Canvas 中缩放到三 Angular 形

Question

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

任何指导都会有所帮助:)。

更新

关于可以安装在 Canvas 上的指令或库呢？

$(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>

Answer 1

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