不同高度和宽度的正多边形答案

【问题标题】：Regular polygon with different height and width不同高度和宽度的正多边形
【发布时间】：2014-12-01 17:59:08
【问题描述】：

我想用 Kinetic.js 创建一个多边形，我知道 width、height、rotation 和点数用于多边形。

我认为这可以通过使用 RegularPolygon 对象来实现，但为此我必须为半径设置一个值。会像这样创建一个三角形：

var hexagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 3,
    radius: 70,
    fill: 'red',
});

在此处查看正在创建的类似多边形： http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-regular-polygon-tutorial/

结果看起来像这样：

但是如果我想创建一个宽度应该是高度两倍的三角形呢？看起来像这样：

据我所知，仅通过调整半径是不可能的。

如何为任何多边形实现这一点？请注意，我不知道开始点的值（尽管可以计算它们）。我认为 scaleX 和 scaleY 可能可以使用，但是否有可能以更简单的方式实现它？我想直接设置宽度和高度。

【问题讨论】：

KineticJS 多边形是正多边形（所有边的长度相等）。缩放正三角形很尴尬，因此您最好的解决方案可能是只绘制一条形成三角形的折线。
你有我如何做到这一点的例子吗？如何在知道区域的宽度、高度、旋转以及点数的情况下计算点数？

标签： javascript kineticjs

【解决方案1】：

KineticJS 多边形是正多边形（所有边的长度相等）。

如果您想对多边形进行描边，缩放正多边形会很麻烦，因为描边也会被缩放，因此描边会变形。

因此，您最好的解决方案可能是仅绘制一条形成三角形的折线。

这是示例代码和演示：

var stage = new Kinetic.Stage({
  container: 'container',
  width: 350,
  height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var PI=Math.PI;
var PI2=PI*2;

scaledRegularPolygon(100,100,30,5,2,1,'red');

function scaledRegularPolygon(cx,cy,radius,sides,scaleX,scaleY,fill){
  var points=[];
  for(var i=0;i<sides;i++){
    var sweep=PI2/sides;
    var midbottom=PI/2;
    var rightbottom=midbottom-sweep/2;
    var start=rightbottom-sweep;
    var angle=start+sweep*i;
    var x=cx+radius*Math.cos(angle);
    var y=cy+radius*Math.sin(angle);
    x=cx+(x-cx)*scaleX;
    y=cy+(y-cy)*scaleY;
    points.push(x,y);
  }
  var poly=new Kinetic.Line({
    points:points,
    closed:true,
    fill:fill,
    stroke: 'black',
    strokeWidth:4
  });
  layer.add(poly);
  layer.draw();
}

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<div id="container"></div>

【讨论】：

感谢您的回答，非常感谢！然而，它并不能真正解决所有问题，因为它只适用于三角形而不适用于具有任意数量点的多边形。我不确定是否将答案标记为已接受。我应该可以用那个方法前进，只是还没有开始。
我明白了，所以你需要一个通用的正多边形缩放算法。我已经编辑过可能会回答以显示如何使用三角函数来做到这一点。祝你的项目好运！
谢谢！在这种情况下，半径是内半径还是外半径？
另外，它仍然不能真正解决我的问题。正如我所说，我没有半径、scaleX 和 scaleY，所以我需要在调用函数之前计算它们。我试图根据宽度和高度（多边形的矩形边界框的宽度和高度）计算半径，但我并没有得到完美。我也不确定如何计算 scaleX 和 scaleY。

【解决方案2】：

Kinetic.Transform 允许我们通过将点传递给Kinetic.Transform.point() 来从变换矩阵计算点的位置。从您要为其转换点的对象中，使用Kinetic.Node.getAbsoluteTransform().copy()（或Kinetic.Node.getTransform().copy()，任何适合您的目的）获取其转换矩阵。然后我们在变换矩阵上调用Kinetic.Transform.scale(2,2)，得到一个比例为两倍的矩阵。然后对于每个点，使用Kinetic.Transform.point() 获取它的新位置。

【讨论】：