konvajs - 绘制一个更高更瘦的 Konva.js 六边形

Question

我想使用 RegularPolygon 绘制一个“平面”六边形，但想调整高度和宽度。“扁平”部分很容易旋转 30 度，但我似乎无法弄清楚如何让它更高更瘦。有什么建议么？

提前致谢。

担

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: 150
});

const layer = new Konva.Layer();
stage.add(layer);


var hexagon = new Konva.RegularPolygon({
  x: 100,
  y: 75,
  sides: 6,
  radius: 70,
  fill: 'red',
  rotation: 30
});

layer.add(hexagon);

stage.add(layer);

<script src="https://unpkg.com/konva@^2/konva.min.js"></script>
  <div id="container"></div>

目前使用线路：

const hex = new Konva.Line({  
points: hex.polygonPoints, // array of points  
closed: true,  
fill: 'rgba(0,0,0,0.6)'  
dashEnabled: false,  
shadowEnabled: false,  
listening: true,  
draggable: false,  
hitStrokeWidth: 0,  
perfectDrawEnabled: false  
});  

Answer 1

您可以将节点移动到组中并使用scaleX和scaleY使其更高。

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: 150
});

const layer = new Konva.Layer();
stage.add(layer);

var group = new Konva.Group({
  x: 100,
  y: 75,
  scaleY: 1.5
})
layer.add(group);
var hexagon = new Konva.RegularPolygon({
  sides: 6,
  radius: 50,
  fill: 'red',
  rotation: 30
});
group.add(hexagon);

stage.add(layer);

<script src="https://unpkg.com/konva@^2/konva.min.js"></script>
  <div id="container"></div>