Fabric.js - 正八角形を描く

Question

私はFabric.jsを使用していますが、私は、六角形を描くために、次のコードを持っている：

makeObject(originPoint, newPoint, canvasObject, properties) { 

let width = Math.abs(newPoint.x - originPoint.x); 
let height = 0; 

if(this.shouldKeepProportion){ 
    height=width; 
}else{ 
    height=Math.abs(newPoint.y - originPoint.y); 
} 

    width = (this.minWidth!=null && width<this.minWidth ? this.minWidth: width); 
    height = (this.minHeight!=null && height<this.minHeight ? this.minHeight : height); 

let sweep=Math.PI*2/6; 
let points=[]; 
//generate points for 6 angles 
for(let i=0;i<6;i++){ 
    let x=width*Math.cos(i*sweep); 
    let y=height*Math.sin(i*sweep); 
    points.push({x:x/2,y:y/1.75}); 
} 

properties = { 
    objectType: 'octagon', 
    left: originPoint.x, 
    top: originPoint.y, 
    originX: 'left', 
    originY: 'top', 
    fill: 'rgba(0, 0, 0, 1.0)', 
    width: width, 
    height: height, 
    originX: originPoint.x > newPoint.x ? 'right' : 'left', 
    originY: originPoint.y > newPoint.y ? 'bottom' : 'top', 
    flipX: originPoint.x > newPoint.x, 
    stroke: 'rgba(0, 0, 0, 1.0)', 
    strokeWidth: 1, 
    strokeLineJoin: 'round', 
    ...properties 
}; 

return new fabric.fabric.Polygon(points, properties); 
} 

私が取得したいどのような六角形と同じ正八角形、です。私はコーナー/アングルの数を変更しようとすると、私は八角形の次の型取得しています：私は実際に必要なもの

はこれです：

ご注意：私はそれを回転させたりする必要はありません私はそれを絵のように描く必要があります。

ありがとうございました！

EDIT：ワーキングJSFiddle：https://jsfiddle.net/42fb716n/

Answer 1

これは、代わりにライン（のポリゴン（）関数を使用して、それを行う必要があります）ので、それは単一のオブジェクトではなく、オブジェクトのグループのようなものだ、とそれはあなたの図面に動作します

var canvas = new fabric.Canvas('canvas'); 
 
var size = 150; 
 
var side = Math.round((size * Math.sqrt(2))/(2 + Math.sqrt(2))); 
 
var octagon = new fabric.Polygon([ 
 
    {x:-side/2, y:size/2}, 
 
    {x:side/2, y:size/2}, 
 
    {x:size/2, y:side/2}, 
 
    {x:size/2, y:-side/2}, 
 
    {x:side/2, y:-size/2}, 
 
    {x:-side/2, y:-size/2}, 
 
    {x:-size/2, y:-side/2}, 
 
    {x:-size/2, y:side/2}], { 
 
    stroke: 'red', 
 
    left: 10, 
 
    top: 10, 
 
    strokeWidth: 2, 
 
    strokeLineJoin: 'bevil' 
 
},false); 
 
canvas.add(octagon);

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
 
<canvas id="canvas" width=200 height=200></canvas>

は、あなたが何かを必要とする場合、私に教えてください：アプリでは、単一およびグループのオブジェクトの異なる特性を持っているよう。お力になれて、嬉しいです！