如何放大到画布三角 [英] how to zoom to triangle in canvas

问题描述

嘿，我已经创造了帆布一个三角形，我已经使用2种方法：
主要方法：createTriangle它叫createInterval 3倍。
三角形是由仅3个顶点。
现在我想缩放选项添加到当前画布。
放大和缩小，但不知从哪里开始知道吗？
的一点改进的是，我没有任何的中心点为当前三角形和O的不知道如何计算它的事实开始。

任何指导将是有益的。）

更新

有关可以安装在画布指令或库是什么？

\r

\r

$（函数（）{\r
  VAR帆布=的document.getElementById（画布上）;\r
  变种CTX = canvas.getContext（2D）;\r
  //定义三角形顶点：3个顶点为一个三角形。\r
  VAR VER0 = {\r
    X：114，\r
    Y：366\r
  };\r
  VAR VER1 = {\r
    X：306，\r
    Y：30\r
  };\r
  VAR VER2 = {\r
    X：498，\r
    Y：366\r
  }\r
  VAR三角= [VER0，VER1，VER2]\r
\r
\r
\r
  drawTriangle（三角形）;\r
\r
\r
\r
\r
  功能drawTriangle（三角形）{\r
    的console.log（'drawTriangle'，三角形）;\r
    变种V0 =三角形[0];\r
    变种V1 =三角形[1];\r
    变种V2 =三角形[2];\r
    ctx.beginPath（）;\r
    createInterval（V0，V1）;\r
    createInterval（V1，V2）;\r
    createInterval（V0，V2）;\r
    ctx.closePath（）;\r
  }\r
\r
  功能createInterval（点1，点2）{\r
    的console.log（'createInterval，点1，点2）;\r
    ctx.moveTo（point1.x，point1.y）;\r
    ctx.lineTo（point2.x，point2.y）;\r
    ctx.strokeStyle =黑色;\r
    ctx.stroke（）;\r
  }\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;帆布ID =画布WIDTH = 650 HEIGHT = 500＆GT;＆LT; /帆布＆GT;

\r

\r

\r

解决方案

给定一个多边形的顶点，你可以通过计算顶点X的＆放的算术平均值计算的可接受放大点; ÿ的。这实际上是一种大规模的多边形的中心，但它是一个好点的使用变焦。

  VAR SUMX = vert0.x + vert1.x + vert2.x;
VAR苏梅= vert0.y + vert1.y + vert2.y;
VAR zoomX = SUMX / 3; // 3个顶点
VAR zoomY =苏梅/ 3;
 

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 I want to add zoom option to current canvas. Zoom In and Zoom out, but I don't know from where to start? The problen start from the fact that,I don't have any center point for current triangle and O don't know how to calculate it.

Any guidance will be helpfull :).

Update

What about directives or libraries which can be installed over the 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>

解决方案

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 vertices
var zoomY=sumY/3;

这篇关于如何放大到画布三角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！