Fabric.js - 绘制正八边形 [英] Fabric.js - Draw regular octagon

问题描述

我正在使用Fabric.js并且我有以下代码来绘制六边形：

I am using Fabric.js and I have the following code for drawing a hexagon:

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

我想要的是一个正八边形，与六边形相同。如果我试图改变角/角的数量，我得到以下类型的八角形：

What I want to get is a regular octagon, same as the hexagon. If i try to change the number of corners/angles, I am getting the following type of octagon:

我真正需要的是：

What I actually need is this:

请注意：我不需要轮换或翻转或类似的东西，我需要它画在图片上。

PLEASE NOTE: I do not need it rotated or flipped or something like that, I need it drawn like on the picture.

谢谢你的帮助！

编辑：工作JSFiddle： https://jsfiddle.net/42fb716n/

Working JSFiddle: https://jsfiddle.net/42fb716n/

推荐答案

这应该这样做，使用Polygon（）函数而不是Line（），所以它就像一个对象，而不是一组对象，所以它在您的绘图应用程序中工作具有单个和组对象的不同属性：

This should do it, using the Polygon() function instead of Line() so it's like a single object, not a group of objects, and so it works in your drawing App as you have different properties for single and group objects:

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>

如果您还有其他需要，请告诉我。很乐意提供帮助！

Let me know if you need anything else. Happy to help!

这篇关于Fabric.js - 绘制正八边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！