Fabric.js -绘制正则八角形
Fabric.js -绘制正则八角形
提问于 2017-03-14 08:54:59
我使用的是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);
}我想要的是一个普通的八角形，和六边形一样。如果我试图改变角/角的数目，我将得到以下类型的八角形：
我真正需要的是：
请注意:我不需要它旋转或翻转或诸如此类的东西，我需要它像画在图片上。
谢谢你的帮助!
编辑:工作JSFiddle：https://jsfiddle.net/42fb716n/
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-15 04:38:41
应该这样做，使用Polygon()函数而不是Line()，这样它就像单个对象，而不是一组对象，因此它在绘图应用程序中工作，因为您对单个对象和组对象具有不同的属性：
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>
如果你还需要什么就告诉我。很乐意帮忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42781527
复制相关文章
相似问题
腾讯云开发者
