Question

嘿我在画布上创建了一个三角形，我使用了两种方法： main方法：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>

Answer 1

给定多边形的顶点，您可以通过计算顶点X的算术平均值来计算可接受的缩放点。 ÿ的。这实际上是多边形的质心，但它是用于缩放的好点。

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;

Answer 2

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

cd etc

变焦每次增加/减少10％的图像尺寸。

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

更新

2 个答案: