Рисуем более высокий и худой шестиугольник 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>