具有不同高度和宽度的正多边形

Question

我想用Kinetic.js创建一个多边形，我知道宽度，高度，旋转和点数为多边形。

我认为通过使用RegularPolygon对象可以实现这一点，但是我必须为radius设置一个值。将创建一个三角形：

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可能会被使用，但有可能以更简单的方式实现它吗？我想直接设置宽度和高度。

Answer 1

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

如果要对多边形进行描边，则缩放正多边形会很麻烦，因为笔划也会缩放，因此笔划会变形。

因此，您最好的解决方案可能是绘制形成三角形的多边形线。

以下是示例代码和演示：

＆＃13;

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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